/* Scroll choreography: a pinned stage, a receding typographic wall and a field of images. */
.motion-enabled .hero{height:300svh;max-height:none;min-height:0;display:block;place-items:normal;overflow:visible;margin-bottom:-35svh}
.hero-stage{position:sticky;top:0;width:100%;min-width:0;justify-self:stretch;height:100svh;min-height:540px;overflow:hidden;display:grid;place-items:center;isolation:isolate;background:#000}
.hero-stage .hero-wall{z-index:2;will-change:transform,opacity;transform-origin:50% 50%}
.hero-stage .hero-content{z-index:4;will-change:transform,opacity}
.hero-stage .scroll-cue{z-index:5;display:flex;align-items:center;gap:10px;width:auto;left:50%;transform:translateX(-50%);font-size:17px;padding:8px 15px;height:38px;white-space:nowrap;background:#000b;border:1px solid #ffffff2b}
.hero-stage .scroll-cue span{font-size:10px;letter-spacing:.11em;text-transform:uppercase}
.hero-stage .scroll-cue i{font-style:normal;animation:scroll-nudge 1.8s ease-in-out infinite}
.hero-depth{position:absolute;inset:0;pointer-events:none;z-index:1;perspective:900px}
.depth-card{position:absolute;width:clamp(100px,14vw,200px);height:clamp(126px,17.6vw,252px);border-radius:5px;overflow:hidden;opacity:0;will-change:transform,opacity;box-shadow:0 15px 65px #0004}
.depth-card img{height:100%;object-fit:cover;transform:scale(1.03)}
.hero-stage:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,#0008 0,transparent 44%)}
.hero-content .actions{position:relative}.hero-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;z-index:6;background:#ffffff0a}.hero-progress div{height:100%;background:var(--purple);transform:scaleX(0);transform-origin:left;will-change:transform}

.showcase-frame>img{position:absolute;inset:0;width:100%;height:100%}.showcase-frame .showcase-incoming{z-index:0}.showcase-frame:after{z-index:1}
.motion-enabled .showcase-frame{will-change:transform}.reveal-ready{opacity:0;transform:translate3d(0,45px,0);transition:opacity .9s ease,transform 1.15s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}.reveal-ready.is-visible{opacity:1;transform:translate3d(0,0,0)}
.feature-art,.image-pair{--image-shift:0px}.motion-enabled .feature-art>img{height:115%;margin-top:-7.5%;transform:translateY(var(--image-shift));transition:transform .1s linear;will-change:transform}.motion-enabled .image-pair>img{transform:translateY(var(--image-shift));transition:transform .1s linear;will-change:transform}.motion-enabled .image-pair>img:nth-child(2){transform:translateY(calc(var(--image-shift) * -1))}
.nav-dropdown.open .dropdown{animation:menu-enter .25s cubic-bezier(.16,1,.3,1)}dialog[open]{animation:dialog-enter .35s cubic-bezier(.16,1,.3,1)}.pill{transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s,box-shadow .3s}.pill:hover{transform:translateY(-3px);box-shadow:0 8px 25px #7160e827}.closing h2{transform-origin:center;will-change:transform}.marquee:hover>div{animation-play-state:paused}
@keyframes scroll-nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}@keyframes image-drift{from{transform:scale(1.04) translateY(-1%)}to{transform:scale(1.1) translateY(1%)}}@keyframes menu-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-enter{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:800px){.motion-enabled .hero{height:250svh}.hero-stage{min-height:500px}.depth-card{width:27vw;height:38vw}.hero-stage .hero-content{padding:12px}.hero-stage .hero-content h1{font-size:clamp(23px,4.4vw,32px)}.hero-stage:after{background:radial-gradient(ellipse at center,#000b 0,transparent 60%)}}
@media(prefers-reduced-motion:reduce){.motion-enabled .hero{height:100svh;margin-bottom:0}.hero-stage .hero-wall{transform:none!important;opacity:1!important}.hero-depth,.hero-progress{display:none}.reveal-ready{opacity:1;transform:none}.hero-stage .hero-content{opacity:1!important;transform:none!important}.motion-enabled .feature-art>img,.motion-enabled .image-pair>img{transform:none}.showcase-frame,.closing h2{transform:none!important}}
@media(max-width:420px){.gallery-heading h2{font-size:clamp(35px,12vw,50px)}}

/* Set the hero headline scale and keep its controls stable during the camera move. */
@media(min-width:801px){.hero h1{font-size:clamp(28px,2.3vw,36px)}}