/*
 * animations.css
 * ─────────────────────────────────────────────────────────────
 * Keyframe animations, scroll-reveal transitions, stagger
 * delays, and interactive micro-interactions.
 *
 * prefers-reduced-motion is handled globally in layout.css.
 */

/* ── Availability dot pulse ── */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(70, 214, 201, 0.35);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(70, 214, 201, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(70, 214, 201, 0);
  }
}

/* ── Scroll reveal ── */
/*
 * Elements with [data-reveal] start hidden + translated down.
 * js/reveal.js adds .is-visible once they enter the viewport.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out-expo),
    transform 700ms var(--ease-out-expo);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger: CSS-only delay for grid children ── */
/*
 * Add data-stagger to a grid parent.
 * Children with [data-reveal] get incremental delays automatically.
 */
[data-stagger] > [data-reveal]:nth-child(1) {
  transition-delay: 0ms;
}
[data-stagger] > [data-reveal]:nth-child(2) {
  transition-delay: 80ms;
}
[data-stagger] > [data-reveal]:nth-child(3) {
  transition-delay: 160ms;
}
[data-stagger] > [data-reveal]:nth-child(4) {
  transition-delay: 240ms;
}
[data-stagger] > [data-reveal]:nth-child(5) {
  transition-delay: 320ms;
}
[data-stagger] > [data-reveal]:nth-child(6) {
  transition-delay: 400ms;
}

/* ── Global interactive transitions ── */
a,
button,
[role="button"] {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}