.cheer-party-layer { position: fixed; inset: 0; z-index: 24; overflow: hidden; pointer-events: none; contain: layout paint; }
.cheer-party-actor, .cheer-party-prop { position: absolute; display: block; pointer-events: none; }
.cheer-party-actor { left: clamp(4px, calc(5vw + var(--actor-index) * 7vw), 180px); bottom: clamp(12px, 8vh, 90px); width: clamp(78px, 16vw, 170px); aspect-ratio: 1; filter: drop-shadow(0 8px 7px #57386b55); z-index: 2; animation: cheer-party-pop var(--entry-duration, .24s) cubic-bezier(.16,1.3,.35,1) both, cheer-party-float var(--travel-duration, 1.3s) ease-in-out var(--entry-duration, .24s) 1; animation-delay: 0s, var(--entry-duration, .24s); }
.cheer-party-actor:nth-child(even) { left: auto; right: clamp(4px, calc(5vw + var(--actor-index) * 7vw), 180px); }
.cheer-party-sprite { display: block; width: 100%; height: 100%; background-size: 200% 200%; background-repeat: no-repeat; }
.cheer-party-duet .cheer-party-sprite { animation: cheer-party-wave .5s ease-in-out alternate 2; }
.cheer-party-spin-exit { animation: cheer-party-pop var(--entry-duration, .18s) cubic-bezier(.16,1.3,.35,1) both, cheer-party-spin-exit var(--travel-duration, .5s) ease-in var(--entry-duration, .18s) both; }
.cheer-party-parade { animation: cheer-party-parade 1.5s ease-in-out both; }
.cheer-party-orbit { width: clamp(92px, 19vw, 190px); animation: cheer-party-orbit 2.1s cubic-bezier(.2,.8,.3,1) both; }
.cheer-party-prop { left: calc(8% + var(--actor-index) * 7.5%); top: clamp(70px, 18vh, 190px); width: clamp(24px, 5vw, 58px); aspect-ratio: 1; background-size: 400% 800%; background-repeat: no-repeat; opacity: .9; animation: cheer-party-prop 1.1s ease-out both; }
.cheer-party-prop:nth-of-type(even) { top: auto; bottom: clamp(100px, 24vh, 240px); }
.cheer-party-prop[data-path="1"] { animation-name: cheer-party-prop-right; }
.cheer-party-prop[data-path="2"] { animation-name: cheer-party-prop-left; }
.cheer-party-prop[data-path="3"] { animation-name: cheer-party-prop-fall; }
@keyframes cheer-party-pop { 0% { opacity: 0; transform: translateY(18px) scale(calc(var(--sprite-scale, 1) * .42)) rotate(-8deg); } 65% { opacity: 1; transform: translateY(-6px) scale(calc(var(--sprite-scale, 1) * 1.08)) rotate(4deg); } 100% { opacity: 1; transform: translateY(0) scale(var(--sprite-scale, 1)) rotate(0); } }
@keyframes cheer-party-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes cheer-party-wave { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
@keyframes cheer-party-spin-exit { 0%,18% { opacity: 0; transform: translate(0,8px) rotate(0) scale(calc(var(--sprite-scale, 1) * .5)); } 32%,72% { opacity: 1; transform: translate(calc((var(--actor-index) - 2.5) * 2vw), -4px) rotate(180deg) scale(var(--sprite-scale, 1)); } 100% { opacity: 0; transform: translate(calc((var(--actor-index) - 2.5) * 5vw), -8vh) rotate(360deg) scale(calc(var(--sprite-scale, 1) * .72)); } }
@keyframes cheer-party-parade { 0%,18% { opacity: 0; transform: translateX(-6vw) rotate(-8deg) scale(calc(var(--sprite-scale, 1) * .55)); } 34%,78% { opacity: 1; transform: translateX(0) rotate(3deg) scale(var(--sprite-scale, 1)); } 100% { opacity: 0; transform: translateX(6vw) rotate(8deg) scale(calc(var(--sprite-scale, 1) * .8)); } }
@keyframes cheer-party-orbit { 0%,18% { opacity: 0; transform: translate(0,10px) rotate(-20deg) scale(calc(var(--sprite-scale, 1) * .55)); } 32%,78% { opacity: 1; transform: translate(calc((var(--actor-index) - 2.5) * 2vw), -4vh) rotate(180deg) scale(var(--sprite-scale, 1)); } 100% { opacity: 0; transform: translate(calc((var(--actor-index) - 2.5) * 5vw), -8vh) rotate(360deg) scale(calc(var(--sprite-scale, 1) * .75)); } }
@keyframes cheer-party-prop { 0% { opacity: 0; transform: translateY(22px) scale(.2) rotate(-30deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18vh) scale(1) rotate(240deg); } }
@keyframes cheer-party-prop-right { 0% { opacity: 0; transform: translate(0,22px) scale(.2) rotate(-30deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(18vw,-12vh) scale(1) rotate(240deg); } }
@keyframes cheer-party-prop-left { 0% { opacity: 0; transform: translate(0,22px) scale(.2) rotate(30deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-18vw,-12vh) scale(1) rotate(-240deg); } }
@keyframes cheer-party-prop-fall { 0% { opacity: 0; transform: translateY(-10vh) scale(.5) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12vh) scale(1) rotate(180deg); } }
@media (max-width: 520px) { .cheer-party-actor { width: clamp(84px, 23vw, 132px); } .cheer-party-orbit { width: clamp(96px, 27vw, 145px); } }
@media (max-width: 520px) { .cheer-party-actor { left: clamp(-30px, -5vw, -12px); } .cheer-party-actor:nth-child(even) { left: auto; right: clamp(-30px, -5vw, -12px); } }
@media (prefers-reduced-motion: reduce) { .cheer-party-layer { display: none; } }
.manual-reduced-motion .cheer-party-layer { display: none; }