/*
  Homepage "Sunrise over AARK" hero + handoff to the real assembly photo.
  Three modes:
  - static (no JS, or reduced motion): one composed screen over the sunrise
    end frame. No video is ever requested.
  - .is-play (phones and tablets): the same one-screen layout; a small portrait
    video plays once, then .is-settled fades the closing lines in.
  - .is-scrub (computers): a pinned stage; scroll scrubs the video and drives
    the caption bands.
  The queries must match STATIC_QUERY / TOUCH_QUERY in sunrise-hero.js exactly.
*/
:root{
  --sr-dusk:#2a2140;
  --sr-dusk-deep:#1b1630;
  --sr-honey:#f3b65c;
  --sr-peach:#f7d2ad;
  --sr-cream:#fff6e6;
  --sr-tshadow:0 1px 2px rgba(20,12,30,.9),0 3px 12px rgba(20,12,30,.6),0 10px 44px rgba(20,12,30,.55);
}

.sr-hero{position:relative;color:#fff;background:linear-gradient(180deg,var(--sr-dusk) 0%,#6b5576 46%,#d79a6a 74%,var(--sr-peach) 100%)}
.sr-stage{position:relative;min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(140px,26vh,260px);padding:clamp(56px,10vh,110px) var(--v2-gutter-mobile) clamp(48px,8vh,88px);overflow:hidden;isolation:isolate}
@media(min-width:701px){.sr-stage{padding-inline:var(--v2-gutter-tablet)}}

.sr-poster,.sr-video,.sr-scrim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sr-poster{z-index:-3;background-size:cover;background-position:center 30%}
.sr-video{z-index:-2;object-fit:cover;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity .9s var(--v2-ease-standard)}
.sr-scrim{z-index:-1;background:
  radial-gradient(ellipse 90% 70% at 50% 42%,rgba(27,22,48,0) 0%,rgba(27,22,48,.3) 100%),
  linear-gradient(180deg,rgba(27,22,48,.5) 0%,rgba(27,22,48,0) 34%,rgba(27,22,48,0) 70%,rgba(27,22,48,.22) 100%)}

/* static hero: composed over the final sunrise frame */
@media (prefers-reduced-motion: reduce){
  .sr-poster{background-image:url('../hero/sunrise-end.jpg')}
  .sr-hero .sr-video{display:none}
}

/* ---- text ---- */
.sr-band{position:relative;max-width:1100px;margin-inline:auto;text-align:center;text-shadow:var(--sr-tshadow)}
.sr-band .v2-btn{text-shadow:none}
.v2 .sr-kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sr-peach);margin-bottom:18px}
.v2 h1.sr-title,.v2 h2.sr-settle-title{color:#fff;font-weight:400;letter-spacing:-.02em;line-height:1.04}
.v2 h1.sr-title{font-size:clamp(40px,6.6vw,96px)}
.v2 h2.sr-settle-title{font-size:clamp(34px,5vw,72px)}
.sr-title .w,.sr-settle-title .w{display:inline-block}
.sr-band-mid{display:none}
.sr-line{font-family:var(--v2-font-display);font-style:italic;font-size:clamp(30px,4.2vw,60px);line-height:1.1;color:var(--sr-cream)}
.v2 .sr-lead{max-width:44ch;margin:20px auto 0;font-size:var(--v2-text-body-l);line-height:var(--v2-lh-relaxed);color:rgba(255,255,255,.92)}
.sr-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.sr-btn-ghost{background:rgba(27,22,48,.32);border-color:rgba(255,255,255,.7);color:#fff;backdrop-filter:blur(6px)}
.sr-btn-ghost:hover{background:rgba(27,22,48,.5)}
.sr-hero .v2-btn:focus-visible{outline:3px solid var(--v2-gold-500);outline-offset:3px}
.sr-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:30px 0 0;padding:0}
.sr-facts div{display:flex;align-items:baseline;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(27,22,48,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);text-shadow:0 1px 3px rgba(20,12,30,.8)}
.sr-facts dt{font-family:var(--v2-font-display);font-size:18px;color:var(--v2-gold-500)}
.sr-facts dd{margin:0;font-size:13px;color:rgba(255,255,255,.88)}
.sr-cue{display:none}

/* ---- scrub mode ---- */
.sr-hero.is-scrub{height:700vh;background:var(--sr-dusk)}
.is-scrub .sr-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding:0;display:block}
.is-scrub .sr-stage.video-ready .sr-video{opacity:1}
.is-scrub .sr-stage.video-failed .sr-video{display:none}
.is-scrub .sr-band{position:absolute;left:50%;width:min(1100px,calc(100% - 96px));transform:translateX(-50%);opacity:0;visibility:hidden;will-change:opacity}
.is-scrub .sr-band-open{top:38%;transform:translate(-50%,-50%)}
.is-scrub .sr-band-mid{display:block;top:30%;transform:translate(-50%,-50%)}
.is-scrub .sr-band-settle{top:var(--below,70%);transform:translateX(-50%)}
.sr-band-settle{text-shadow:0 1px 18px rgba(255,246,230,.9)}
/* the closing lines sit in the bright sky under the cloud ceiling, so they turn dark */
.v2 .sr-hero h2.sr-settle-title{color:var(--sr-dusk-deep)}
.v2 .sr-hero .sr-lead{color:#3b3150}
.sr-band-settle .sr-btn-ghost{background:rgba(255,246,230,.55);border-color:rgba(27,22,48,.55);color:var(--sr-dusk-deep)}
.sr-band-settle .sr-btn-ghost:hover{background:rgba(255,246,230,.85)}
.is-scrub .sr-band-settle .sr-facts{display:none}
/* a soft scrim that rides each band's own opacity, so footage dims only while words are on */
.is-scrub .sr-band::before{content:"";position:absolute;inset:-28% -12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 58% at 50% 50%,rgba(27,22,48,.5) 0%,rgba(27,22,48,.3) 50%,rgba(27,22,48,0) 76%)}
.is-scrub .sr-band-mid::before{background:radial-gradient(ellipse 62% 70% at 50% 50%,rgba(27,22,48,.68) 0%,rgba(27,22,48,.42) 50%,rgba(27,22,48,0) 78%)}
.is-scrub .sr-band-settle::before{background:radial-gradient(ellipse 62% 60% at 50% 50%,rgba(255,246,230,.55) 0%,rgba(255,246,230,.28) 50%,rgba(255,246,230,0) 78%)}

