/* Visible motion built on the existing native-scroll/RAF and Web Animations paths. */
.hero-stage{position:relative;height:100%;min-height:inherit;isolation:isolate;overflow:hidden;background:var(--green)}
.headline-line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.headline-line>span{display:block;transform-origin:0 100%}

/* Apply the first keyframe before first paint, rather than hiding painted text in JS. */
@keyframes heroTextIn{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes heroFadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .header{animation:heroFadeIn .7s ease-out both}
  .proposal-label{animation:heroFadeIn .8s .1s ease-out both}
  .hero-title-group>.eyebrow{animation:heroTextIn .85s .05s cubic-bezier(.22,1,.36,1) both}
  .headline-line:nth-child(1)>span{animation:heroTextIn 1.05s .12s cubic-bezier(.22,1,.36,1) both}
  .headline-line:nth-child(2)>span{animation:heroTextIn 1.05s .25s cubic-bezier(.22,1,.36,1) both}
  .hero-description{animation:heroTextIn 1s .35s cubic-bezier(.22,1,.36,1) both}
  .hero-caption{animation:heroFadeIn 1s .45s ease-out both}
}

@media(prefers-reduced-motion:no-preference){
  .hero-image{transform:scale(1.045)}
  .scroll-motion .hero-shade{background:linear-gradient(180deg,rgba(3,21,12,.3),rgba(3,21,12,.12) 40%,rgba(3,21,12,.65))}
  .scroll-motion .project-image-wrap>img{transform:translate3d(0,var(--photo-y,0px),0) scale(1.17);transition:scale .45s ease;scale:1}
  .scroll-motion .project-link:hover .project-image-wrap>img{scale:1.06}
  .scroll-motion .studio-photo{overflow:hidden}
  .scroll-motion .studio-photo>img{transform:translate3d(0,var(--photo-y,0px),0) scale(1.12)}
  .scroll-motion .after-hours{overflow:hidden}
  .scroll-motion .after-hours>img{transform:translate3d(0,var(--after-y,0px),0) scale(1.16)}
  .scroll-motion .after-copy{transform:translate3d(0,var(--after-text-y,0px),0)}
  .scroll-motion .section-top{position:relative}
  .scroll-motion .work-heading .display,.scroll-motion .services-intro .display,.scroll-motion .studio-text .display{will-change:transform,opacity}
}

@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .scroll-motion .hero-caption a{font-size:7px;gap:7px}
  .scroll-motion .hero-caption .caption-line{width:12px}
}

/* Keep the animated page; remove only the old full-screen opening reveal. */
.motion-ready .reveal{transform:translateY(45px);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1)}
.motion-ready .reveal.visible{opacity:1;transform:none}
.proposal-label a{backdrop-filter:none;background:#102d237a}
dialog::backdrop{backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1;transform:none;transition:none}.project-image-wrap>img{scale:1!important}}

/* Conventional hero in normal document flow; motion remains in page content. */
.hero-stage{position:relative;height:100%;min-height:inherit}
@media(prefers-reduced-motion:reduce){.hero-stage{height:100%}.hero-image,.hero-content,.hero-caption,.project-image-wrap>img,.studio-photo>img,.after-hours>img,.after-copy{transform:none!important;opacity:1!important;clip-path:none!important}}