/**
 * Cinewed Photography - Luxury Cinematic Animations & Text Effects
 * Designed for High-End Editorial Wedding Website
 */

/* ========================================================
   1. HERO TEXT & ELEMENT ENTRANCE ANIMATIONS (ON LOAD)
   ======================================================== */
@keyframes heroEyebrowIn {
  from {
    opacity: 0;
    transform: translateY(-14px);
    letter-spacing: 0.18em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.35em;
  }
}

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

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

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

@keyframes heroScrollBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

/* Applied Hero Entrance Classes (Fail-safe visibility + cinematic entrance) */
.hero-brand-eyebrow {
  opacity: 1;
  animation: heroEyebrowIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}

.hero-headline {
  opacity: 1;
  animation: heroHeadlineIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.hero-tagline {
  opacity: 1;
  animation: heroTaglineIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.hero-cta-group {
  opacity: 1;
  animation: heroCtaIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s backwards;
}

.hero-scroll-indicator {
  animation: heroScrollBounce 2.4s ease-in-out infinite 1.2s;
}

/* ========================================================
   2. LUXURY GOLD SHIMMER TEXT EFFECT
   ======================================================== */
@keyframes goldShimmerSweep {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.text-shimmer {
  background: linear-gradient(
    90deg, 
    #F3EEE6 0%, 
    #F3EEE6 30%, 
    #FFF6E0 50%, 
    #D8C6A6 60%, 
    #F3EEE6 75%, 
    #F3EEE6 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmerSweep 7s ease-in-out infinite;
  display: inline-block;
}

.gold-glow-text {
  text-shadow: 0 0 20px rgba(216, 198, 166, 0.3), 0 0 40px rgba(216, 198, 166, 0.1);
}

/* ========================================================
   3. SCROLL REVEAL ANIMATIONS (OBSERVER-DRIVEN)
   ======================================================== */
/* Fade Up (Smooth Cinematic Deceleration) */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In (Pure Opacity Glide) */
.fade-in {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.fade-in.is-inview {
  opacity: 1;
}

/* Scale & Float In */
.reveal-scale {
  opacity: 0;
  transform: scale(0.96) translateY(20px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Image Reveal with Smooth De-zoom */
.reveal-image {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-image.is-inview {
  opacity: 1;
  transform: scale(1);
}

/* Decorative Gold Line Expansion */
.reveal-line {
  width: 0% !important;
  opacity: 0;
  transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.reveal-line.is-inview {
  width: 100% !important;
  opacity: 1;
}

/* Section Header Staggered Children on View */
.section-header .section-eyebrow {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.is-inview .section-eyebrow {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 0.28em;
}

.section-header .section-title {
  opacity: 0;
  transform: translateY(22px);
  background: linear-gradient(
    90deg, 
    #F3EEE6 0%, 
    #F3EEE6 35%, 
    #FFF8EB 50%, 
    #D8C6A6 60%, 
    #F3EEE6 75%, 
    #F3EEE6 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmerSweep 9s ease-in-out infinite;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.section-header.is-inview .section-title {
  opacity: 1;
  transform: translateY(0);
}

.section-header .section-subtitle {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}

.section-header.is-inview .section-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================
   4. STAGGER DELAYS
   ======================================================== */
.delay-1 { transition-delay: 0.10s !important; }
.delay-2 { transition-delay: 0.20s !important; }
.delay-3 { transition-delay: 0.30s !important; }
.delay-4 { transition-delay: 0.40s !important; }
.delay-5 { transition-delay: 0.50s !important; }
.delay-6 { transition-delay: 0.60s !important; }

/* ========================================================
   5. KEN BURNS BACKGROUND MEDIA ZOOM
   ======================================================== */
@keyframes kenBurnsSlow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

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

/* ========================================================
   6. CARD & BUTTON MICRO-INTERACTION POLISH
   ======================================================== */
/* Experience Cards Hover Elevation */
.experience-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease;
}

.experience-card:hover {
  transform: translateY(-7px);
  border-color: var(--accent-gold);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(216, 198, 166, 0.12);
}

.experience-card:hover .experience-title {
  color: var(--accent-gold);
}

/* Story Cards Hover Zoom */
.story-card .story-image-wrap img {
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.35, 1), filter 0.8s ease;
}

.story-card:hover .story-image-wrap img {
  transform: scale(1.05);
  filter: brightness(1.04);
}

/* Luxury Button Gold Ambient Glow */
.btn-luxury-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-luxury-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(216, 198, 166, 0.35);
  background-color: var(--accent-gold-hover);
}

.btn-luxury-secondary {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-luxury-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  box-shadow: 0 6px 20px rgba(216, 198, 166, 0.15);
}

/* Floating Badges */
@keyframes luxuryFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-float {
  animation: luxuryFloat 4s ease-in-out infinite;
}

/* Pulse Glow */
@keyframes luxuryPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(216, 198, 166, 0.35);
  }
  50% {
    box-shadow: 0 0 24px 6px rgba(216, 198, 166, 0.15);
  }
}

.animate-pulse-gold {
  animation: luxuryPulseGlow 3.5s ease-in-out infinite;
}

/* ========================================================
   7. WORD-BY-WORD MASKED TEXT REVEALS
   ======================================================== */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.28em;
}

.word-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
  will-change: transform, opacity;
}

.is-inview .word-inner,
.is-inview.word-mask .word-inner {
  transform: translateY(0);
  opacity: 1;
}