/* ============================================================
   VYNMONT — animations.css
   Keyframes · Scroll reveal states · Motion preferences
   ============================================================ */

/* ------------------------------------------------------------
   SCROLL REVEAL — initial hidden state
   GSAP sets these elements to opacity:1 / y:0 on scroll entry.
   The .reveal class is the pre-animation state.
   The JS removes nothing — GSAP drives the transition inline.
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* Staggered children — parent carries the trigger, children stagger */
.reveal-children > * {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* Horizontal reveal variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  will-change: opacity, transform;
}

/* Scale reveal for proof numbers */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94) translateY(20px);
  will-change: opacity, transform;
}

/* ------------------------------------------------------------
   REDUCED MOTION — disable all animation states
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-children > *,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto;
  }

  .hero-word {
    opacity: 1 !important;
    transform: none !important;
  }

  .section-hero__sub,
  .section-hero__cta {
    opacity: 1 !important;
    transform: none !important;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   KEYFRAMES — used for CSS-only micro-animations
   ------------------------------------------------------------ */

/* Subtle breathing pulse on the gold accent line */
@keyframes pulse-gold {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* Scroll line sweep — used in hero scroll indicator */
@keyframes scroll-line {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Fade up — used for cookie banner entrance */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Intro overlay fade-out */
@keyframes overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

/* Spark burst — CSS fallback if GSAP not loaded */
@keyframes spark-burst {
  0%   { transform: scale(0); opacity: 1; }
  60%  { transform: scale(1.4); opacity: 0.9; }
  100% { transform: scale(10); opacity: 0; }
}

/* FAQ icon spin */
@keyframes icon-open {
  from { transform: rotate(0deg); }
  to   { transform: rotate(45deg); }
}

/* Number counter shimmer — decorative on stat numbers */
@keyframes stat-shimmer {
  0%   { color: var(--color-offwhite); }
  50%  { color: var(--color-gold-light); }
  100% { color: var(--color-offwhite); }
}

/* ------------------------------------------------------------
   NAV TRANSITION HELPERS
   ------------------------------------------------------------ */
.nav {
  will-change: background, backdrop-filter;
}

/* ------------------------------------------------------------
   INTRO — entrance classes applied by JS after animation
   ------------------------------------------------------------ */
.intro-overlay.is-exiting {
  animation: overlay-out 0.6s ease forwards;
  pointer-events: none;
}

/* Language button focus ring — matches 5px btn radius + 4px inset */
.intro-overlay__lang-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.intro-overlay__lang-btn:focus-visible::after {
  border-color: var(--color-gold-light);
}


/* ------------------------------------------------------------
   SECTION DIVIDERS — atmospheric gradient lines
   ------------------------------------------------------------ */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-border) 30%, var(--color-border) 70%, transparent 100%);
  margin: 0;
}

/* ------------------------------------------------------------
   COUNTER NUMBER — active animation state
   ------------------------------------------------------------ */
.stat__number.is-counting {
  animation: stat-shimmer 2.2s ease;
}

/* ------------------------------------------------------------
   CARD HOVER — smooth shadow lift
   ------------------------------------------------------------ */
.proof-card,
.card-package {
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}
.proof-card:hover,
.card-package:hover {
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   HERO SCROLL INDICATOR ANIMATION
   ------------------------------------------------------------ */
.section-hero__scroll-line {
  overflow: hidden;
}
.section-hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  animation: scroll-line 2.4s ease-in-out infinite 2s;
}