/* ==========================================================================
   Animations & Transitions - Thái Bảo Studio Clone
   ========================================================================== */

/* Ken Burns effect for Hero background */
@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -1%);
  }
  100% {
    transform: scale(1.04) translate(1%, 0.5%);
  }
}

.ken-burns {
  animation: kenBurns 24s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

/* Staggered Blur to Clear Reveal for Hero Typography */
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(35px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

.anim-blur-fade {
  animation: blurFadeIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-delay-1 {
  animation-delay: 0.2s;
}

.anim-delay-2 {
  animation-delay: 0.6s;
}

.anim-delay-3 {
  animation-delay: 1.2s;
}

.anim-delay-4 {
  animation-delay: 1.8s;
}

/* Scroll Reveal Classes (Intersection Observer driven) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1s ease;
}

.reveal-fade.active {
  opacity: 1;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Subtle Shimmer on Gold Accents */
@keyframes goldShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-gold {
  background: linear-gradient(90deg, #B8860B 0%, #FAF0CD 50%, #B8860B 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 6s infinite linear;
}

/* Light leak overlay for wedding cinematic vibe */
.light-leak {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(184, 134, 11, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
  z-index: 2;
  animation: pulseGlow 12s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% {
    transform: scale(0.95);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}