/* =============================================================
   Next Line AI — hero.css
   Scroll-driven cinematic hero. Visual layers sit ON TOP of real
   DOM text (.hero__copy) which paints first. Heavy motion is driven
   by hero.js via transform/opacity only (compositor-friendly).
   ============================================================= */

.hero{position:relative;height:540vh;background:var(--ink);z-index:1}
.hero__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:#05080a;
}

/* ---- Zoom scene: everything that scales toward the monitor ---- */
.hero__scene{
  position:absolute;inset:0;
  transform-origin:53.5% 50.5%;        /* overwritten in px by JS to the monitor */
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__img--night{opacity:0;will-change:opacity;transform:translateZ(0)}

/* Descending sun glow — clipped at the hill line so it sets *behind* the hills */
.hero__sun-clip{
  position:absolute;left:0;width:100%;top:-3000px;height:3000px; /* JS sets top/height to the hill line */
  overflow:hidden;pointer-events:none;
}
.hero__sun{
  position:absolute;left:0;top:0;width:1px;height:1px;     /* JS sets size+translate */
  pointer-events:none;will-change:transform,opacity;transform:translateZ(0);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,247,224,.95) 0%,
      rgba(255,214,138,.85) 16%,
      rgba(255,170,86,.55) 34%,
      rgba(255,135,60,.22) 55%,
      rgba(255,120,50,0) 72%);
  border-radius:50%;
  mix-blend-mode:screen;
}
.hero__sun::after{ /* hot core */
  content:"";position:absolute;inset:34% 34%;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,243,214,.9) 45%,rgba(255,214,150,0) 75%);
}

/* Starfield — masked to the window sky (the mask cover-fits exactly like the
   photo, so it stays on the glass at every size/zoom). The canvas inside rolls
   WITHIN this clip, so the sky wheels outside the window — never over the room. */
.hero__stars{
  position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;will-change:opacity;pointer-events:none;overflow:hidden;
  -webkit-mask:url(/assets/img/sky-mask.png) center/cover no-repeat;
          mask:url(/assets/img/sky-mask.png) center/cover no-repeat;
}
.hero__stars canvas{position:absolute;inset:0;width:100%;height:100%;will-change:transform;transform-origin:72% 60%;animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.82}50%{opacity:1}}

/* In-screen inbox — razor-sharp HTML overlaid on the monitor.
   Logical 1000x620 box; JS maps it onto the screen quad via matrix3d. */
