/* ============================================================
   WEDDING-10 | animations.css
   Keyframes & Scroll-Triggered Staggered Animations (2026)
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. ENTRY ANIMATIONS — used by Intersection Observer
───────────────────────────────────────────────────────────── */

/* Base: every animated element starts hidden */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger-child {
  opacity: 0;
  will-change: opacity, transform;
}

/* Fade in */
.reveal {
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  transform: translateY(0);
}

/* Fade up (most common) */
.reveal-up {
  transform: translateY(36px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

/* Slide from left */
.reveal-left {
  transform: translateX(-40px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

/* Slide from right */
.reveal-right {
  transform: translateX(40px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

/* Scale up */
.reveal-scale {
  transform: scale(0.94);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

/* ── Visible state (toggled by JS) ── */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.stagger-child.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Stagger delays (for children inside .stagger-parent) ── */
.stagger-parent .stagger-child:nth-child(1) {
  transition-delay: 0ms;
}
.stagger-parent .stagger-child:nth-child(2) {
  transition-delay: 90ms;
}
.stagger-parent .stagger-child:nth-child(3) {
  transition-delay: 180ms;
}
.stagger-parent .stagger-child:nth-child(4) {
  transition-delay: 270ms;
}
.stagger-parent .stagger-child:nth-child(5) {
  transition-delay: 360ms;
}
.stagger-parent .stagger-child:nth-child(6) {
  transition-delay: 450ms;
}
.stagger-parent .stagger-child:nth-child(7) {
  transition-delay: 540ms;
}
.stagger-parent .stagger-child:nth-child(8) {
  transition-delay: 630ms;
}

/* Stagger child shared prop */
.stagger-child {
  transform: translateY(28px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

/* ─────────────────────────────────────────────────────────────
   2. HERO ENTRANCE — fires once on page load
───────────────────────────────────────────────────────────── */
@keyframes heroTagIn {
  from {
    opacity: 0;
    letter-spacing: 0.5em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.3em;
  }
}
@keyframes heroNameIn {
  from {
    opacity: 0;
    transform: translateY(32px) skewY(1.5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
  }
}
@keyframes heroAmpIn {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes heroBadgeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroActionsIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero animation classes */
.hero-tag {
  animation: heroTagIn 1s var(--ease-out-expo) 0.2s both;
}
.hero-name-1 {
  animation: heroNameIn 1s var(--ease-out-expo) 0.4s both;
}
.hero-name-amp {
  animation: heroAmpIn 0.8s var(--ease-out-expo) 0.65s both;
}
.hero-name-2 {
  animation: heroNameIn 1s var(--ease-out-expo) 0.85s both;
}
.hero-date-badge {
  animation: heroBadgeIn 0.9s var(--ease-out-expo) 1.1s both;
}
.hero-actions {
  animation: heroActionsIn 0.9s var(--ease-out-expo) 1.3s both;
}

/* ─────────────────────────────────────────────────────────────
   3. OPENING SCREEN ANIMATIONS
───────────────────────────────────────────────────────────── */
@keyframes openingGreetIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes openingCoupleIn {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes openingBtnIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes envelopePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 163, 64, 0);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(201, 163, 64, 0.1);
  }
}

.opening-greeting {
  animation: openingGreetIn 0.8s var(--ease-out-expo) 0.2s both;
}
.opening-guest {
  animation: openingGreetIn 0.8s var(--ease-out-expo) 0.4s both;
}
.opening-couple {
  animation: openingCoupleIn 1s var(--ease-out-expo) 0.55s both;
}
.opening-date {
  animation: openingGreetIn 0.7s var(--ease-out-expo) 0.9s both;
}
.opening-btn {
  animation: openingBtnIn 0.8s var(--ease-out-expo) 1.1s both;
}

/* ─────────────────────────────────────────────────────────────
   4. COUNTDOWN FLIP ANIMATION
───────────────────────────────────────────────────────────── */
@keyframes countFlip {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: translateY(10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.countdown-flip {
  animation: countFlip 0.45s var(--ease-out-expo);
}

/* ─────────────────────────────────────────────────────────────
   5. GOLD SHIMMER (for borders / lines)
───────────────────────────────────────────────────────────── */
@keyframes goldShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.shimmer-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-gold-400) 40%,
    var(--color-gold-200) 50%,
    var(--color-gold-400) 60%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: goldShimmer 3s linear infinite;
}

/* ─────────────────────────────────────────────────────────────
   6. FLOATING PETALS (decorative)
───────────────────────────────────────────────────────────── */
.petals-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -40px;
  width: 10px;
  height: 10px;
  background: radial-gradient(
    circle at 40% 30%,
    var(--color-gold-300),
    var(--color-gold-700)
  );
  border-radius: 0 70% 70% 70%;
  opacity: 0;
  animation: petalFall linear infinite;
}
@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(0deg) scale(0);
  }
  5% {
    opacity: 0.65;
  }
  95% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(110vh) rotate(540deg) scale(0.5);
  }
}

/* ─────────────────────────────────────────────────────────────
   7. PARALLAX — subtle depth on scroll (applied via JS transform)
───────────────────────────────────────────────────────────── */
.parallax-slow {
  will-change: transform;
}
.parallax-fast {
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────
   8. PULSE RING (for story dots, or CTA)
───────────────────────────────────────────────────────────── */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
.pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-gold-500);
  animation: pulseRing 2.4s var(--ease-out-expo) infinite;
}

/* ─────────────────────────────────────────────────────────────
   9. TEXT REVEAL WITH CLIP
───────────────────────────────────────────────────────────── */
@keyframes clipReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}
.text-clip-reveal {
  display: inline-block;
  animation: clipReveal 1s var(--ease-out-expo) both;
}

/* ─────────────────────────────────────────────────────────────
   10. MUSIC PLAYER ENTRANCE
───────────────────────────────────────────────────────────── */
@keyframes playerSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#music-player {
  animation: playerSlideIn 0.7s var(--ease-out-expo) 1.8s both;
}
#btn-ig-story {
  animation: playerSlideIn 0.7s var(--ease-out-expo) 2s both;
}

/* ─────────────────────────────────────────────────────────────
   11. TOAST NOTIFICATION
───────────────────────────────────────────────────────────── */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}
#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: 12px 24px;
  background: rgba(22, 42, 36, 0.95);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-gold-200);
  backdrop-filter: blur(20px);
  display: none;
  white-space: nowrap;
}
#toast.show {
  display: block;
  animation: toastIn 0.4s var(--ease-out-expo) forwards;
}
#toast.hide {
  animation: toastOut 0.3s var(--ease-in-out) forwards;
}

/* ─────────────────────────────────────────────────────────────
   12. SECTION HEADER ANIMATION
───────────────────────────────────────────────────────────── */
@keyframes sectionTagReveal {
  from {
    opacity: 0;
    letter-spacing: 0.4em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.25em;
  }
}
.section-tag.is-visible {
  animation: sectionTagReveal 0.8s var(--ease-out-expo) forwards;
}

/* ─────────────────────────────────────────────────────────────
   13. SMOOTH IMAGE LOAD
───────────────────────────────────────────────────────────── */
@keyframes imgFadeLoad {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
img.loaded {
  animation: imgFadeLoad 0.6s var(--ease-out-expo) forwards;
}