/* ============================================================
   ConverNova, the home hero. One screen, video looping behind
   a fixed composition. Home page only.

   The layout is identical on every device. What is gated is the
   video download, not the design: phones and reduced motion get
   the composed still and never fetch the clip.
   ============================================================ */

.hero{position:relative;z-index:1;min-height:100vh;min-height:100svh;
  display:grid;place-items:center;overflow:hidden;background:var(--canvas-deep);
  padding:calc(var(--nav-h) + clamp(40px,6vh,72px)) var(--gutter) clamp(48px,8vh,88px)}

.hero-media{position:absolute;inset:0;z-index:0}
.poster{position:absolute;inset:0;background-size:cover;background-position:50% 46%;
  transform:scale(1.04);
  animation:heroDrift 44s var(--ease-soft) infinite alternate}
@keyframes heroDrift{
  0%{transform:scale(1.04) translate3d(0,0,0)}
  100%{transform:scale(1.10) translate3d(-1.2%,-1%,0)}
}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease-soft);will-change:transform;transform:translateZ(0)}
.hero.video-ready #hero-video{opacity:1}
.hero.video-ready .poster{opacity:0;transition:opacity 1.1s var(--ease-soft)}

/* One soft radial. No horizontal bands: the first build used a top and bottom
   gradient that read as letterboxing, and the nav has its own solid bar now. */
/* The first radial covers the text column, the second darkens the far edges.
   Vertical reach matters: the kicker sits well above centre and a shallow
   ellipse leaves it on raw frame. Measured against the worst pixel, not the
   average, with the glyph shadows switched off. */
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 86% 92% at 50% 50%,rgba(4,5,9,.82) 0%,rgba(4,5,9,.73) 48%,rgba(4,5,9,.28) 82%,rgba(4,5,9,0) 100%),
    radial-gradient(ellipse 132% 108% at 50% 48%,rgba(8,10,16,0) 50%,rgba(8,10,16,.18) 84%,rgba(8,10,16,.34) 100%)}

.hero-inner{position:relative;z-index:1;max-width:880px;text-align:center;
  text-shadow:var(--tshadow)}
.hero .kicker-h{font-family:var(--mono);font-size:clamp(10px,1vw,11.5px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper);margin:0 0 20px}
.hero h1{font-size:clamp(28px,4.4vw,52px);line-height:1.04;letter-spacing:-.024em;margin:0}
/* the hyphen in next-gen is a break opportunity and the line filled right at
   it, splitting the word across two lines. The subline was leaving "it." alone
   on a line of its own. */
.hero h1 .nb,.hero .sub .nb,.hero .explain .nb{white-space:nowrap}
.hero .sub{font-family:var(--display);font-variation-settings:"wdth" 106;font-weight:600;
  font-size:clamp(17px,2.2vw,26px);line-height:1.26;letter-spacing:-.012em;
  margin:.55em auto 0;max-width:44ch;color:var(--accent)}
/* Running prose, so the measure matters: about 68 characters a line is what
   reads comfortably. The wide block this used to be was built to hold one
   sentence per line, and at that width a paragraph gives 120 character lines
   that the eye loses its place in. */
.hero .explain{margin:26px auto 0;max-width:68ch;color:var(--text-dim);
  font-size:clamp(15px,1.4vw,17.2px);line-height:1.7}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero .btn{text-shadow:none}

/* an honest scroll cue, and it goes away on short screens */
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;
  width:24px;height:38px;border:1px solid var(--line-strong);border-radius:13px;opacity:.6}
.cue::after{content:"";position:absolute;left:50%;top:8px;width:2px;height:6px;border-radius:2px;
  margin-left:-1px;background:var(--accent);animation:cuedrop 2.4s var(--ease-soft) -.6s infinite}
@keyframes cuedrop{0%,100%{transform:translateY(0);opacity:0}
  30%{opacity:1}70%{transform:translateY(12px);opacity:0}}
@media(max-height:620px){.cue{display:none}}

/* the fixed environment layer behind the whole page */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{position:absolute;inset:-25%;
  background:radial-gradient(ellipse 46% 38% at 22% 24%,rgba(74,150,255,.10),transparent 62%),
             radial-gradient(ellipse 40% 34% at 80% 72%,rgba(208,138,85,.065),transparent 60%);
  animation:drift 96s var(--ease-soft) -22s infinite alternate}
@keyframes drift{0%{transform:translate3d(-2.5%,1.5%,0) scale(1)}
  100%{transform:translate3d(3%,-2%,0) scale(1.12)}}
.env-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================
   THE VIDEO GATES. These five queries must stay character for
   character identical to the GATES array in site.js. They gate
   the download, not the layout.
   ============================================================ */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  #hero-video{display:none}
}
@media (prefers-reduced-motion: reduce){
  .env-glow,.poster{animation:none}
  .poster{transform:scale(1.04)}
}