/* Story scenes come to life (public/js/art/scene-kit.js draws them).
   Loops only run inside .sceneart (story scenes and reading banners), so cards and lists stay still.
   .scene-in plays the entrance once: the far layer settles, then the middle, then the front.
   Everything animates transform and opacity only, and prefers-reduced-motion shows the finished picture. */

/* Animated elements never carry a transform attribute themselves (the CSS transform would replace it): wrap them. */
.sceneart svg [class*="sa-"] { transform-box: fill-box; }

/* ---------------------------------------------------------------- entrance (parallax layers) */
.scene-in .sa-l1 { animation: sa-in-far 1.1s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 50%; }
.scene-in .sa-l2 { animation: sa-in-mid 1s .18s cubic-bezier(.2, .7, .2, 1) both; }
.scene-in .sa-l3 { animation: sa-in-near .95s .34s cubic-bezier(.2, .7, .2, 1) both; }
.scene-in .sa-l4 { animation: sa-in-light 1.3s .5s ease-out both; transform-origin: 50% 50%; }
@keyframes sa-in-far { from { opacity: 0; transform: scale(1.06); } }
@keyframes sa-in-mid { from { opacity: 0; transform: translateY(10px); } }
@keyframes sa-in-near { from { opacity: 0; transform: translateY(22px); } }
@keyframes sa-in-light { from { opacity: 0; transform: scale(.7); } }

/* ---------------------------------------------------------------- loops */
.sceneart .sa-twinkle { animation: sa-twinkle 2.6s ease-in-out infinite alternate; }
.sceneart .sa-twinkle.b { animation-duration: 3.4s; animation-delay: -1.2s; }
.sceneart .sa-twinkle.c { animation-duration: 2.1s; animation-delay: -.6s; }
@keyframes sa-twinkle { 0%, 30% { opacity: 1; } 100% { opacity: .25; } }

