/* =============================================================
   ANIMATIONS — entrance reveals + hover micro-interactions
   Triggered by IntersectionObserver in animations.js (adds .is-visible)
   ============================================================= */

/* Default state for any [data-animate] element */
[data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Variants */
[data-animate="fade"] { transform: none; }
[data-animate="slide-left"]  { transform: translateX(-24px); }
[data-animate="slide-right"] { transform: translateX(24px); }
[data-animate="slide-left"].is-visible,
[data-animate="slide-right"].is-visible { transform: none; }
[data-animate="zoom"] { transform: scale(0.96); }
[data-animate="zoom"].is-visible { transform: scale(1); }

/* Stagger children with --stagger ms delays */
[data-stagger] > * {
  transition-delay: calc(var(--i, 0) * 80ms);
}

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

/* Page enter */
@keyframes page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: page-fade var(--dur-base) var(--ease-out); }