/* ============================================
   Fret Frenzy - Animations
   ============================================ */

/* --- Neon Title Flicker --- */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

.title-fret,
.title-frenzy {
  animation: flicker 4s infinite;
}

.title-frenzy {
  animation-delay: 0.5s;
}

/* --- Light Ray Rotation --- */
@keyframes rotate-rays {
  from { transform: translate(-50%, -55%) rotate(0deg); }
  to { transform: translate(-50%, -55%) rotate(360deg); }
}

.hero-rays {
  animation: rotate-rays 60s linear infinite;
}

/* --- Floating Note Tiles --- */
@keyframes float-1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15px, -30px) rotate(5deg); }
  50% { transform: translate(-10px, -50px) rotate(-3deg); }
  75% { transform: translate(20px, -25px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes float-2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-20px, -25px) rotate(-4deg); }
  50% { transform: translate(15px, -45px) rotate(6deg); }
  75% { transform: translate(-10px, -20px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes float-3 {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(25px, -35px) rotate(7deg); }
  66% { transform: translate(-15px, -55px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.note-tile:nth-child(odd) { animation: float-1 8s ease-in-out infinite; }
.note-tile:nth-child(even) { animation: float-2 10s ease-in-out infinite; }
.note-tile:nth-child(3n) { animation: float-3 12s ease-in-out infinite; }

.note-tile:nth-child(1) { animation-delay: 0s; }
.note-tile:nth-child(2) { animation-delay: -1.5s; }
.note-tile:nth-child(3) { animation-delay: -3s; }
.note-tile:nth-child(4) { animation-delay: -4.5s; }
.note-tile:nth-child(5) { animation-delay: -6s; }
.note-tile:nth-child(6) { animation-delay: -2s; }
.note-tile:nth-child(7) { animation-delay: -3.5s; }
.note-tile:nth-child(8) { animation-delay: -5s; }
.note-tile:nth-child(9) { animation-delay: -7s; }
.note-tile:nth-child(10) { animation-delay: -1s; }

/* --- CTA Pulse --- */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 20px var(--cta-gold-light), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 4px 30px rgba(230, 168, 51, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

.cta-button {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* --- Scroll Reveal Stagger --- */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero-rays {
    animation: none;
  }
}