.audience-layer { position: fixed; inset: 0; z-index: 21; pointer-events: none; overflow: hidden; contain: layout paint; }
.audience-layer[data-active="0"] { visibility: hidden; }
.audience-count { position: absolute; top: clamp(58px, 9vh, 96px); right: clamp(8px, 2vw, 26px); padding: .28em .58em; border-radius: 999px; color: #fff; background: #5d3c82d9; font-size: clamp(.72rem, 1.2vw, 1rem); font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px 2px #2d1744; }
.audience-member { position: absolute; display: block; transform-origin: 50% 100%; opacity: 0; animation: audience-enter var(--audience-duration, .8s) cubic-bezier(.16, 1.25, .3, 1) var(--audience-delay, 0ms) both; filter: drop-shadow(0 4px 5px #57386b55); }
.audience-sprite { display: block; width: 100%; height: 100%; background-size: 200% 200%; background-repeat: no-repeat; }
.audience-member.is-wave .audience-sprite { animation: audience-wave 1.1s ease-in-out var(--audience-delay, 0ms) infinite alternate; }
.audience-member.is-leaving { animation: audience-leave .38s ease-in both; }
.audience-layer.is-finale .audience-member { animation-duration: .48s; }
@keyframes audience-enter { 0% { opacity: 0; transform: translateY(16px) scale(calc(var(--audience-scale, 1) * .64)); } 65% { opacity: 1; transform: translateY(-5px) scale(calc(var(--audience-scale, 1) * 1.08)); } 100% { opacity: 1; transform: translateY(0) scale(var(--audience-scale, 1)); } }
@keyframes audience-wave { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(6deg) translateY(-4px); } }
@keyframes audience-leave { 0% { opacity: 1; transform: translateY(0) scale(var(--audience-scale, 1)); } 45% { opacity: .55; transform: translateY(5px) rotate(-8deg) scale(.88); } 100% { opacity: 0; transform: translateY(34px) rotate(12deg) scale(.62); } }
@media (prefers-reduced-motion: reduce) { .audience-layer { display: none; } }
.manual-reduced-motion .audience-layer { display: none; }
/* Individual crowd motion: every member gets a different rhythm, phase, and path. */
.audience-member.move-a { animation: audience-a var(--audience-duration, .8s) cubic-bezier(.16,1.2,.3,1) var(--audience-delay,0ms) both; }
.audience-member.move-b { animation: audience-b var(--audience-duration, .8s) cubic-bezier(.16,1.2,.3,1) var(--audience-delay,0ms) both; }
.audience-member.move-c { animation: audience-c var(--audience-duration, .8s) cubic-bezier(.16,1.2,.3,1) var(--audience-delay,0ms) both; }
.audience-member.move-d { animation: audience-d var(--audience-duration, .8s) cubic-bezier(.16,1.2,.3,1) var(--audience-delay,0ms) both; }
.audience-member.move-e { animation: audience-e var(--audience-duration, .8s) cubic-bezier(.16,1.2,.3,1) var(--audience-delay,0ms) both; }
.audience-member .audience-sprite { animation-duration: calc(1.1s + var(--audience-phase) / 1800); animation-delay: var(--audience-phase); }
.audience-member.move-a .audience-sprite { animation: sprite-a 1.05s ease-in-out var(--audience-phase) infinite alternate; }
.audience-member.move-b .audience-sprite { animation: sprite-b 1.35s ease-in-out var(--audience-phase) infinite alternate; }
.audience-member.move-c .audience-sprite { animation: sprite-c .82s ease-in-out var(--audience-phase) infinite alternate; }
.audience-member.move-d .audience-sprite { animation: sprite-d 1.6s ease-in-out var(--audience-phase) infinite alternate; }
.audience-member.move-e .audience-sprite { animation: sprite-e 1.2s ease-in-out var(--audience-phase) infinite alternate; }
@keyframes sprite-a { from { transform:translateX(calc(var(--audience-sway) * -.35)) rotate(calc(var(--audience-tilt) * -.45)); } to { transform:translateX(var(--audience-sway)) translateY(calc(var(--audience-rise) * -1)) rotate(var(--audience-tilt)); } }
@keyframes sprite-b { from { transform:translateY(2px) rotate(calc(var(--audience-tilt) * -.7)); } to { transform:translateY(calc(var(--audience-rise) * -1)) rotate(calc(var(--audience-tilt) * .7)); } }
@keyframes sprite-c { from { transform:rotate(-18deg) translateY(3px); } to { transform:rotate(18deg) translateY(calc(var(--audience-rise) * -1)); } }
@keyframes sprite-d { from { transform:translateX(calc(var(--audience-sway) * -.55)) rotate(var(--audience-tilt)); } to { transform:translateX(calc(var(--audience-sway) * .55)) rotate(calc(var(--audience-tilt) * -1)); } }
@keyframes sprite-e { from { transform:translateY(0) rotate(calc(var(--audience-tilt) * -.25)); } to { transform:translateY(calc(var(--audience-rise) * -1.3)) rotate(calc(var(--audience-tilt) * .8)); } }
.audience-member.is-leaving { animation: audience-leave .38s ease-in both !important; }
@keyframes audience-a { 0%{opacity:0;transform:translate(0,16px) rotate(var(--audience-tilt)) scale(calc(var(--audience-scale)*.64))} 35%{opacity:1;transform:translate(calc(var(--audience-sway)*-.45),calc(var(--audience-rise)*-1)) rotate(calc(var(--audience-tilt)*-.4)) scale(calc(var(--audience-scale)*1.08))} 70%{transform:translate(var(--audience-sway),0) rotate(var(--audience-tilt)) scale(var(--audience-scale))} 100%{opacity:1;transform:translate(calc(var(--audience-sway)*-.25),calc(var(--audience-rise)*-.5)) rotate(calc(var(--audience-tilt)*.35)) scale(var(--audience-scale))} }
@keyframes audience-b { 0%{opacity:0;transform:translate(0,18px) rotate(calc(var(--audience-tilt)*-1)) scale(calc(var(--audience-scale)*.62))} 28%{opacity:1;transform:translate(calc(var(--audience-sway)*.65),calc(var(--audience-rise)*-1.4)) rotate(var(--audience-tilt)) scale(calc(var(--audience-scale)*1.12))} 58%{transform:translate(calc(var(--audience-sway)*-.7),calc(var(--audience-rise)*-.2)) rotate(calc(var(--audience-tilt)*-.6)) scale(var(--audience-scale))} 100%{opacity:1;transform:translate(calc(var(--audience-sway)*.3),calc(var(--audience-rise)*-.7)) rotate(calc(var(--audience-tilt)*.5)) scale(var(--audience-scale))} }
@keyframes audience-c { 0%{opacity:0;transform:translate(0,14px) rotate(0deg) scale(calc(var(--audience-scale)*.58))} 30%{opacity:1;transform:translate(calc(var(--audience-sway)*-.7),calc(var(--audience-rise)*-1.2)) rotate(22deg) scale(calc(var(--audience-scale)*1.1))} 58%{transform:translate(calc(var(--audience-sway)*.75),calc(var(--audience-rise)*-.35)) rotate(-18deg) scale(var(--audience-scale))} 100%{opacity:1;transform:translate(calc(var(--audience-sway)*-.2),calc(var(--audience-rise)*-.8)) rotate(8deg) scale(var(--audience-scale))} }
@keyframes audience-d { 0%{opacity:0;transform:translate(-12px,12px) rotate(var(--audience-tilt)) scale(.6)} 40%{opacity:1;transform:translate(var(--audience-sway),calc(var(--audience-rise)*-1.5)) rotate(calc(var(--audience-tilt)*-1)) scale(calc(var(--audience-scale)*1.1))} 75%{transform:translate(calc(var(--audience-sway)*-.55),0) rotate(var(--audience-tilt)) scale(var(--audience-scale))} 100%{opacity:1;transform:translate(calc(var(--audience-sway)*.2),calc(var(--audience-rise)*-.65)) rotate(calc(var(--audience-tilt)*-.4)) scale(var(--audience-scale))} }
@keyframes audience-e { 0%{opacity:0;transform:translate(10px,16px) rotate(calc(var(--audience-tilt)*-1)) scale(.64)} 32%{opacity:1;transform:translate(calc(var(--audience-sway)*-.8),calc(var(--audience-rise)*-1.1)) rotate(calc(var(--audience-tilt)*.8)) scale(calc(var(--audience-scale)*1.14))} 66%{transform:translate(calc(var(--audience-sway)*.8),calc(var(--audience-rise)*-.25)) rotate(calc(var(--audience-tilt)*-1.1)) scale(var(--audience-scale))} 100%{opacity:1;transform:translate(calc(var(--audience-sway)*-.35),calc(var(--audience-rise)*-.75)) rotate(calc(var(--audience-tilt)*.2)) scale(var(--audience-scale))} }