/* Decorative paper assets share the background's coordinate system. */
.play-scene .seasonal-piece { height: auto; object-fit: contain; transform-origin: 50% 90%; }
.play-scene .seasonal-star--left { left: 5%; top: 10%; width: 10%; animation: seasonal-star 12s ease-in-out infinite; }
.play-scene .seasonal-star--right { right: 6%; top: 16%; width: 8%; animation: seasonal-star 12s ease-in-out -6s infinite; }
.play-scene .seasonal-heart--left { left: 3%; top: 49%; width: 10%; animation: seasonal-sway 7s ease-in-out infinite alternate; }
.play-scene .seasonal-heart--right { right: 2%; top: 48%; width: 10%; animation: seasonal-sway 9s ease-in-out -3s infinite alternate-reverse; }
.play-scene .seasonal-clover--left { left: 3%; top: 62%; width: 14%; animation: seasonal-sway 8s ease-in-out infinite alternate; }
.play-scene .seasonal-clover--right { right: 3%; top: 63%; width: 13%; animation: seasonal-sway 10s ease-in-out -4s infinite alternate-reverse; }
.play-scene .seasonal-butterfly { left: 10%; top: 47%; width: 6%; transform-origin: center; animation: seasonal-butterfly 10s ease-in-out infinite; }
.play-scene .seasonal-firework--left { left: 2%; top: 6%; width: 18%; transform-origin: center; animation: seasonal-firework 13s ease-in-out infinite; }
.play-scene .seasonal-firework--right { right: 2%; top: 7%; width: 18%; transform-origin: center; animation: seasonal-firework 13s ease-in-out -6.5s infinite; }
.play-scene .seasonal-pencil { left: 3%; top: 85%; width: 28%; transform-origin: 85% 75%; animation: seasonal-pencil 8s ease-in-out infinite; }
.play-scene .seasonal-ghost { right: 6%; top: 69%; width: 9%; animation: seasonal-ghost 8s ease-in-out infinite; }
.play-scene .seasonal-bat { right: 12%; top: 15%; width: 6%; transform-origin: center; animation: seasonal-bat 11s ease-in-out infinite; }
.play-scene .seasonal-leaf--left { left: 8%; top: 20%; width: 5%; animation: seasonal-leaf 15s ease-in-out infinite; }
.play-scene .seasonal-leaf--right { right: 8%; top: 18%; width: 4.5%; animation: seasonal-leaf 17s ease-in-out -8s infinite; }
.play-scene .seasonal-santa { left: 0; top: 4px; width: clamp(80px, 20vw, 240px); animation: seasonal-santa 28s linear -7s infinite; }
.play-scene .seasonal-snow { top: 8%; width: 0.3%; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--v2-play-snow); opacity: 0.65; animation: seasonal-snow 16s linear infinite; }
.play-scene .seasonal-snow--1 { left: 4%; }
.play-scene .seasonal-snow--2 { left: 11%; animation-delay: -8s; }
.play-scene .seasonal-snow--3 { left: 18%; animation-delay: -4s; }
.play-scene .seasonal-snow--4 { left: 23%; animation-delay: -12s; }
.play-scene .seasonal-snow--5 { right: 4%; animation-delay: -3s; }
.play-scene .seasonal-snow--6 { right: 11%; animation-delay: -11s; }
.play-scene .seasonal-snow--7 { right: 18%; animation-delay: -6s; }
.play-scene .seasonal-snow--8 { right: 23%; animation-delay: -14s; }
.play-scene .seasonal-lantern-glow { left: 5%; top: 72%; width: 18%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--v2-play-glow) 40%, transparent), transparent 70%); animation: seasonal-lantern 9s ease-in-out infinite; }

@keyframes seasonal-star { 0%, 100% { transform: rotate(-8deg) scale(0.88); opacity: 0.65; } 50% { transform: rotate(9deg) scale(1.08); opacity: 1; } }
@keyframes seasonal-sway { from { transform: rotate(-7deg); } to { transform: rotate(8deg); } }
@keyframes seasonal-butterfly { 0%, 100% { transform: translate(0, 0) rotate(-8deg) scaleX(1); } 25% { transform: translate(25%, -25%) rotate(8deg) scaleX(0.55); } 50% { transform: translate(40%, 5%) rotate(-5deg) scaleX(1); } 75% { transform: translate(10%, 20%) rotate(5deg) scaleX(0.6); } }
@keyframes seasonal-firework { 0%, 100% { transform: scale(0.6) rotate(-4deg); opacity: 0.25; } 40%, 60% { transform: scale(1.05) rotate(4deg); opacity: 0.95; } }
@keyframes seasonal-pencil { 0%, 25%, 70%, 100% { transform: rotate(0); } 40% { transform: rotate(-6deg); } 55% { transform: rotate(3deg); } }
@keyframes seasonal-ghost { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12%) rotate(5deg); } }
@keyframes seasonal-bat { 0%, 100% { transform: translateX(0) rotate(-5deg) scaleY(1); } 35% { transform: translateX(40%) rotate(9deg) scaleY(0.65); } 70% { transform: translateX(-30%) rotate(-9deg) scaleY(0.9); } }
@keyframes seasonal-leaf { 0% { transform: translate(0, 0) rotate(-25deg); opacity: 0.2; } 12% { opacity: 1; } 80% { opacity: 0.85; } 100% { transform: translate(30%, 550%) rotate(100deg); opacity: 0; } }
@keyframes seasonal-santa { 0%, 5% { transform: translateX(-110%); opacity: 0; } 12% { opacity: 0.9; } 85% { opacity: 0.9; } 95%, 100% { transform: translateX(calc(100cqw + 110%)); opacity: 0; } }
@keyframes seasonal-snow { from { transform: translate(0, 0); opacity: 0.15; } 15% { opacity: 0.7; } 90% { opacity: 0.7; } to { transform: translate(400%, 22000%); opacity: 0; } }
@keyframes seasonal-lantern { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }

/* Shorthand declarations above must not bypass the shared motion controller. */
.play-scene .play-piece { animation-play-state: paused; }
body[data-motion-ready="true"]:not([data-motion-paused="true"]) .play-piece { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
    .play-scene .play-piece { animation: none !important; }
    .play-scene .seasonal-santa { left: 7%; opacity: 0.9; }
    .play-scene .seasonal-snow { display: none; }
}
@media (max-height: 620px) { .play-scene .seasonal-santa { width: 80px; } }