/**
 * =========================================================================
 * ANIMATIONS & TRANSITIONS (CAI TIẾN TRẢI NGHIỆM ĐẬM ĐÀ NGHỆ THUẬT)
 * Chuyện Tình Chúng Mình – Kỷ Niệm Ngày Cưới
 * =========================================================================
 */

/* 1. KEYFRAME ANIMATIONS */

@keyframes mouseWheel {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(8px);
  }
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(184, 139, 74, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(184, 139, 74, 0);
  }
}

/* Equalizer nhảy theo điệu nhạc */
@keyframes eqJump {
  0% { height: 3px; }
  100% { height: 13px; }
}

/* Vòng giây nhấp nháy phát sáng */
@keyframes ringGlow {
  0% {
    filter: drop-shadow(0 0 2px rgba(158, 61, 52, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(158, 61, 52, 0.8));
  }
}

/* Mở lá thư niêm phong sáp */
@keyframes parchmentUnfold {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(40px) rotateX(-12deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
  }
}

/* Hạt tim và hoa chúc phúc bay tung tóe (Love Burst Particles) */
.love-burst-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1.5rem;
  animation: particleFly 1.3s cubic-bezier(0.12, 0.82, 0.38, 1) forwards;
  will-change: transform, opacity;
}

@keyframes particleFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -100px))) scale(var(--scale, 1.2)) rotate(var(--rot, 90deg));
  }
}

/* 2. SCROLL REVEAL UTILITIES */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.reveal-fade.is-revealed {
  opacity: 1;
}

/* Staggered Delays */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }

/* 3. HERO SEQUENTIAL ENTRANCES */

.hero-lotus-seal {
  animation: heroFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-badge {
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero-title {
  animation: heroFadeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero-tagline {
  animation: heroFadeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.hero-scroll-btn {
  animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

/* 4. PREFERS-REDUCED-MOTION OVERRIDES */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-fade,
  .timeline-item,
  .hero-badge,
  .hero-title,
  .hero-tagline,
  .hero-scroll-btn,
  .letter-parchment {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-scroll-wheel,
  .eq-bar,
  .ring-pulse,
  .love-burst-particle {
    animation: none !important;
  }
}