/* opening: words drift down with the descent */
.is-scrub .sr-title .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-28px))}
.is-scrub .sr-cue{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:34px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8);opacity:var(--k,0)}
.sr-cue i{display:block;width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));transform-origin:top;animation:sr-cue 2.6s var(--v2-ease-standard) -1.2s infinite}
@keyframes sr-cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* middle: the line sharpens as the mist clears (two copies crossfaded; blur is static) */
.sr-band-mid .sr-line-sharp{position:absolute;inset:0;opacity:var(--k,0)}
.sr-band-mid .sr-line-soft{filter:blur(10px);opacity:calc(1 - var(--k,0))}

/* settle: headline words rise, then the lead, then the buttons and facts */
.is-scrub .sr-settle-title .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.2,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*26px))}
.is-scrub .sr-lead{--ks:clamp(0,(var(--k,0) - .5)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.is-scrub .sr-actions,.is-scrub .sr-facts{--kb:clamp(0,(var(--k,0) - .7)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
@media(max-height:640px){.is-scrub .sr-facts,.is-scrub .sr-cue{display:none}}


/* ---- the sun becomes the AARK sun, then the full AARK logo ----
   sunrise-hero.js sets, on the stage: --sx/--sy (the real sun's centre in the
   shot's last frame, through the cover crop), --mk (sun-mark size), --fx/--fy
   and --kf (where the full logo settles, and its scale against --mk) and --below
   (where the closing lines go). .sr-sunless is the last frame with the sun
   painted out; it fades in as the mark carries the sun away.
   The wordmark sits beside the sun mark exactly as in the official lockup. */
.sr-sunless{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0;background:center/cover no-repeat}
.sr-mark{display:none;position:absolute;left:var(--sx,50%);top:var(--sy,52%);width:var(--mk,300px);height:var(--mk,300px);margin:calc(var(--mk,300px) / -2) 0 0 calc(var(--mk,300px) / -2);pointer-events:none;transform-origin:50% 50%}
.is-scrub .sr-mark,.is-play .sr-mark{display:block}
.sr-mark-rays,.sr-mark-core,.sr-mark-glow{position:absolute;inset:0;width:100%;height:100%}
.sr-mark-glow{inset:-25%;width:auto;height:auto;border-radius:50%;background:radial-gradient(circle,rgba(255,250,232,.95) 0%,rgba(255,232,170,.55) 26%,rgba(255,214,140,.2) 46%,rgba(255,210,140,0) 66%)}
.sr-mark-word{position:absolute;left:85.2%;top:46.09%;width:156.68%;height:auto;max-width:none}

/* computers: scroll drives --f (form), --g (glide) and --wd (wordmark) */
.is-scrub .sr-mark{opacity:clamp(0,var(--f,0) * 8,1);transform:translate(calc((var(--fx,0px) - var(--sx,0px)) * var(--g,0)),calc((var(--fy,0px) - var(--sy,0px)) * var(--g,0))) scale(calc(1 + (var(--kf,1) - 1) * var(--g,0)))}
.is-scrub .sr-mark-glow{opacity:calc(var(--f,0) * (1 - var(--g,0)));transform:scale(calc(.6 + .4 * var(--f,0)))}
.is-scrub .sr-mark-rays{--r:clamp(0,var(--f,0) * 1.6,1);opacity:var(--r);transform:rotate(calc((1 - var(--r)) * -70deg)) scale(calc(.5 + .5 * var(--r)))}
.is-scrub .sr-mark-core{--c:clamp(0,(var(--f,0) - .4) * 2,1);opacity:var(--c);transform:scale(calc(.6 + .4 * var(--c)))}
.is-scrub .sr-sunless{opacity:clamp(0,var(--g,0) * 2.2,1)}
.is-scrub .sr-mark-word{opacity:clamp(0,var(--wd,0) * 3,1);clip-path:inset(-10% calc((1 - var(--wd,0)) * 100%) -10% 0)}

/* touch screens: the same steps as timed animations */
.is-play .sr-mark-glow,.is-play .sr-mark-rays,.is-play .sr-mark-core,.is-play .sr-mark-word{opacity:0}
.is-play .sr-mark{transition:transform 1.3s cubic-bezier(.45,0,.2,1)}
.is-play.is-marked .sr-mark-glow{animation:sr-glow 1.2s ease-out forwards}
.is-play.is-marked .sr-mark-rays{animation:sr-rays 1.3s var(--v2-ease-out) .1s forwards}
.is-play.is-marked .sr-mark-core{animation:sr-core .9s var(--v2-ease-out) .7s forwards}
.is-play.is-locked .sr-mark{transform:translate(calc(var(--fx,0px) - var(--sx,0px)),calc(var(--fy,0px) - var(--sy,0px))) scale(var(--kf,1))}
.is-play.is-locked .sr-mark-glow{opacity:0;animation:none;transition:opacity .8s}
.is-play.is-locked .sr-sunless{opacity:1;transition:opacity .9s ease-out}
.is-play.is-locked .sr-mark-word{animation:sr-word 1.1s var(--v2-ease-out) .9s forwards}
@keyframes sr-glow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sr-rays{from{opacity:0;transform:rotate(-70deg) scale(.5)}to{opacity:1;transform:none}}
@keyframes sr-core{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sr-word{from{opacity:0;clip-path:inset(-10% 100% -10% 0)}to{opacity:1;clip-path:inset(-10% 0 -10% 0)}}

/* the closing lines sit under the logo */
.is-scrub .sr-band-settle .sr-lead,.is-play .sr-band-settle .sr-lead{display:none}
.v2 .is-scrub h2.sr-settle-title,.v2 .is-play h2.sr-settle-title{font-size:clamp(26px,3.4vw,46px)}

/* ---- play mode (phones and tablets) ----
   Only opacity and transform animate, so it all runs on the compositor. */
.is-play .sr-stage.video-ready .sr-video{opacity:1}
.is-play .sr-stage.video-failed .sr-video{display:none}
.is-play .sr-title .w{opacity:0;transform:translateY(-22px);animation:sr-word-in .9s var(--v2-ease-out) forwards;animation-delay:calc(.25s + var(--i,0) * .09s)}
.is-play .sr-kicker{opacity:0;animation:sr-fade-in .8s var(--v2-ease-out) .1s forwards}
@keyframes sr-word-in{to{opacity:1;transform:none}}
@keyframes sr-fade-in{to{opacity:1}}
/* one screen: the opening line leaves as the clouds clear; the closing lines
   arrive under the logo once it has formed */
.is-play .sr-stage{display:block;height:calc(100svh - var(--hdr,96px));min-height:480px;padding:0}
.is-play .sr-facts{display:none}
.is-play .sr-poster{background-position:center}
.is-play .sr-band{position:absolute;left:50%;width:min(1100px,calc(100% - 40px));transform:translateX(-50%)}
.is-play .sr-band-open{top:13%;transition:opacity .8s var(--v2-ease-out),transform .8s var(--v2-ease-out)}
.is-play.is-settled .sr-band-open{opacity:0;transform:translate(-50%,-14px)}
.is-play .sr-band-settle{top:var(--below,70%);opacity:0;transform:translate(-50%,18px);transition:opacity 1s var(--v2-ease-out),transform 1s var(--v2-ease-out);pointer-events:none}
.is-play.is-locked .sr-band-settle{opacity:1;transform:translateX(-50%);pointer-events:auto;transition-delay:1.7s}
@media(max-width:720px){.is-play .sr-band-settle .sr-lead,.is-play .sr-facts,.is-play .sr-band-settle .sr-btn-ghost{display:none}.is-play .sr-actions{margin-top:14px}}
/* phones held sideways: a short screen, so keep one line and one button */
@media(orientation:landscape) and (max-height:560px){
  .is-play .sr-stage{min-height:280px}
  .is-play .sr-band-settle .sr-lead,.is-play .sr-facts,.is-play .sr-band-settle .sr-btn-ghost{display:none}
  .is-play .sr-actions{margin-top:8px}
  .v2 .is-play h2.sr-settle-title{font-size:clamp(22px,3.2vw,32px)}
}
}

/* ---- handoff: the real assembly photo takes over from the sunrise ---- */
.sr-handoff{position:relative;background:linear-gradient(180deg,var(--sr-peach) 0%,var(--v2-color-ground) 46%);padding:0 var(--v2-gutter-mobile) var(--v2-space-2xl)}
.sr-hero:not(.is-scrub) + .sr-handoff{padding-top:var(--v2-space-xl)}
@media(min-width:701px){.sr-handoff{padding-inline:var(--v2-gutter-tablet)}}
@media(min-width:1160px){.sr-handoff{padding-inline:max(var(--v2-gutter-desktop),calc((100% - var(--v2-container))/2))}}
.sr-handoff-figure{margin:0;position:relative;border-radius:var(--v2-radius-lg);overflow:hidden;box-shadow:0 30px 80px rgba(42,33,64,.28)}
.sr-handoff-figure img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;object-position:center 100%}
@media(max-width:700px){.sr-handoff-figure img{aspect-ratio:4/3}}
.sr-handoff-figure figcaption{position:absolute;left:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);display:flex;align-items:center;gap:12px;width:fit-content;max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:rgba(27,22,48,.66);backdrop-filter:blur(10px);color:#fff;font-family:var(--v2-font-display);font-size:clamp(16px,1.8vw,22px);line-height:1.25}
.sr-sun{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#ffe39a 0%,var(--sr-honey) 60%,rgba(243,182,92,0) 100%);box-shadow:0 0 18px 4px rgba(243,182,92,.65)}

@media(prefers-reduced-motion:reduce){
  .sr-cue i{animation:none}
}

/* touch screens: no live blur behind small labels (expensive while scrolling) */
@media(pointer:coarse){
  .sr-btn-ghost,.sr-facts div,.sr-handoff-figure figcaption,.v2-life-mosaic figcaption{backdrop-filter:none;-webkit-backdrop-filter:none}
  .sr-handoff-figure figcaption{background:rgba(27,22,48,.82)}
  .sr-band-settle .sr-btn-ghost{background:rgba(255,246,230,.85)}
}