.sceneart .sa-sparkle { transform-origin: 50% 50%; animation: sa-sparkle 2.4s ease-in-out infinite; }
@keyframes sa-sparkle { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

.sceneart .sa-glow { transform-origin: 50% 50%; animation: sa-glow 3.2s ease-in-out infinite alternate; }
@keyframes sa-glow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

.sceneart .sa-rays { transform-origin: 50% 50%; animation: sa-rays 40s linear infinite; }
.sceneart .sa-spin { transform-origin: 50% 50%; animation: sa-rays .6s linear infinite; }
.sceneart .sa-rays.rev { animation-direction: reverse; animation-duration: 55s; }
@keyframes sa-rays { to { transform: rotate(360deg); } }

.sceneart .sa-float { animation: sa-float 3.6s ease-in-out infinite alternate; }
@keyframes sa-float { from { transform: translateY(2px); } to { transform: translateY(-4px); } }

.sceneart .sa-wing-l { transform-origin: 100% 70%; animation: sa-wing-l 2.2s ease-in-out infinite alternate; }
.sceneart .sa-wing-r { transform-origin: 0% 70%; animation: sa-wing-r 2.2s ease-in-out infinite alternate; }
@keyframes sa-wing-l { from { transform: rotate(4deg); } to { transform: rotate(-7deg); } }
@keyframes sa-wing-r { from { transform: rotate(-4deg); } to { transform: rotate(7deg); } }

.sceneart .sa-bob { animation: sa-bob 2.8s ease-in-out infinite alternate; }
.sceneart .sa-bob.b { animation-duration: 3.3s; animation-delay: -1.4s; }
.sceneart .sa-bob.c { animation-duration: 2.4s; animation-delay: -.7s; }
@keyframes sa-bob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

.sceneart .sa-graze { transform-origin: 80% 20%; animation: sa-graze 4s ease-in-out infinite; }
@keyframes sa-graze { 0%, 55%, 100% { transform: rotate(0deg); } 70%, 85% { transform: rotate(14deg); } }

.sceneart .sa-sway { transform-origin: 50% 100%; animation: sa-sway 4.5s ease-in-out infinite alternate; }
.sceneart .sa-sway.b { animation-duration: 5.4s; animation-delay: -2s; }
@keyframes sa-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

.sceneart .sa-drift { animation: sa-drift 14s ease-in-out infinite alternate; }
.sceneart .sa-drift.b { animation-duration: 19s; animation-delay: -7s; }
@keyframes sa-drift { from { transform: translateX(-10px); } to { transform: translateX(12px); } }

.sceneart .sa-ripple { animation: sa-ripple 3s ease-in-out infinite alternate; }
.sceneart .sa-ripple.b { animation-duration: 3.8s; animation-delay: -1.5s; }
@keyframes sa-ripple { from { transform: translateX(-5px); opacity: .55; } to { transform: translateX(5px); opacity: 1; } }

.sceneart .sa-rock { transform-origin: 50% 90%; animation: sa-rock 3.2s ease-in-out infinite alternate; }
@keyframes sa-rock { from { transform: rotate(-2.5deg) translateY(0); } to { transform: rotate(2.5deg) translateY(-2px); } }

.sceneart .sa-toss { transform-origin: 50% 85%; animation: sa-toss 1.9s ease-in-out infinite alternate; }
@keyframes sa-toss { 0% { transform: rotate(-8deg) translateY(2px); } 100% { transform: rotate(7deg) translateY(-5px); } }

.sceneart .sa-swell { animation: sa-swell 1.9s ease-in-out infinite alternate; }
.sceneart .sa-swell.b { animation-delay: -.95s; }
@keyframes sa-swell { from { transform: translate(-6px, 3px); } to { transform: translate(6px, -3px); } }

.sceneart .sa-rain { animation: sa-rain .55s linear infinite; }
.sceneart .sa-rain.b { animation-duration: .7s; }
@keyframes sa-rain { from { transform: translate(8px, -40px); } to { transform: translate(0, 0); } }

.sceneart .sa-flash { opacity: 0; animation: sa-flash 5.5s linear infinite; }
@keyframes sa-flash { 0%, 61%, 66%, 69%, 100% { opacity: 0; } 62%, 64%, 67.5% { opacity: 1; } }

.sceneart .sa-flicker { transform-origin: 50% 100%; animation: sa-flicker .9s ease-in-out infinite alternate; }
.sceneart .sa-flicker.b { animation-duration: .7s; animation-delay: -.3s; }
@keyframes sa-flicker { 0% { transform: scale(1, 1) skewX(0deg); } 40% { transform: scale(.92, 1.08) skewX(-4deg); } 100% { transform: scale(1.05, .9) skewX(3deg); } }

.sceneart .sa-halo { transform-origin: 50% 50%; animation: sa-halo 1.2s ease-in-out infinite alternate; }
@keyframes sa-halo { from { opacity: .55; transform: scale(.9); } to { opacity: .9; transform: scale(1.08); } }

.sceneart .sa-breathe { transform-origin: 50% 100%; animation: sa-breathe 3.6s ease-in-out infinite; }
@keyframes sa-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.035); } }

.sceneart .sa-zz { animation: sa-zz 3.6s ease-out infinite; }
@keyframes sa-zz { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -12px); opacity: 0; } }

.sceneart .sa-smoke { animation: sa-smoke 4s ease-out infinite; }
.sceneart .sa-smoke.b { animation-delay: -2s; }
@keyframes sa-smoke { 0% { transform: translateY(6px) scale(.7); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-22px) scale(1.2); opacity: 0; } }

