/* Both engines use the same normalized chapter progress and keyframe stops. */
.motion-native [data-motion] {
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --chapter;
  animation-range: contain 0% contain 100%;
}

.motion-native [data-motion="hero-copy"] { animation-name: hero-copy; }
.motion-native [data-motion="hero-insight"] { animation-name: hero-insight; }
.motion-native [data-motion="landscape"] { animation-name: landscape; }
.motion-native [data-motion="hero-object"] { animation-name: hero-object; }
.motion-native [data-motion="floor"] { animation-name: floor; }
.motion-native [data-motion="first-beat"] { animation-name: first-beat; }
.motion-native [data-motion="second-beat"] { animation-name: second-beat; }
.motion-native [data-motion="probe"] { animation-name: probe; }
.motion-native [data-motion="orbital-planet"] { animation-name: orbital-planet; }
.motion-native [data-motion="read-word"] {
  animation-name: read-word;
  animation-range: contain var(--word-start) contain var(--word-end);
}
.motion-native .emphasized[data-motion="read-word"] { animation-name: read-emphasis; }
.motion-native [data-motion="read-sparks"] {
  animation-name: read-sparks;
  animation-range: contain var(--spark-start) contain var(--word-end);
}
.motion-native [data-motion="phase"] {
  visibility: hidden;
  opacity: 0;
  animation-name: phase-visible;
  animation-range: contain var(--phase-start) contain var(--phase-end);
  animation-fill-mode: none;
}
.motion-native [data-motion="phase"]:first-child { animation-fill-mode: backwards; }
.motion-native [data-last-phase] { animation-fill-mode: forwards; }
.motion-native [data-motion="signal"],
.motion-native [data-motion="connect-signal"],
.motion-native [data-motion="power-trace"],
.motion-native [data-motion="feedback"],
.motion-native [data-motion="tower-grow"],
.motion-native [data-motion="tower-fall"] {
  animation-range: contain var(--pulse-start) contain var(--pulse-end);
}
.motion-native [data-motion="signal"] { animation-name: signal; }
.motion-native [data-motion="connect-signal"] { animation-name: connect-signal; }
.motion-native [data-motion="power-trace"] { animation-name: power-trace; }
.motion-native [data-motion="feedback"] { animation-name: feedback; }
.motion-native .failure [data-motion="feedback"] { animation-name: feedback-error; }
.motion-native [data-motion="tower-grow"] { animation-name: tower-grow; }
.motion-native [data-motion="tower-fall"] { animation-name: tower-fall; }
.motion-native .reading-progress {
  animation: reading-progress linear both;
  animation-timeline: scroll(root);
}
.motion-native.story-locked .hero [data-motion] { animation-name: none; }

