/* ===== Global animations ===== */

/* Slideshow */
@keyframes slideInFromLeft{ 0%{opacity:1; transform:translateX(0) translateY(0)} 23%{opacity:1; transform:translateX(0) translateY(0)} 24%{opacity:0; transform:translateX(-100px) translateY(0)} 100%{opacity:0; transform:translateX(-100px) translateY(0)} }
@keyframes slideInFromRight{ 0%{opacity:1; transform:translateX(0) translateY(0)} 23%{opacity:1; transform:translateX(0) translateY(0)} 24%{opacity:0; transform:translateX(100px) translateY(0)} 100%{opacity:0; transform:translateX(100px) translateY(0)} }
@keyframes slideInFromTop{ 0%{opacity:1; transform:translateX(0) translateY(0)} 23%{opacity:1; transform:translateX(0) translateY(0)} 24%{opacity:0; transform:translateX(0) translateY(-100px)} 100%{opacity:0; transform:translateX(0) translateY(-100px)} }
@keyframes slideInFromBottom{ 0%{opacity:1; transform:translateX(0) translateY(0)} 23%{opacity:1; transform:translateX(0) translateY(0)} 24%{opacity:0; transform:translateX(0) translateY(100px)} 100%{opacity:0; transform:translateX(0) translateY(100px)} }
@keyframes zoomInOut{ 0%{ transform: scale(1.0) } 50%{ transform: scale(1.1) } 100%{ transform: scale(1.0) } }

/* Scroll-in utility */
[data-scroll-animation]{ opacity:0; transform: translateY(80px) scale(0.95); filter: blur(2px); transition: all 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) }
[data-scroll-animation].animate-in{ opacity:1; transform: translateY(0) scale(1); filter: blur(0) }
[data-scroll-animation]:nth-child(1){ transition-delay:.2s }
[data-scroll-animation]:nth-child(2){ transition-delay:.4s }
[data-scroll-animation]:nth-child(3){ transition-delay:.6s }

@media (prefers-reduced-motion: reduce){
  [data-scroll-animation]{ transition: none }
}

/* Directional slide-in helpers */
[data-scroll-direction="left"]{ transform: translateX(-60px); opacity:0; }
[data-scroll-direction="right"]{ transform: translateX(60px); opacity:0; }
[data-scroll-direction="up"]{ transform: translateY(60px); opacity:0; }
[data-scroll-direction="down"]{ transform: translateY(-60px); opacity:0; }
[data-scroll-direction].animate-in{ transform: translate(0,0); opacity:1 }

/* ===== Introduction hero and text animations ===== */
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0) } 33%{ transform: translateY(-20px) rotate(1deg) } 66%{ transform: translateY(10px) rotate(-1deg) } }
@keyframes rotate { from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
@keyframes particle1 { 0%,100%{ transform:translate(0,0) scale(1); opacity:.6 } 25%{ transform:translate(20px,-30px) scale(1.2); opacity:1 } 50%{ transform:translate(40px,-20px) scale(.8); opacity:.4 } 75%{ transform:translate(20px,10px) scale(1.1); opacity:.8 } }
@keyframes particle2 { 0%,100%{ transform:translate(0,0) scale(1); opacity:.4 } 33%{ transform:translate(-30px,-40px) scale(1.3); opacity:1 } 66%{ transform:translate(-50px,-10px) scale(.7); opacity:.3 } }
@keyframes particle3 { 0%,100%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:.5 } 25%{ transform:translate(25px,-35px) scale(1.1) rotate(90deg); opacity:1 } 50%{ transform:translate(45px,-15px) scale(.9) rotate(180deg); opacity:.3 } 75%{ transform:translate(25px,15px) scale(1.2) rotate(270deg); opacity:.7 } }
@keyframes titleGlow { 0%{ text-shadow:0 0 30px rgba(255,255,255,.3) } 100%{ text-shadow:0 0 50px rgba(255,255,255,.5), 0 0 70px rgba(255,255,255,.2) } }
@keyframes subtitleFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@keyframes descriptionFade { 0%,100%{ opacity:.8 } 50%{ opacity:1 } }
@keyframes burst { 0%{ transform:scale(0) rotate(0deg); opacity:1 } 100%{ transform:scale(3) rotate(360deg); opacity:0 } }
@keyframes titleShake { 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) } }
@keyframes subtitleBounce { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes descriptionPulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
@keyframes ripple { 0%{ width:0; height:0; opacity:1 } 100%{ width:200px; height:200px; opacity:0 } }

/* ===== Main sponsor effect animations ===== */
@keyframes sponsorBgFloat { 0%,100%{ transform:translateY(0) scale(1); opacity:.15 } 50%{ transform:translateY(-10px) scale(1.05); opacity:.2 } }
@keyframes floatingLight { 0%,100%{ transform:translate(0,0) scale(1); opacity:.6 } 25%{ transform:translate(20px,-30px) scale(1.2); opacity:1 } 50%{ transform:translate(40px,-20px) scale(.8); opacity:.4 } 75%{ transform:translate(20px,10px) scale(1.1); opacity:.8 } }
@keyframes bgPatternMove { 0%{ transform:translateX(0) translateY(0) rotate(0deg) } 100%{ transform:translateX(50px) translateY(-30px) rotate(360deg) } }
@keyframes floatingLightEnhanced { 0%{ transform:scale(1) rotate(0deg); opacity:.6 } 50%{ transform:scale(2) rotate(180deg); opacity:1 } 100%{ transform:scale(1) rotate(360deg); opacity:.6 } }
@keyframes sponsorRipple { 0%{ width:0; height:0; opacity:1; border-width:2px } 100%{ width:200px; height:200px; opacity:0; border-width:1px } }
@keyframes lightBurst { 0%{ transform:translate(0,0) scale(1); opacity:1 } 100%{ transform:translate(calc(cos(var(--angle)) * 100px), calc(sin(var(--angle)) * 100px)) scale(0); opacity:0 } }
@keyframes fireworkExplode { 0%{ transform:scale(0); opacity:1 } 50%{ transform:scale(1); opacity:1 } 100%{ transform:scale(0); opacity:0 } }
@keyframes fireworkParticle { 0%{ transform:translate(0,0) scale(1); opacity:1 } 100%{ transform:translate(var(--dx), var(--dy)) scale(0); opacity:0 } }

/* Subtle star twinkle */
@keyframes twinkle {
  0%, 100% { opacity: .8 }
  50% { opacity: .4 }
}