.book-hero > .hero-static { z-index: 1; opacity: 1; }
.book-hero > .hero-scene { z-index: 2; overflow: hidden; }
.book-hero.is-motion-ready > .hero-static { opacity: 0; }
.book-hero > .hero-scene.is-motion-preparing { visibility: hidden; }
.hero-original { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-original image { pointer-events: none; }
.hero-original [data-motion-layer] {
  transform-box: view-box;
  transform-origin: var(--motion-origin-x, 442.5px) var(--motion-origin-y, 229.5px);
  pointer-events: none;
}
.hero-original [data-motion-layer^="letter-"] { transition: translate 260ms ease-out, scale 260ms ease-out; }
.hero-letter-texture { opacity: 1; }
.hero-scene:not(.is-intro-complete) [data-motion-center-x] { opacity: 0; }
.hero-scene.is-intro-playing [data-motion-center-x] {
  animation: source-emerge 720ms var(--enter-delay, 0ms) cubic-bezier(0.18, 0.8, 0.32, 1) both;
}
.hero-scene.is-looping [data-motion-layer^="letter-"] { opacity: 1; animation: source-letter-breathe 5.8s var(--float-delay, 0ms) ease-in-out infinite; }
.hero-scene.is-looping .hero-letter-texture { animation: source-letter-texture-flow 11.6s var(--texture-delay, 0ms) ease-in-out infinite; }
.hero-scene.is-looping [data-motion-layer="letter-b"] .hero-letter-texture { animation-duration: 13.2s; }
.hero-scene.is-looping [data-motion-layer="letter-c"] .hero-letter-texture { animation-duration: 12.4s; }
.hero-scene.is-looping [data-motion-layer^="star-"] { animation: source-star-twinkle 49s var(--twinkle-delay, 0s) ease-in-out infinite; }
.hero-scene [data-motion-layer="star-1"] { --twinkle-delay: -3s; }
.hero-scene [data-motion-layer="star-2"] { --twinkle-delay: -11s; }
.hero-scene [data-motion-layer="star-3"] { --twinkle-delay: -18s; }
.hero-scene [data-motion-layer="star-4"] { --twinkle-delay: -26s; }
.hero-scene [data-motion-layer="star-5"] { --twinkle-delay: -32s; }
.hero-scene [data-motion-layer="star-6"] { --twinkle-delay: -39s; }
.hero-scene [data-motion-layer="star-7"] { --twinkle-delay: -45s; }
.hero-scene.is-looping [data-motion-layer^="dot-"] { animation: source-dot-drift 8.7s var(--float-delay, 0ms) ease-in-out infinite; }
.book-hero:not(.is-motion-running) .hero-scene [data-motion-layer] { animation-play-state: paused; }
.book-hero:not(.is-motion-running) .hero-scene .hero-letter-texture { animation-play-state: paused; }
.book-hero[data-motion-mode="gentle"] .hero-scene.is-looping [data-motion-layer^="letter-"] { animation-duration: 7.8s; }
@media (hover: hover) and (pointer: fine) {
  .hero-scene .hero-letter-hit { pointer-events: visiblePainted; }
  .book-hero.is-motion-running .hero-scene.is-looping [data-motion-layer^="letter-"]:hover { animation-play-state: paused; translate: 0 -1px; scale: 1.012; }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .book-hero > .hero-scene { display: none !important; }
  .book-hero > .hero-static { opacity: 1 !important; }
}
@keyframes source-emerge {
  from { opacity: 0; transform: translate(var(--intro-x, 0px), var(--intro-y, 28px)) scale(0.32); }
  76% { opacity: 1; transform: translate(0, -1px) scale(1.005); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes source-letter-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2px); }
}
@keyframes source-letter-texture-flow {
  0%, 100% { transform: translate(-0.9px, 0.55px); }
  50% { transform: translate(0.9px, -0.55px); }
}
@keyframes source-star-twinkle {
  0%, 96%, 100% { opacity: 1; }
  98% { opacity: 0.84; }
}
@keyframes source-dot-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.6px, -1.7px); }
}