/* ==========================================================================
   Memberium — Animations (scroll-reveal, hovers)
   All gated behind prefers-reduced-motion (also killed globally in base.css).
   ========================================================================== */

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers usable as inline style="--reveal-delay:120ms" */
.stagger > * { transition-delay: var(--reveal-delay, 0ms); }

/* ---- Hero entrance (runs once on load) ---- */
.hero [data-fade] {
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn 0.7s var(--ease-out) forwards;
}
.hero [data-fade] { animation-delay: var(--delay, 0ms); }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* ---- Subtle floating accent in hero demo ---- */
.demo {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---- Nav link underline ---- */
.nav__links a {
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* ---- Card glow follow (subtle) ---- */
.card, .price, .int {
  position: relative;
  overflow: hidden;
}

/* ---- Reduce motion: kill floats/entrances ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero [data-fade] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .demo { animation: none !important; }
}