/* ============================================
   Animations CSS — keyframes, animation classes,
   prefers-reduced-motion
   ============================================ */

/* ═══════════════════════════════════════════
   nfstay Premium Animations
   Journey Timeline + Academy Grid
   Light theme only. Brand greens only.
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── FLOATING PARTICLES ── */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.particle {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: particleFloat var(--dur, 8s) ease-in-out infinite, particleFadeIn 1s ease forwards;
}
@keyframes particleFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  33% { transform: translateY(calc(var(--dy, -20px))) translateX(calc(var(--dx, 10px))); }
  66% { transform: translateY(calc(var(--dy, -20px) * -0.5)) translateX(calc(var(--dx, 10px) * -0.8)); }
}
@keyframes particleFadeIn { to { opacity: 1; } }

/* ── SHIMMER SWEEP ── */
.shimmer-card { position: relative; overflow: hidden; }
.shimmer-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: shimmerSweep 5s ease-in-out infinite;
  animation-delay: var(--shimmer-delay, 0s);
}
@keyframes shimmerSweep {
  0%, 80% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── GLOWING BORDER BREATHE ── */
.glow-breathe {
  animation: glowBreathe 2s ease-in-out infinite alternate;
}
@keyframes glowBreathe {
  0% { box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 0 0px rgba(30,154,128,0); }
  100% { box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 0 20px rgba(30,154,128,0.2), 0 0 40px rgba(30,154,128,0.08); }
}

/* ── EXPANDING GLOW RIPPLE ── */
.ripple-container { position: relative; }
.ripple-ring {
  position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: rgba(30,154,128,0.2);
  transform: scale(1); opacity: 0;
}
.ripple-ring.fire {
  animation: rippleExpand 800ms ease-out forwards;
}
.ripple-ring.fire-delay {
  animation: rippleExpand 800ms ease-out 200ms forwards;
}
@keyframes rippleExpand {
  0% { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(3); opacity: 0; }
}

/* ── MORPHING CARD EXPAND ── */
.morph-card {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 600ms cubic-bezier(0.34,1.56,0.64,1),
              transform 600ms cubic-bezier(0.34,1.56,0.64,1);
}
.morph-card.entered {
  opacity: 1;
  transform: scale(1);
}

/* ── LINE DRAW ── */
.journey-line {
  position: absolute;
  width: 2px;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top;
  background: linear-gradient(to bottom, #1e9a80, rgba(30,154,128,0.3));
  filter: drop-shadow(0 0 6px rgba(30,154,128,0.4));
  z-index: 0;
}

/* ── WORD STAGGER ENTRANCE ── */
.word-stagger .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.word-stagger.animate .word {
  opacity: 1;
  transform: translateY(0);
}


/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── SCROLL REVEAL ── */
.sr { opacity: 0; transform: translateY(24px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.sr.visible { opacity: 1; transform: translateY(0); }
.sr-child { opacity: 0; transform: translateY(16px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.sr-child.visible { opacity: 1; transform: translateY(0); }

/* ── Review Carousel ── */
@keyframes reviewSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.review-track:hover { animation-play-state: paused; }