@keyframes geometricFade {
  0% {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 0;
  }
  20% {
    transform: scale(1.2) rotate(90deg) translate(-20%, -20%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) rotate(270deg) translate(20%, 20%);
    opacity: 0.9;
  }
  100% {
    transform: scale(0) rotate(360deg) translate(50%, 50%);
    opacity: 0;
  }
}

@keyframes bodyPaintReveal {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);

@keyframes neonPulse {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes lightStreak {
  0% { transform: translateX(-100vw) rotate(45deg); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100vw) rotate(45deg); opacity: 0; }
}

@keyframes arabicPattern {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes lightBeam {
  0% { opacity: 0; transform: translateY(-100vh); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(100vh); }
}

    opacity: 0;
  }
}

@keyframes rotateAndFade {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(0);
    opacity: 0;
  }
}

@keyframes neonGlow {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes waveMove {
  0% {
    transform: scaleX(0);
    opacity: 0.8;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes barbieFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1.5);
    opacity: 0;
  }
}

@keyframes londonFade {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(-10deg);
  }
  20% {
    opacity: 1;
    transform: translateY(0) rotate(5deg);
  }
  80% {
    opacity: 1;
    transform: translateY(0) rotate(-5deg);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) rotate(10deg);
  }
}

@keyframes rain {
  0% {
    transform: translateY(-10px) rotate(15deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(15deg);
    opacity: 0;
  }
}

@keyframes lovePulse {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes heartbeat {
  0% { transform: scale(1); opacity: 0; }
  20% { transform: scale(1.2); opacity: 1; }
  40% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes fallAndSpin {
  0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes spotlightGrow {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes noteFloat {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

@keyframes partyPop {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  20% { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes waveRoll {
  0% { transform: scaleX(0); opacity: 0.8; }
  50% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

@keyframes pianoRise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

@keyframes toxicSparkle {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

.geometric-shape {
  border-radius: 4px;
  transform-origin: center;
}

.neon-line {
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
}

.blue-wave {
  box-shadow: 0 0 10px #00ffff;
}

@keyframes pirateFloat {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1.2) rotate(-10deg);
  }
  80% {
    opacity: 1;
    transform: scale(1) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
}

@keyframes lightning {
  0%, 100% { opacity: 0; }
  10%, 30% { opacity: 0.6; }
  60% { opacity: 0.2; }
  90% { opacity: 0; }
}

@keyframes waveExpand {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes rainFall {
  0% { transform: translateY(0) rotate(15deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(15deg); opacity: 0; }
}

@keyframes bubbleRise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
}

@keyframes shapePulse {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes paintSplash {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes recordSpin {
  0% { transform: rotate(0deg) scale(1); opacity: 0; }
  50% { transform: rotate(180deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0; }
}

@keyframes fearRise {
  0% { transform: translateY(100vh) scale(1); opacity: 0; }
  50% { transform: translateY(50vh) scale(1.5); opacity: 0.7; }
  100% { transform: translateY(0) scale(1); opacity: 0; }
}

@keyframes cheriBlossom {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  50% { transform: translate(-50px, -50px) rotate(180deg); opacity: 1; }
  100% { transform: translate(-100px, -100px) rotate(360deg); opacity: 0; }
}

@keyframes giveItPulse {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
@keyframes moonlightFade {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes starTwinkle {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes neonBoxPulse {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes candyFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

@keyframes phoneRing {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  20% { transform: scale(1.2) rotate(20deg); opacity: 1; }
  40% { transform: scale(1) rotate(-15deg); opacity: 1; }
  60% { transform: scale(1.1) rotate(15deg); opacity: 1; }
  80% { transform: scale(1) rotate(-10deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(0deg); opacity: 0; }
}

@keyframes saxoNote {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  20% { transform: scale(1.5) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes cloudFloat {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes symbolReveal {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  20% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
  80% { transform: scale(1) rotate(270deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes smokeRise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-300px) scale(2); opacity: 0; }
}

@keyframes desertPattern {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.6; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes petalFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes rainDrop {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes heartLine {
  0% { transform: scaleX(0); opacity: 0; }
  50% { transform: scaleX(1); opacity: 0.8; }
  100% { transform: scaleX(0); opacity: 0; }
}

@keyframes cityLight {
  0% { transform: translateY(-200px); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes snowfall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
@keyframes daysRay {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes shealomaRipple {
  0% { transform: scale(0.3); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes tickPattern {
  0% { transform: rotate(0deg) scale(1); opacity: 0; }
  50% { transform: rotate(180deg) scale(1.5); opacity: 0.7; }
  100% { transform: rotate(360deg) scale(0); opacity: 0; }
}

@keyframes dualBeam {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

@keyframes clockHand {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(360deg);
  }
}

@keyframes featherFall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes sosBeam {
  0% { transform: translateY(-100vh) rotate(45deg); opacity: 0; }
  50% { opacity: 0.7; }
  100% { transform: translateY(100vh) rotate(45deg); opacity: 0; }
}