/* Native scroll timelines drive compositor-friendly transforms and opacity.
   Unsupported browsers use studio.js with geometry cached on layout changes.
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-range */
.js .opening { height:170svh; min-height:0; }
.js .opening-stage { height:100svh; min-height:0; contain:paint; }
.studio-scene { --drift-x:-2%; }
.document-heading { font:12px var(--studio-font); letter-spacing:0; }
.document-heading img { display:block; border-radius:7px; }
.lesson-document h3 { margin-top:26px!important; }
.growth-principles h3 { margin-top:0!important; }
.service-rows a { grid-template-columns:1.1fr 1.2fr 30px; }
.product-more { display:flex; justify-content:flex-end; margin-top:25px; }
.growth-principles>div { display:block; }
.growth-principles p { margin-top:10px!important; }

@media(prefers-reduced-motion:no-preference) {
  .native-scroll .opening { view-timeline:--opening block; view-timeline-inset:0; }
  .native-scroll .studio-scene,
  .native-scroll .hero-copy,
  .native-scroll .arrival-copy,
  .native-scroll .scene-label-one,
  .native-scroll .scene-label-two {
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:--opening;
    animation-range:contain 0% contain 100%;
  }
  .native-scroll .studio-scene { animation-name:scene-drift; }
  .native-scroll .hero-copy { animation-name:hero-scroll-out; }
  .native-scroll .arrival-copy { animation-name:arrival-scroll-in; will-change:transform,opacity; }
  .native-scroll .scene-label-one { animation-name:label-scroll-out; }
  .native-scroll .scene-label-two { animation-name:label-scroll-in; }
  .native-scroll .growth-exhibit { view-timeline:--growth block; view-timeline-inset:0; }
  .native-scroll .experience-sheet {
    animation:sheet-open 1s linear both;
    animation-timeline:--growth;
    animation-range:entry 0% entry 100%;
  }
  .sheet-3 { --x:145px; --y:-37px; --angle:18deg; }
  .sheet-2 { --x:82px; --y:-24px; --angle:9deg; }
  .sheet-1 { --x:24px; --y:-10px; --angle:1deg; }
  .sheet-front { --x:-54px; --y:27px; --angle:-8deg; }
}
@keyframes scene-drift {
  from { transform:translate3d(0,0,0) scale(1); }
  to { transform:translate3d(var(--drift-x),1.5%,0) scale(1.09); }
}
@keyframes hero-scroll-out {
  0%,6% { opacity:1; transform:translate3d(0,0,0); }
  44%,100% { opacity:0; transform:translate3d(0,-45px,0); }
}
@keyframes arrival-scroll-in {
  0%,35% { opacity:0; transform:translate3d(0,24px,0); }
  68%,100% { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes label-scroll-out { from { opacity:1; } to { opacity:.6; } }
@keyframes label-scroll-in { 0%,35% { opacity:0; } 68%,100% { opacity:1; } }
@keyframes sheet-open {
  from { transform:translate3d(calc(var(--x) * .15),calc(var(--y) * .15),0) rotate(calc(var(--angle) * .15)); }
  to { transform:translate3d(calc(var(--x) * var(--spread)),calc(var(--y) * var(--spread)),0) rotate(calc(var(--angle) * var(--spread))); }
}
@media(max-width:850px) {
  .service-rows a { grid-template-columns:1fr 25px; }
  .service-rows p { grid-column:1; }
  .service-arrow { grid-column:2; }
}
@media(max-width:700px) {
  .js .opening { height:155svh; }
  .studio-scene { --drift-x:-1%; }
  .service-rows a { grid-template-columns:1fr 20px; }
  .document-heading { font-size:10px; }
  .arrival-copy { top:19%; }
  .crew-intro h2 { margin-top:0!important; }
}
/* Short desktop panels and landscape phones must not pin a stage taller than
   the viewport. Keep the complete headline and CTA visible at 740 x 416. */
@media(max-height:600px) {
  .studio-header,.studio-header.is-scrolled { height:64px; }
  .hero-copy,.arrival-copy { top:88px; }
  .hero-copy h1 { font-size:clamp(32px,5vw,56px); margin:10px 0 13px!important; }
  .hero-copy .eyeline { font-size:9px; }
  .hero-description { font-size:11px; line-height:1.6; }
  .hero-actions { margin-top:16px; gap:14px; }
  .hero-actions .studio-button { min-height:36px; font-size:10px; padding:0 15px; }
  .hero-actions .text-link { font-size:10px; }
  .platform-note { font-size:8px; margin-top:8px; }
  .hero-bottom { bottom:17px; font-size:8px; }
  .scene-label { display:none; }
  .arrival-copy h2 { font-size:35px; margin:0 0 16px!important; }
  .arrival-copy>p { font-size:11px; line-height:1.8; }
  .arrival-copy .text-link { margin-top:16px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .js .opening { height:auto; min-height:0; }
  .js .opening-stage { position:relative; height:100svh; min-height:620px; }
}