/* scenery.css: layout and life for the world backgrounds drawn by js/scenery.js (and the race course props in js/sprint.js). */
/* each parallax layer is exactly two tiles wide, so the scroll loop is seamless; still scenes rest a quarter tile in */
.scene.scn .px-layer { width: auto; height: 100%; aspect-ratio: 16 / 3; min-width: 200%; animation-delay: calc(var(--spd) * -.25); }
.scene.scn .scn-sun { pointer-events: none; }
.scn-spin { transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
.scn-spin.slow { animation-duration: 10s; }
.scene.still .scn-spin { animation-play-state: paused; }

/* manga focus lines and floating menace kana (animated scenes only) */
.scn-over { font-size: clamp(22px, 5.4vmin, 66px); }
.scn-focus { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .14; }
.scn-kana { position: absolute; font-family: var(--f-jp, 'Noto Sans JP'), sans-serif; font-weight: 900; line-height: 1; color: #b77dff; -webkit-text-stroke: .07em #1a1020; paint-order: stroke fill; text-shadow: .07em .07em 0 #1a1020; letter-spacing: -.06em; white-space: nowrap; transform: rotate(var(--rot, 0deg)); opacity: .8; pointer-events: none; }
.scn-kana.k2 { color: #ff7ab8; opacity: .7; }
.scn-kana span { display: inline-block; transform: translateY(calc(var(--k) * .14em)) scale(calc(1 - var(--k) * .07)); animation: scnMenace 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.35s); }
@keyframes scnMenace { 0%, 100% { translate: 0 0; opacity: .55; } 50% { translate: .05em -.12em; opacity: 1; } }

/* race course sky (js/sprint.js) */
.sprint-world .sw-sky svg.sw-skyart { position: absolute; inset: 0; width: 100%; height: 100%; }
.sprint-world .sw-sky.scn-sky .sw-sun { display: none; }

body.reduced .scn-spin, body.reduced .scn-kana span { animation: none; }
@media (prefers-reduced-motion: reduce) { .scn-spin, .scn-kana span { animation: none; } }