.olympia-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; overflow: hidden; contain: strict; } .olympia-symbol { position: absolute; top: -10vh; animation: olympia-fall linear infinite; font-size: 3rem; opacity: 0.95; text-shadow: 0 0 10px rgba(255,255,255,0.2); } .olympia-symbol img { width: 6vh; height: auto; max-width: 60px; object-fit: contain; } .olympia-confetti { position: absolute; top: -5vh; width: 8px; height: 16px; opacity: 0.85; animation: olympia-confetti-fall linear infinite; border-radius: 4px; /* slightly rounder confetti */ } @keyframes olympia-fall { 0% { transform: translateY(-10vh) rotate(var(--start-rot, 0deg)); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--end-rot, 360deg)); opacity: 0; } } @keyframes olympia-confetti-fall { 0% { transform: translateY(-5vh) rotateX(0deg) rotateY(0deg); opacity: 0; } 5% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(105vh) rotateX(720deg) rotateY(360deg); opacity: 0; } }