/* ==========================================================================
   LUXURY EDITORIAL WEDDING ANIMATIONS
   Clean, smooth, hardware-accelerated transitions
   ========================================================================== */

/* Screen Transitions */
.screen {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.screen.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Luxury Editorial Countdown Animation */
@keyframes luxuryCountdownIn {
  0% {
    transform: scale(0.7) translateY(10px);
    opacity: 0;
    filter: blur(4px);
  }
  30% {
    transform: scale(1.05) translateY(0);
    opacity: 1;
    filter: blur(0);
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

.countdown-number.animate-pulse {
  animation: luxuryCountdownIn 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Camera Shutter Flash - Full Screen Blinding White Strobe Burst */
.flash-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
  z-index: 999999;
}

.flash-overlay.flashing {
  opacity: 1 !important;
  transition: none !important;
}

/* Subtle Shimmer for Primary Action Button */
@keyframes goldShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.btn-luxury-shimmer {
  position: relative;
  background: linear-gradient(135deg, #B8860B 0%, #D4AF37 50%, #B8860B 100%);
  background-size: 200% auto;
  animation: goldShimmer 4s ease infinite;
}

/* Micro-interactions: Pop-in for mini thumbnails */
@keyframes popThumb {
  0% {
    transform: scale(0.3) rotate(-4deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.08) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pop-in-thumb {
  animation: popThumb 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Floating Petals / Soft Dust */
@keyframes softDrift {
  0% {
    transform: translateY(-20px) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(105vh) rotate(360deg) scale(1.1);
    opacity: 0;
  }
}

/* ==========================================================================
   3D WEDDING ENVELOPE OPENING ANIMATIONS
   ========================================================================== */
@keyframes waxPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.45);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 10px 28px rgba(184, 134, 11, 0.7);
  }
}

@keyframes flapOpen3D {
  0% {
    transform: rotateX(0deg);
    z-index: 6;
  }
  100% {
    transform: rotateX(180deg);
    z-index: 1;
  }
}

@keyframes letterSlideUp {
  0% {
    transform: translateY(12px);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(-170px) scale(1.02);
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
  }
}

@keyframes envelopeFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.96);
    visibility: hidden;
  }
}

@keyframes waxSealOpen {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -65%) scale(1.12);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -90%) scale(0.35);
    opacity: 0;
    pointer-events: none;
  }
}

.wax-seal-pulse {
  animation: waxPulse 2.2s ease-in-out infinite;
}

.envelope-wrapper.open .envelope-flap {
  animation: flapOpen3D 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.envelope-wrapper.open .envelope-wax-seal {
  animation: waxSealOpen 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.envelope-wrapper.open .envelope-letter {
  animation: letterSlideUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.envelope-overlay.hide-envelope {
  animation: envelopeFadeOut 0.65s ease forwards;
  pointer-events: none;
}