/* Astra Nord: cinematic layer on top of the site styles */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
@view-transition{navigation:auto}
:root{--silver-hi:#C9D2E0}

/* header follows the visitor, hides on the way down */
.cine .site-header:not(.solid){position:fixed;transition:transform .6s cubic-bezier(.2,.7,.1,1),background .4s,padding .4s}
.cine .site-header.hide{transform:translateY(-110%)}
.cine .site-header.scrolled{background:linear-gradient(180deg,rgba(9,26,54,.88),rgba(9,26,54,0));padding-top:20px;padding-bottom:20px}

/* page curtain and first-visit star */
.curtain{position:fixed;inset:0;z-index:90;background:var(--navy-deep);pointer-events:none;display:grid;place-items:center;transform-origin:top}
.curtain svg{width:46px;height:46px;opacity:.85}
.curtain svg path{fill:var(--silver-hi)}
.loader{position:fixed;inset:0;z-index:95;background:var(--navy-ink);display:grid;place-items:center}
.loader .mark{display:grid;justify-items:center;gap:34px}
.loader .l-star{width:84px;height:auto;overflow:visible}
.loader .l-word{width:min(300px,62vw);height:auto;opacity:0}
.loader .star{fill:#C9D2E0;stroke:#C9D2E0;stroke-width:3}
.loader .word{fill:#F0EBE0}

/* hero: the mask is driven by --m (0 = clear image, 1 = full mask) */
.cine .hero .media::after{opacity:var(--m,1)}
.cine-ready .hero.cine-pin .lead > *,.cine-ready .hero.cine-pin .cols{opacity:0}
.hero .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.hero .w>span{display:inline-block;will-change:transform}
.cine-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;text-shadow:0 1px 12px rgba(9,26,54,.5)}
.cine-cue span{font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--stone)}
.cine-cue i{display:block;width:1px;height:48px;background:linear-gradient(var(--stone),transparent);animation:cinecue 2.4s ease-in-out infinite;transform-origin:top}
@keyframes cinecue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* statement: words light up while scrolling */
.cine .statement .sw{opacity:.16}

/* images get room to drift */
.cine .card .frame img,.cine .step .frame img,.cine .project .frame img,.cine .gallery.gallery-flow figure img,.cine .split .media img{will-change:transform}
.cine .cta .bg video,.cine .cta .bg img{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .cine-ready .hero.cine-pin .lead > *,.cine-ready .hero.cine-pin .cols{opacity:1}
  .cine-cue i{animation:none}
}
/* scroll-driven images: let the motion lead, not the old hover transitions */
.cine .card .frame img,.cine .step .frame img,.cine .project .frame img,.cine .gallery.gallery-flow figure img,.cine .delivered .frame img{transition:opacity .6s!important}