.hero__inbox{
  position:absolute;left:0;top:0;width:1000px;height:620px;
  transform-origin:0 0;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
  border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.25);
  font-family:var(--font-body);color:#0d1b22;
  opacity:0;transition:opacity .5s ease;
  contain:layout paint;
}
.hero__inbox.is-on{opacity:1}
.inbox__bar{display:flex;align-items:center;gap:14px;height:74px;padding:0 26px;background:linear-gradient(180deg,#0b6b63,#0a534d);color:#eafffb}
.inbox__bar .ico{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:18px}
.inbox__bar b{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em}
.inbox__count{margin-left:auto;font-family:var(--font-display);font-weight:600;font-size:15px;background:#00FFE8;color:#000;padding:5px 12px;border-radius:999px}
.inbox__list{padding:6px 0}
.inbox__row{
  display:flex;align-items:center;gap:18px;padding:16px 26px;border-bottom:1px solid #eef2f1;
  opacity:0;transform:translateX(26px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.inbox__row.in{opacity:1;transform:none}
.inbox__row .av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px}
.inbox__row .meta{min-width:0;flex:1}
.inbox__row .from{display:flex;align-items:center;gap:10px;font-weight:600;font-size:19px;color:#0c2a26}
.inbox__row .from .new{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#066;background:rgba(0,255,232,.22);padding:2px 7px;border-radius:5px}
.inbox__row .subj{font-size:16px;color:#5a6b67;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.inbox__row .time{margin-left:auto;font-size:14px;color:#9aa8a4;flex:0 0 auto}
.inbox__row .unread{width:11px;height:11px;border-radius:50%;background:#0ABAB5;flex:0 0 auto}
.inbox__row--unread{background:linear-gradient(90deg,rgba(0,255,232,.06),transparent)}

/* Colour grade + vignette + final darken */
.hero__grade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.0;
  background:linear-gradient(180deg,rgba(8,20,60,.6),rgba(2,6,20,.2) 60%,transparent);will-change:opacity}
.hero__vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 53% 48%,transparent 38%,rgba(2,5,7,.5) 100%)}
.hero__darken{position:absolute;inset:0;pointer-events:none;background:rgba(2,5,8,.0);will-change:opacity}

/* ---- Fixed UI layer (NOT zoomed): copy, bubbles, tagline, hint ---- */
.hero__ui{position:absolute;inset:0;z-index:6;pointer-events:none}
.hero__ui a,.hero__ui button{pointer-events:auto}

.hero__copy{
  position:absolute;left:clamp(20px,7vw,96px);top:50%;transform:translateY(-50%);
  max-width:min(640px,82vw);will-change:transform,opacity;
}
.hero__copy h1{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.04;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 50px rgba(0,0,0,.6)}
.hero__copy h1 .t-cyan{color:var(--cyan)}
.hero__eyebrow{display:inline-block;margin-bottom:1.1rem;font-family:var(--font-display);font-weight:600;font-size:clamp(.78rem,1vw,.9rem);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero__copy .sub{margin-top:1.15rem;font-size:clamp(1.05rem,1.55vw,1.28rem);line-height:1.55;color:#dbe4e2;max-width:46ch;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero__copy .hero__cta{margin-top:2.1rem;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero__copy .hero__cta .btn{min-width:266px;justify-content:center;font-size:1.18rem;padding:1.05em 1.8em}

/* at-a-glance micro-row under hero copy */
.hero__glance{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:10px 8px}
.hero__glance span{display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;font-weight:500;color:#bcccc8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:.42em .8em;border-radius:999px;backdrop-filter:blur(4px)}
.hero__glance span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* Bubbles — emanate from the monitor (positioned each frame by JS) */
.hero__bubbles{position:absolute;left:0;top:0;width:100%;height:100%}
.bubble{
  position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:clamp(13px,1.05vw,15px);
  background:linear-gradient(135deg,#00FFE8,#0ABAB5);color:#000;
  box-shadow:0 10px 30px -6px rgba(10,186,181,.5),inset 0 0 0 1px rgba(255,255,255,.3),0 0 24px -6px rgba(0,255,232,.5);
  opacity:0;will-change:transform,opacity;transform:translateZ(0);
}
.bubble .d{width:7px;height:7px;border-radius:50%;background:#000;flex:0 0 auto}
.bubble svg{width:14px;height:14px}

/* Closing tagline — the finale: pops up ABOVE the screen, prominent and clear */
.hero__tagline{
  position:absolute;left:50%;top:25%;transform:translate(-50%,-50%);
  text-align:center;width:min(940px,90vw);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,5vw,3.7rem);line-height:1.1;letter-spacing:-.03em;color:#fff;
  text-shadow:0 4px 44px rgba(0,0,0,.9),0 1px 5px rgba(0,0,0,.7);opacity:0;will-change:opacity,transform;
}
.hero__tagline::before{ /* soft scrim guarantees legibility regardless of backdrop */
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:170%;height:360%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(3,6,10,.72),rgba(3,6,10,.34) 50%,transparent 78%);
}
.hero__tagline .t-cyan{color:var(--cyan)}

/* Scroll hint */
.hero__hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#9fb0ad;will-change:opacity;
}
.hero__hint .mouse{width:22px;height:34px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);position:relative}
.hero__hint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--cyan);transform:translateX(-50%);animation:scrollwheel 1.8s var(--ease) infinite}
@keyframes scrollwheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1;transform:translate(-50%,9px)}100%{opacity:0;transform:translate(-50%,9px)}}

/* Clock — an SVG (200×58 viewBox) matrix3d-fitted onto the angled clock face.
   SVG text with dominant-baseline:central fills the digit quad cleanly (no font
   line-box margin), so the digits are large and readable and match the face tilt. */
.hero__clock{
  position:absolute;left:0;top:0;width:200px;height:58px;
  transform-origin:0 0;overflow:visible;
}
.hero__clock-d{
  font-family:var(--font-display);font-weight:500;font-size:70px;
  fill:#eafdf6;letter-spacing:0;
  filter:drop-shadow(0 0 3px rgba(120,255,238,.55));
}

/* ---- Scroll cue / story captions could go here in future ---- */

/* =========================================================
   Reduced-motion / no-JS static hero
   ========================================================= */
.hero.is-static{height:auto}
.hero.is-static .hero__stage{position:relative;height:88vh;min-height:560px}
.hero.is-static .hero__scene{transform:none!important}
.hero.is-static .hero__img--night{opacity:0!important}
.hero.is-static .hero__sun{opacity:1}
.hero.is-static .hero__copy{opacity:1!important;transform:translateY(-50%)!important}
.hero.is-static .hero__inbox{opacity:1}
.hero.is-static .hero__inbox .inbox__row{opacity:1;transform:none}
.hero.is-static .hero__bubbles,.hero.is-static .hero__tagline,.hero.is-static .hero__hint{display:none}
.hero.is-static .hero__darken,.hero.is-static .hero__grade{opacity:0}

/* No-JS: reveal copy, hide scroll-only chrome (progressive enhancement).
   The baked sunset render already shows a lit monitor + 19:42 clock,
   so we simply hide the JS-positioned overlays. */
.no-js .hero{height:auto}
.no-js .hero__stage{position:relative;height:88vh;min-height:560px}
.no-js .hero__bubbles,.no-js .hero__tagline,.no-js .hero__hint{display:none}
.no-js .hero__inbox,.no-js .hero__clock,.no-js .hero__sun-clip,.no-js .hero__stars,.no-js .hero__darken,.no-js .hero__grade{display:none}
.no-js .hero__copy{opacity:1}

/* =========================================================
   Mobile hero — simplified motion, monitor-focused framing
   ========================================================= */
@media (max-width:768px){
  .hero{height:440vh}
  .hero__copy{top:auto;bottom:13%;transform:none;left:clamp(20px,6vw,40px);right:clamp(20px,6vw,40px);max-width:none}
  /* soft scrim behind the copy so the white headline stays readable over the bright monitor.
     Eases in from fully transparent at the top so it blends into the image (no hard edge). */
  .hero__copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-5rem -14vw -1.5rem -9vw;
    background:linear-gradient(to bottom,
      transparent 0%,
      rgba(3,7,10,.18) 14%,
      rgba(3,7,10,.45) 28%,
      rgba(3,7,10,.64) 46%,
      rgba(3,7,10,.55) 70%,
      rgba(3,7,10,.22) 90%,
      transparent 100%)}
  .hero__copy h1{font-size:clamp(2rem,8.5vw,3rem);text-shadow:0 2px 28px rgba(0,0,0,.88),0 1px 3px rgba(0,0,0,.7)}
  .hero__copy .sub{font-size:1.02rem;max-width:36ch}
  .hero__glance{display:none}
  .hero__copy .hero__cta .btn{min-width:0;width:100%}
  .hero__tagline{top:22%;font-size:clamp(1.5rem,7vw,2.3rem);width:92vw}
  .hero.is-static .hero__copy{transform:none!important}
}
@media (max-width:768px) and (orientation:portrait){
  /* monitor sits left-of-centre; nudge focal framing handled in JS */
  .hero__vignette{background:radial-gradient(130% 80% at 52% 44%,transparent 30%,rgba(2,5,7,.6) 100%)}
}
@media (max-width:420px){
  .hero__copy h1{font-size:clamp(1.85rem,9vw,2.5rem)}
}