/* Basketball's scenery only: each light chase follows the ride in its own
   panorama. Hanging decorations remain visible when a narrow screen crops the
   distant rides, and all animation shares the existing Scenery preference. */
.basketball-scene-motion { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene-panorama-motion { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-motion-world { display: none; }
#basketball-world[data-world='1'] [data-motion-world='1'],
#basketball-world[data-world='2'] [data-motion-world='2'],
#basketball-world[data-world='3'] [data-motion-world='3'],
#basketball-world[data-world='4'] [data-motion-world='4'],
#basketball-world[data-world='5'] [data-motion-world='5'] { display: block; }

.scene-ride-chase { fill: #fff2b4; filter: drop-shadow(0 0 3px #fff4b6) drop-shadow(0 0 7px #ffba57); opacity: .2; animation: basketball-ride-chase 6.8s linear infinite; animation-delay: var(--phase, 0s); }
.scene-seaside-lights .scene-ride-chase { fill: #eafff0; filter: drop-shadow(0 0 4px #b9fff1) drop-shadow(0 0 7px #70f5d7); }
.scene-pier-lights .scene-ride-chase { fill: #cbfaff; filter: drop-shadow(0 0 4px #72f6ff) drop-shadow(0 0 9px #9a91ff); }
.scene-water-glints { fill: none; stroke: #d7ffff; stroke-width: 1.7; stroke-linecap: round; }
.scene-water-glints path { opacity: .4; animation: basketball-water-drift 7.5s ease-in-out infinite; animation-delay: var(--phase, 0s); }
.scene-fountain-flow { fill: none; stroke: #fff2ce; stroke-width: 2.3; stroke-dasharray: 4 7; opacity: .75; animation: basketball-fountain-flow 2.8s linear infinite; filter: drop-shadow(0 0 3px #fff2ce77); }
.scene-firework { fill: none; stroke: #ffdfa2; stroke-width: 2.2; stroke-linecap: round; opacity: .25; animation: basketball-firework-bloom 8s ease-out infinite; animation-delay: var(--phase, 0s); transform-origin: 0 0; filter: drop-shadow(0 0 4px #ffbc73); }

.midway-scenery[data-live-scenery='true'] > .midway-festoon { display: none; }
.scene-foreground-motion { position: absolute; top: -3px; left: -2%; width: 104%; height: clamp(110px, 13.5vw, 180px); overflow: visible; }
.scene-garland-shadow, .scene-garland-cord { fill: none; stroke-linecap: round; }
.scene-garland-shadow { stroke: #102c4280; stroke-width: 4.5; }
.scene-garland-cord { stroke: #f6dba4; stroke-width: 1.8; }
.scene-breeze-pennant { fill: var(--level-accent); stroke: #ffefbc99; stroke-width: 1; transform-origin: 0 0; animation: basketball-pennant-breeze var(--scene-sway-duration, 5.8s) ease-in-out infinite alternate; animation-delay: var(--phase, 0s); filter: drop-shadow(0 4px 3px #102b4055); }
.scene-breeze-pennant.pale { fill: var(--world-paper); }
.scene-ribbon-button { fill: var(--world-trim); stroke: #fff5cf; stroke-width: 1.2; }
.scene-round-lantern { transform-origin: 0 0; animation: basketball-lantern-breeze var(--scene-sway-duration, 5.8s) ease-in-out infinite alternate; animation-delay: var(--phase, 0s); filter: drop-shadow(0 0 8px #ffcf7566) drop-shadow(0 4px 3px #10254244); }
.scene-lantern-cord { fill: none; stroke: #f7daab; stroke-width: 1.2; }
.scene-lantern-cap { fill: #b8893e; stroke: #ffe8a8; stroke-width: .8; }
.scene-lantern-paper { fill: color-mix(in srgb, var(--level-accent), #ffdf9e 60%); stroke: #fff0c7; stroke-width: 1.2; }
.scene-round-lantern.pale .scene-lantern-paper { fill: #fff0c3; }
.scene-lantern-rib { fill: none; stroke: #bb834c66; stroke-width: 1; }
.scene-lantern-tassel { fill: none; stroke: #d3a153; stroke-width: 2; stroke-linecap: round; }

.midway-scenery[data-live-scenery='true'] > .midway-balloons { top: 11%; left: 3%; width: clamp(85px, 9.2vw, 132px); }
.midway-scenery[data-live-scenery='true'] .scenery-balloon-drift { animation-name: basketball-balloon-breeze; animation-duration: var(--scene-sway-duration, 5.8s); }
#basketball-world:is([data-world='3'], [data-world='4']) .midway-balloons { display: none; }
.midway-scenery[data-live-scenery='true'] .scenery-wheel-light { r: 4px; filter: drop-shadow(0 0 4px #ffd37c) drop-shadow(0 0 9px #ffbf5e); }

.scene-finale-confetti { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
#basketball-world[data-level='50'] .scene-finale-confetti { display: block; }
.scene-confetti-drift { fill: #f5cc75; opacity: .6; transform-origin: 0 0; animation: basketball-confetti-fall var(--fall, 12s) linear infinite; animation-delay: var(--phase, 0s); }
.scene-confetti-drift .pale { fill: #fff4c6; }

@keyframes basketball-ride-chase { 0%, 10% { opacity: 1; } 28%, 88% { opacity: .08; } 100% { opacity: 1; } }
@keyframes basketball-water-drift { 0%, 100% { opacity: .18; transform: translateX(-8px); } 50% { opacity: .68; transform: translateX(9px); } }
@keyframes basketball-fountain-flow { to { stroke-dashoffset: -44; } }
@keyframes basketball-firework-bloom { 0%, 100% { opacity: .04; transform: scale(.8); } 18% { opacity: .8; } 42% { opacity: .24; transform: scale(1.08); } 70% { opacity: .04; transform: scale(1.1); } }
@keyframes basketball-pennant-breeze { from { transform: rotate(-6deg) skewX(-9deg); } to { transform: rotate(7deg) skewX(10deg); } }
@keyframes basketball-lantern-breeze { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes basketball-balloon-breeze { from { transform: rotate(-6deg) translateY(3px); } to { transform: rotate(7deg) translateY(-12px); } }
@keyframes basketball-confetti-fall { 0% { opacity: 0; transform: translate(0, -30px) rotate(0deg); } 12% { opacity: .65; } 86% { opacity: .55; } 100% { opacity: 0; transform: translate(24px, 890px) rotate(230deg); } }

body[data-motion='off'] .basketball-scene-motion *,
body[data-motion='off'] .midway-scenery[data-live-scenery='true'] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .basketball-scene-motion *, .midway-scenery[data-live-scenery='true'] * { animation-play-state: paused !important; }
}
@media (max-width: 700px) {
  .scene-foreground-motion { width: 160%; left: -30%; height: 120px; }
  .midway-scenery[data-live-scenery='true'] > .midway-balloons { top: 16px; left: -14px; width: 88px; }
}
