/* Home opening screen only: "Aurora over the North Sea" — a real-time 3D scene (src/bundles/hero3d.js)
   under the wordmark. Everything below the hero uses the light site system. */

.hero{
  --abyss:#030812; --h-green:#5FD3C6; --h-teal:var(--sea-light); --h-violet:var(--copper); --h-pink:var(--copper-light); --h-gold:var(--copper-pale);
  --h-text-2:rgba(226,232,255,.76); --h-text-3:rgba(226,232,255,.55); --h-line:rgba(170,190,255,.16);
  --h-fd:"Montserrat","Inter",system-ui,sans-serif; --h-fs:"Montserrat","Inter",system-ui,sans-serif;
  --expo:cubic-bezier(.87,0,.13,1); --spring:cubic-bezier(.34,1.4,.64,1);
  position:relative;min-height:calc(100svh - 110px);display:grid;grid-template-columns:minmax(0,1fr);align-items:end;
  padding:clamp(64px,10vh,120px) 0 clamp(56px,8vh,96px);overflow:hidden;color:#fff;color-scheme:dark;
  background:radial-gradient(120% 80% at 70% 0%,#10284a 0%,transparent 55%),var(--abyss)
}
.hero canvas.hero-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 2.4s ease}
.hero canvas.hero-gl.on{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,5,12,.72),rgba(3,5,12,.42) 45%,rgba(3,5,12,.18) 64%,transparent 80%),linear-gradient(0deg,rgba(3,5,12,.85) 0%,rgba(3,5,12,.45) 24%,transparent 52%)}
.hero-inner{position:relative;z-index:3;min-width:0}
.hero .eyebrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.hero .chip{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px var(--h-line);backdrop-filter:blur(8px)}
.hero .chip.m{background:rgba(201,133,85,.2);color:var(--copper-pale)}
.hero .chip .dot{background:var(--h-pink)}

.wordmark{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.12em;font-family:var(--h-fd);font-weight:800;line-height:.9;letter-spacing:-.025em;font-size:clamp(76px,12.5vw,200px);margin:0 0 22px -.04em;user-select:none;color:#fff}
.wordmark .word{display:inline-block;white-space:nowrap}
/* the drawn word: letters rise in, then the copper ribbon sweeps from the A's crossbar through the X and over IS */
.wordmark .wm-svg{display:block;width:2.523em;height:.816em;margin-bottom:-.022em;overflow:visible}
.wordmark .word{align-self:flex-end}
.wordmark #w-letters,.wordmark #w-letters-front,.wordmark #w-teal{animation:wmUp .7s var(--expo) 0s both}
.wordmark #w-copper,.wordmark .wm-gapcut{animation:wmDraw .85s cubic-bezier(.65,0,.25,1) .25s both}
.wordmark #w-shadow{animation:wmFade .4s ease 1s both}
@keyframes wmUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes wmDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wmFade{from{opacity:0}to{opacity:1}}
/* the X is the logo's ribbon X (src/assets/img/ribbon-x.svg); offsets printed by tools/make-brand.py */
.wordmark .yr{font-weight:300;letter-spacing:-.02em;color:#E4E6E8;margin-left:.09em;animation:chIn .9s var(--expo) .6s both}
@keyframes chIn{from{opacity:0;transform:translateY(.3em)}}
@keyframes ribIn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

.hero-sub{font-family:var(--h-fs);font-weight:600;font-size:clamp(19px,1.9vw,27px);line-height:1.3;letter-spacing:-.01em;max-width:900px;margin:6px 0 4px;color:#fff}
.hero-sub em{font-style:normal;font-weight:400;color:#C9D6E6}
.hero-rule{display:block;width:64px;height:3px;margin:16px 0 14px;background:var(--copper);border-radius:2px}
.hero-kick{display:block;font:500 clamp(11px,1vw,13.5px)/1.4 var(--h-fd);letter-spacing:.32em;text-transform:uppercase;color:#C9D6E6}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin:20px 0 30px;font-size:clamp(15px,1.2vw,17px);color:var(--h-text-2)}
.hero-meta b{color:#fff;font-weight:600}
.hero-meta span{display:inline-flex;align-items:center;gap:9px}
.hero-meta svg{width:17px;height:17px;color:var(--h-green)}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.hero .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px;margin-top:40px}
.hero-foot p{color:var(--h-text-2)}

.hero .scroll-cue{position:absolute;right:var(--gut);bottom:34px;z-index:4;display:flex;align-items:center;gap:12px;font:600 10.5px var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--h-text-3);text-decoration:none;writing-mode:vertical-rl}
.scroll-cue i{width:1px;height:60px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-30%;width:100%;height:30%;background:#fff;animation:cue 2.2s var(--expo) infinite}
@keyframes cue{to{top:100%}}
.hero-tags{position:absolute;z-index:3;right:var(--gut);top:calc(50% - 30px);display:grid;gap:8px;justify-items:end}
.hero-tags span{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border-radius:999px;background:rgba(5,8,20,.5);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--h-line);font:500 12px var(--fb);letter-spacing:.04em;color:var(--h-text-2)}
.hero-tags i{width:6px;height:6px;border-radius:50%;background:var(--h-green)}
.hero-tags span:nth-child(2) i{background:var(--h-pink)}
.hero-tags span:nth-child(3) i{background:var(--h-gold)}

/* countdown inside the hero: glass flip cards */
.hero .countdown{gap:clamp(6px,1vw,12px)}
.hero .cd-unit{gap:8px}
.hero .cd-unit small{font-size:10.5px;letter-spacing:.2em;color:var(--h-text-3)}
.hero .cd-digits{gap:4px}
.hero .flip{width:clamp(34px,3.4vw,48px);height:clamp(46px,4.7vw,64px);perspective:300px;font:600 clamp(26px,2.9vw,38px)/1 var(--fu);overflow:visible}
.hero .flip .fc{place-items:center;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff}
.hero .flip .fc::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.35)}
.hero .flip.go .fc{animation:flip .6s var(--ease)}
@keyframes flip{0%{transform:rotateX(0)}45%{transform:rotateX(-90deg)}55%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.hero .cd-sep{font:600 26px/1 var(--fu);color:var(--h-text-3);padding-bottom:30px}

/* the key-facts band sits directly under the hero */
.hero+.facts{margin-top:0;border-top:3px solid var(--orange)}

@media (max-width:1000px){.hero-tags{display:none}}
@media (max-width:560px){
  .hero .flip{width:24px;height:36px;font-size:22px}.hero .flip .fc{border-radius:7px}.hero .cd-digits{gap:2px}.hero .cd-sep{font-size:20px;padding-bottom:22px}.hero .countdown{gap:6px}.hero .cd-unit small{font-size:9px;letter-spacing:.1em}
  .hero-meta{flex-direction:column}.hero .btn-row .btn{flex:1 1 auto}.hero .scroll-cue{display:none}
}
@media (max-width:480px){.wordmark{font-size:19vw}}
@media (prefers-reduced-motion:reduce){.wordmark .yr,.wordmark .wm-svg *,.scroll-cue i::after{animation:none}}
.reduce-motion .wordmark .yr,.reduce-motion .wordmark .wm-svg *,.reduce-motion .scroll-cue i::after{animation:none}