.sceneart .sa-fall { animation: sa-fall 4.5s linear infinite; }
.sceneart .sa-fall.b { animation-duration: 5.5s; animation-delay: -2.5s; }
@keyframes sa-fall { 0% { transform: translateY(-30px); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }

.sceneart .sa-hover { animation: sa-hover 2.6s ease-in-out infinite alternate; }
@keyframes sa-hover { from { transform: translate(0, 0) rotate(-2deg); } to { transform: translate(3px, -4px) rotate(2deg); } }

.sceneart .sa-walk { animation: sa-walk .9s ease-in-out infinite alternate; }
.sceneart .sa-walk.b { animation-delay: -.45s; }
@keyframes sa-walk { from { transform: translateY(0); } to { transform: translateY(-2px); } }

.sceneart .sa-birds { animation: sa-birds 26s linear infinite; }
@keyframes sa-birds { from { transform: translateX(-60px); } to { transform: translateX(380px); } }

.sceneart .sa-flap { transform-origin: 50% 50%; animation: sa-flap .5s ease-in-out infinite alternate; }
@keyframes sa-flap { to { transform: scaleY(.45); } }

.sceneart .sa-pour { animation: sa-pour 2.2s ease-in infinite; }
@keyframes sa-pour { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

.sceneart .sa-rush { animation: sa-rush 1.6s ease-in-out infinite alternate; }
.sceneart .sa-rush.b { animation-delay: -.8s; }
@keyframes sa-rush { from { transform: translate(0, 0); } to { transform: translate(4px, 2px); } }

/* ---------------------------------------------------------------- one-shot story moments (the resting state is the end) */
.scene-in .sa-descend { animation: sa-descend 2.4s .5s cubic-bezier(.25, .8, .3, 1) both; }
@keyframes sa-descend { from { transform: translate(0, -70px); opacity: 0; } 30% { opacity: 1; } }
.scene-in .sa-rollaway { transform-origin: 50% 50%; animation: sa-rollaway 2.2s .7s cubic-bezier(.45, .05, .3, 1) both; }
@keyframes sa-rollaway { from { transform: translateX(-74px) rotate(-150deg); } }
.scene-in .sa-burst { transform-origin: 50% 50%; animation: sa-burst 1.8s 1.6s ease-out both; }
@keyframes sa-burst { from { transform: scale(.2); opacity: 0; } 60% { opacity: 1; } }
.scene-in .sa-dawn { animation: sa-dawn 3s .2s ease-out both; }
@keyframes sa-dawn { from { opacity: 0; } }
.scene-in .sa-rise { animation: sa-rise 2.6s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sa-rise { from { transform: translateY(40px); } }
.scene-in .sa-appear { animation: sa-appear 1.4s 1s ease-out both; }
@keyframes sa-appear { from { opacity: 0; transform: scale(.85); } }
.scene-in .sa-part-l { animation: sa-part-l 2.4s .4s cubic-bezier(.3, .6, .2, 1) both; }
.scene-in .sa-part-r { animation: sa-part-r 2.4s .4s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes sa-part-l { from { transform: translateX(60px); } }
@keyframes sa-part-r { from { transform: translateX(-60px); } }

/* ---------------------------------------------------------------- the words under a scene */
.scene-words .sa-w { display: inline; animation: sa-word .5s ease-out both; animation-delay: calc(var(--i) * 28ms + .25s); }
@keyframes sa-word { from { opacity: 0; } }
.scene-words-title { animation: sa-title .6s .1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sa-title { from { opacity: 0; transform: translateY(8px); } }
.scene-panel-in { animation: sa-panel .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sa-panel { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .sceneart *, .scene-words .sa-w, .scene-words-title, .scene-panel-in { animation: none !important; }
  .sceneart .sa-flash { opacity: 0; }
}

/* A reading's banner scene sits above the passage. */
.readart { margin-bottom: 12px; }

/* Scenes without their own layers (chapter modules) still come to life: a fade in, then a slow drift of the camera. */
.sceneart.scene-in > svg:not(:has(.sa-l1)) { transform-origin: 50% 60%; animation: sa-cam-in .9s cubic-bezier(.2, .7, .2, 1) both, sa-cam 16s .9s ease-in-out infinite alternate; }
@keyframes sa-cam-in { from { opacity: 0; transform: scale(1.08); } }
@keyframes sa-cam { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, -1%); } }
@media (prefers-reduced-motion: reduce) { .sceneart.scene-in > svg { animation: none !important; } }