@keyframes hero-copy {
  0%, 20% { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
  65%, 100% { opacity: 0; transform: translateY(-80px) scale(.92); visibility: hidden; }
}
@keyframes hero-insight {
  0%, 65% { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); }
  70% { opacity: 1; visibility: visible; transform: translateY(0) scale(1.04); }
  73% { opacity: .48; transform: translateY(0) scale(1); }
  77% { opacity: 1; }
  80% { opacity: .64; }
  84%, 100% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
}
@keyframes landscape {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-65px) scale(1.22); }
}
@keyframes hero-object {
  0%, 10% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-25svh) scale(2.6); }
}
@keyframes floor {
  from { transform: perspective(450px) rotateX(52deg) translateY(0); }
  to { transform: perspective(450px) rotateX(52deg) translateY(100px); }
}
@keyframes first-beat {
  0%, 34% { opacity: 1; transform: translateY(0); visibility: visible; }
  47%, 100% { opacity: 0; transform: translateY(-30px); visibility: hidden; }
}
@keyframes second-beat {
  0%, 48% { opacity: 0; transform: translateY(30px); visibility: hidden; }
  61%, 100% { opacity: 1; transform: translateY(0); visibility: visible; }
}
@keyframes probe {
  from { transform: rotate(-60deg); }
  to { transform: rotate(-390deg); }
}
@keyframes orbital-planet {
  from { transform: scale(.9); }
  to { transform: scale(1.18); }
}
@keyframes read-word {
  0% { opacity: 0; }
  60% { opacity: .87; }
  100% { opacity: 1; }
}
@keyframes read-emphasis {
  0% { opacity: 0; transform: translate(-.24em, -.32em) rotate(-9deg); text-shadow: 0 0 0 transparent; }
  58% { opacity: 1; transform: translate(.03em, .05em) rotate(3deg); text-shadow: 2px 2px #459cff, -2px -1px #baff35, 0 0 14px #baff3580; }
  78% { opacity: 1; transform: translate(0, -.02em) rotate(-1deg); }
  100% { opacity: 1; transform: none; text-shadow: 0 0 0 transparent; }
}
@keyframes power-trace {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes connect-signal {
  0% { opacity: .32; transform: scale(.9); }
  45% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes read-sparks {
  0% { opacity: 0; transform: translateY(4px) scale(.25); }
  22% { opacity: 1; transform: translateY(0) scale(.85); }
  64% { opacity: .7; transform: translateY(8px) scale(1.32); }
  100% { opacity: 0; transform: translateY(14px) scale(1.6); }
}
@keyframes phase-visible {
  0% { opacity: .78; visibility: visible; }
  18%, 100% { opacity: 1; visibility: visible; }
}
@keyframes signal {
  0% { transform: scale(.86); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes feedback {
  from { transform: translateY(7px) scale(.85); opacity: .3; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes feedback-error {
  0% { transform: scale(1.2); opacity: 1; }
  45% { transform: scale(1); opacity: .3; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tower-grow {
  from { transform: scaleY(.72); }
  to { transform: scaleY(1); }
}
@keyframes tower-fall {
  from { transform: scaleY(1); opacity: .85; }
  to { transform: scaleY(.35); opacity: 0; }
}
@keyframes reading-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* A readable, non-sticky document is also the no-JavaScript baseline. */
html:not(.motion-native):not(.motion-fallback) .scroll-section,
.motion-reduced .scroll-section {
  height: auto;
}
html:not(.motion-native):not(.motion-fallback) .sticky-stage,
.motion-reduced .sticky-stage {
  position: relative;
  top: auto;
}
html:not(.motion-native):not(.motion-fallback) .hero .sticky-stage,
.motion-reduced .hero .sticky-stage {
  min-height: max(650px, calc(100vh - var(--header-height)));
  min-height: max(650px, calc(100svh - var(--header-height)));
  height: auto;
}
html:not(.motion-native):not(.motion-fallback) .hero-content {
  position: relative;
  padding-bottom: 24px;
}
html:not(.motion-native):not(.motion-fallback) .hero-insight {
  position: relative;
  top: auto;
  display: block;
  margin-bottom: 84px;
}
html:not(.motion-native):not(.motion-fallback) .chapter .sticky-stage,
.motion-reduced .chapter .sticky-stage {
  min-height: 650px;
  height: auto;
  padding-block: 65px;
}
html:not(.motion-native):not(.motion-fallback) .chapter-copy,
.motion-reduced .chapter-copy {
  height: auto;
}
html:not(.motion-native):not(.motion-fallback) .story-beat,
.motion-reduced .story-beat {
  position: static;
  opacity: 1;
  visibility: visible;
}
html:not(.motion-native):not(.motion-fallback) .story-beat.second,
.motion-reduced .story-beat.second {
  margin-top: 40px;
}
html:not(.motion-native):not(.motion-fallback) .reading-progress,
.motion-reduced .reading-progress {
  display: none;
}
html:not(.motion-native):not(.motion-fallback) .reading-section .sticky-stage,
.motion-reduced .reading-section .sticky-stage {
  height: auto;
  padding-block: 65px;
}
html:not(.motion-native):not(.motion-fallback) .falling-fill,
.motion-reduced .falling-fill {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}