/* =========================================================================
   REGISTRY.CO — ANIMATION UTILITIES
   Works with animations.js (IntersectionObserver).
   Elements with [data-animate] start hidden, become visible when in viewport.
   ========================================================================= */

/* ── Base: elements that animate on scroll ──────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.6s cubic-bezier(.2, .7, .2, 1),
    transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for sibling cards */
[data-animate]:nth-child(1) { transition-delay: 0ms; }
[data-animate]:nth-child(2) { transition-delay: 80ms; }
[data-animate]:nth-child(3) { transition-delay: 160ms; }
[data-animate]:nth-child(4) { transition-delay: 240ms; }
[data-animate]:nth-child(5) { transition-delay: 320ms; }
[data-animate]:nth-child(6) { transition-delay: 400ms; }

/* Fade-only variant */
[data-animate="fade"] {
  transform: none;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1);
}
[data-animate="fade"].is-visible { opacity: 1; }

/* Slide from left */
[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity   0.65s cubic-bezier(.2, .7, .2, 1),
    transform 0.65s cubic-bezier(.2, .7, .2, 1);
}
[data-animate="slide-left"].is-visible { opacity: 1; transform: none; }

/* Scale in */
[data-animate="scale"] {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity   0.55s cubic-bezier(.2, .7, .2, 1),
    transform 0.55s cubic-bezier(.34, 1.56, .64, 1);
}
[data-animate="scale"].is-visible { opacity: 1; transform: scale(1); }

/* ── Connector line (register section) ──────────────────────────────────── */
.js-reveal-connector {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s 0.15s cubic-bezier(.2, .7, .2, 1);
}
.js-reveal-connector.is-visible { transform: scaleX(1); }

/* ── Respect prefers-reduced-motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate="fade"],
  [data-animate="slide-left"],
  [data-animate="scale"],
  .js-reveal-connector {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}