/* Each panel has a local camera; a tall section cannot skew its vanishing point. */
:root { --story-perspective: 840px; }
@media (min-width: 801px) and (pointer: fine) { :root { --story-perspective: 1240px; } }
@media (max-width: 360px) { :root { --story-perspective: 760px; } }
[data-story] { transform-origin: 50% 30%; }
/* The story owns transform. Hover uses individual translate, never transform. */
[data-story]:not(.stage-panel):focus-within { opacity: 1 !important; }
/* Clip only lateral travel at the viewport, retaining normal vertical scrolling. */
main { overflow-x: clip; }
html[data-motion-running] [data-story-moving] { will-change: transform, opacity; }
.case-study[data-story] { position: relative; }
.case-study[data-story]::before {
  content: ''; position: absolute; inset: 0 12% auto; height: 1px;
  background: linear-gradient(90deg, transparent, #b1cbe559, transparent);
  pointer-events: none;
}
html[data-reduced-motion] [data-story] { transform: none !important; translate: none !important; scale: none !important; opacity: 1 !important; }
@media(prefers-reduced-motion:no-preference) {
  html:not([data-reduced-motion]) {
    scroll-behavior:smooth
  }
}
html[data-reduced-motion] {
  scroll-behavior:auto
}
html[data-reduced-motion] *,html[data-reduced-motion] *:before,html[data-reduced-motion] *:after {
  animation:none!important;
  transition:none!important
}
@media(prefers-reduced-motion:reduce) {
  [data-story] { transform: none !important; translate: none !important; scale: none !important; opacity: 1 !important; }
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
@media(prefers-reduced-motion:no-preference) {
  html[data-motion-running] .hero[data-motion-active] .orbit-depth,html[data-motion-running] .hero[data-motion-active] .orbit-track {
    will-change:transform
  }
}