/* === Keyframe Animations === */

/* Sakura petal fall */
@keyframes petalFall {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) translateX(30px) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(-20px) rotate(360deg);
    opacity: 0;
  }
}

.sakura-petal {
  position: fixed;
  width: 12px;
  height: 12px;
  background: radial-gradient(ellipse at center, #f8c8d4 0%, #f4a0b0 60%, transparent 70%);
  border-radius: 50% 0 50% 0;
  pointer-events: none;
  z-index: 1000;
  animation: petalFall var(--fall-duration, 8s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
  left: var(--fall-x, 50%);
  opacity: 0;
}

/* Firefly glow */
@keyframes fireflyFloat {
  0% {
    transform: translate(0, 0);
    opacity: 0.2;
  }
  25% { opacity: 0.8; }
  50% {
    transform: translate(var(--drift-x, 20px), var(--drift-y, -30px));
    opacity: 0.4;
  }
  75% { opacity: 0.9; }
  100% {
    transform: translate(0, 0);
    opacity: 0.2;
  }
}

.firefly {
  position: fixed;
  width: 4px;
  height: 4px;
  background: #f9e784;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(249, 231, 132, 0.6), 0 0 12px 4px rgba(249, 231, 132, 0.3);
  pointer-events: none;
  z-index: 1000;
  animation: fireflyFloat var(--float-duration, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  left: var(--fly-x, 50%);
  top: var(--fly-y, 50%);
}

/* Twinkle for string lights */
@keyframes twinkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Stamp slam */
@keyframes stampSlam {
  0% {
    transform: scale(2.5) rotate(var(--stamp-rotation, -8deg));
    opacity: 0;
  }
  60% {
    transform: scale(0.95) rotate(var(--stamp-rotation, -8deg));
    opacity: 1;
  }
  75% {
    transform: scale(1.05) rotate(var(--stamp-rotation, -8deg));
  }
  100% {
    transform: scale(1) rotate(var(--stamp-rotation, -8deg));
    opacity: 0.85;
  }
}

/* Tape peel */
@keyframes tapePeel {
  0% {
    transform: rotate(var(--tape-rotation, -5deg)) scaleX(0);
    transform-origin: left center;
  }
  100% {
    transform: rotate(var(--tape-rotation, -5deg)) scaleX(1);
    transform-origin: left center;
  }
}

/* Vinyl spin for music toggle */
@keyframes vinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Gentle float for decorative elements */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes scrollCueBounce {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(8px); opacity: 1; }
}

@keyframes routePlaneTravel {
  0% { transform: translateX(0) translateY(0) rotate(-8deg); }
  50% { transform: translateX(118px) translateY(-18px) rotate(2deg); }
  100% { transform: translateX(236px) translateY(0) rotate(8deg); }
}

/* Counter tick */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}