/* ==========================================================================
   ANIMACIONES CINEMATOGRÁFICAS & TRANSICIONES - INVITACIÓN DE BODA
   ========================================================================== */

/* 1. Animación de revelado escalonado para elementos dentro de la diapositiva activa */
.story-slide .animate-stagger {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1), transform 1.1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Retardo según el orden (--order: 1, 2, 3, etc.) */
.story-slide.active .animate-stagger {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--order, 1) * 0.22s);
}

/* Efecto especial para fotos: inicio con escala suave 0.94 -> 1.0 */
.story-slide .photo-frame-wrapper.animate-stagger,
.story-slide .gallery-composition.animate-stagger {
  transform: translateY(15px) scale(0.94);
}

.story-slide.active .photo-frame-wrapper.animate-stagger,
.story-slide.active .gallery-composition.animate-stagger {
  transform: translateY(0) scale(1);
}

/* 2. Suave vaivén de las hojas botánicas decorativas */
@keyframes botanicalFloat {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(1.5deg) scale(1.02);
  }
  100% {
    transform: rotate(-1.5deg) scale(0.99);
  }
}

/* 3. Rotación extremadamente lenta y elegante de la corona botánica */
@keyframes gentleRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 4. Ondas de sonido animadas para el botón de música */
@keyframes audioWave {
  0%, 100% {
    height: 4px;
    opacity: 0.6;
  }
  50% {
    height: 16px;
    opacity: 1;
  }
}

/* 5. Destellos dorados parpadeantes */
@keyframes sparkleTwinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 0 10px #FFDF79, 0 0 20px rgba(212, 175, 55, 0.6);
  }
}

/* 6. Indicador de deslizamiento (Flecha que rebota sutilmente) */
@keyframes bounceVertical {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* 7. Pulso suave del sello de cera y botón RSVP */
@keyframes sealPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.25;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 8px 25px rgba(197, 168, 128, 0.35);
  }
  50% {
    box-shadow: 0 12px 35px rgba(197, 168, 128, 0.65), 0 0 0 6px rgba(197, 168, 128, 0.15);
  }
}

/* 8. Destello dorado barriendo suavemente (Shimmer effect) */
.shimmer-gold {
  position: relative;
  overflow: hidden;
}

.shimmer-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(30deg);
  animation: goldShimmerSweep 5s infinite;
  pointer-events: none;
}

@keyframes goldShimmerSweep {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }
  25%, 100% {
    transform: translateX(100%) rotate(30deg);
  }
}

/* 9. Animaciones de Medallón Monograma de Lujo */
@keyframes floatMedallion {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.5deg);
  }
}

@keyframes pulseMedallionGlow {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

@keyframes slowGlowSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}