/* ==========================================================================
   ANIMATIONS.CSS
   Restrained, luxury-appropriate motion. Everything here is short,
   easing-driven, and disabled entirely under prefers-reduced-motion
   (handled globally in styles.css and via main.js's .reduce-motion class).
   ========================================================================== */

/* --------------------------- SCROLL REVEAL --------------------------- */
.reveal, [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}
.reveal.is-visible, [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helper: apply data-reveal-delay="1..6" for a subtle cascade */
[data-reveal-delay="1"] { transition-delay: 0.06s; }
[data-reveal-delay="2"] { transition-delay: 0.12s; }
[data-reveal-delay="3"] { transition-delay: 0.18s; }
[data-reveal-delay="4"] { transition-delay: 0.24s; }
[data-reveal-delay="5"] { transition-delay: 0.3s; }
[data-reveal-delay="6"] { transition-delay: 0.36s; }

.reduce-motion .reveal,
.reduce-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ------------------------------ HERO MOTION ------------------------------ */
@keyframes gentle-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
.hero__glow { animation: gentle-glow 9s ease-in-out infinite; }

@keyframes soft-drift {
  0% { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 4% 6%, 96% 94%; }
}
.hero__bg-texture {
  animation: soft-drift 22s ease-in-out infinite alternate;
  background-size: 140% 140%;
}

@keyframes logo-reveal {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__visual-frame {
  animation: logo-reveal 1s var(--ease-standard) both;
  animation-delay: 0.15s;
}

@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow { animation: fade-up-in 0.7s var(--ease-standard) both; }
.hero__title { animation: fade-up-in 0.8s var(--ease-standard) both; animation-delay: 0.08s; }
.hero__tagline { animation: fade-up-in 0.8s var(--ease-standard) both; animation-delay: 0.16s; }
.hero__lead { animation: fade-up-in 0.8s var(--ease-standard) both; animation-delay: 0.24s; }
.hero__cta-group { animation: fade-up-in 0.8s var(--ease-standard) both; animation-delay: 0.32s; }

.reduce-motion .hero__glow,
.reduce-motion .hero__bg-texture,
.reduce-motion .hero__visual-frame,
.reduce-motion .hero__eyebrow,
.reduce-motion .hero__title,
.reduce-motion .hero__tagline,
.reduce-motion .hero__lead,
.reduce-motion .hero__cta-group {
  animation: none !important;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}
.hero__scroll-cue-line { animation: scroll-cue-bounce 2.4s ease-in-out infinite; }

/* ------------------------------ GOLD LINE DRAW ------------------------------ */
@keyframes draw-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.gold-divider.reveal.is-visible { animation: draw-line 0.9s var(--ease-standard) both; transform-origin: left; }
.gold-divider--center.reveal.is-visible { transform-origin: center; }

/* ------------------------------ LIGHTBOX FADE ------------------------------ */
.lightbox {
  animation: fade-up-in 0.3s var(--ease-standard) both;
}

/* ------------------------------ FOCUS RING PULSE (subtle) ------------------------------ */
.btn--gold:focus-visible {
  box-shadow: 0 0 0 4px rgba(181, 137, 47, 0.25);
}