/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — Keyframes, Transitions, Scroll Effects
   ═══════════════════════════════════════════════════════════ */

/* ─── FADE ANIMATIONS ────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp3D {
  from {
    opacity: 0;
    transform: perspective(var(--perspective)) translateY(60px) translateZ(-50px);
  }
  to {
    opacity: 1;
    transform: perspective(var(--perspective)) translateY(0) translateZ(0);
  }
}

/* ─── SHIMMER / GOLD SHINE ───────────────────────────── */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes goldPulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(201, 169, 110, 0.15);
  }
  50% {
    text-shadow: 0 0 20px rgba(201, 169, 110, 0.3),
                 0 0 40px rgba(201, 169, 110, 0.1);
  }
}

/* ─── FLOAT ANIMATIONS ───────────────────────────────── */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(1deg);
  }
  66% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

@keyframes floatDeep {
  0%, 100% {
    transform: perspective(var(--perspective)) translateY(0) translateZ(0);
  }
  50% {
    transform: perspective(var(--perspective)) translateY(-12px) translateZ(10px);
  }
}

/* ─── PETAL FALL ─────────────────────────────────────── */
@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translateY(-10%) translateX(0) rotate(0deg);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) translateX(100px) rotate(360deg);
  }
}

/* ─── PULSE / GLOW ───────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(201, 169, 110, 0.1);
  }
  50% {
    box-shadow: 0 0 25px rgba(201, 169, 110, 0.25),
                0 0 50px rgba(201, 169, 110, 0.08);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ─── COUNTDOWN FLIP ─────────────────────────────────── */
@keyframes flipDown {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  50% {
    transform: perspective(400px) rotateX(-90deg);
    opacity: 0;
  }
  51% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes countPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* ─── MUSIC BUTTON ───────────────────────────────────── */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes musicPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(201, 169, 110, 0);
  }
}

/* ─── SCROLL-TRIGGERED ANIMATION CLASSES ─────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.stagger-children .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.stagger-children .animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.stagger-children .animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.stagger-children .animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.stagger-children .animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.stagger-children .animate-on-scroll:nth-child(6) { transition-delay: 500ms; }

/* 3D Depth entrance */
.animate-depth {
  opacity: 0;
  transform: perspective(var(--perspective)) translateZ(-80px) translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slower) var(--ease-out-expo);
}

.animate-depth.is-visible {
  opacity: 1;
  transform: perspective(var(--perspective)) translateZ(0) translateY(0);
}

/* Scale entrance */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-spring);
}

.animate-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade only */
.animate-fade {
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-in-out-soft);
}

.animate-fade.is-visible {
  opacity: 1;
}

/* ─── COVER TRANSITION ───────────────────────────────── */
.cover-transitioning {
  animation: coverReveal var(--duration-cinematic) var(--ease-out-expo) forwards;
}

@keyframes coverReveal {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
  40% {
    opacity: 0.8;
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(1.05) translateY(-30px);
    filter: blur(8px);
    pointer-events: none;
  }
}

/* ─── DECORATIVE ELEMENT ANIMATIONS ──────────────────── */
.float-element {
  animation: floatSlow 8s var(--ease-in-out-soft) infinite;
}

.float-element--delay-1 { animation-delay: -2s; }
.float-element--delay-2 { animation-delay: -4s; }
.float-element--delay-3 { animation-delay: -6s; }

.shimmer-text {
  background: linear-gradient(
    120deg,
    var(--color-gold-dark) 0%,
    var(--color-gold-light) 25%,
    var(--color-gold) 50%,
    var(--color-gold-light) 75%,
    var(--color-gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ─── LINE DRAWING ───────────────────────────────────── */
@keyframes drawLine {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ─── BUTTON HOVER SHINE ─────────────────────────────── */
@keyframes btnShine {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}