/* animations.css — Minimalist motion system for services hub */

:root {
  --ease-enter:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:   cubic-bezier(0.4, 0.0, 1, 1);
  --ease-std:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-micro:  120ms;
  --dur-short:  240ms;
  --dur-medium: 400ms;
  --dur-long:   600ms;
}

/* ─── Reduced motion: instant fallbacks ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .section-enter,
  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .line-draw {
    transform: scaleX(1) !important;
    transition: none !important;
    animation: none !important;
  }

  .pulse-dot {
    animation: none !important;
    opacity: 1 !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── All animations wrapped in no-preference ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* ─── Scroll reveal system ──────────────────────────────────────────────── */

  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--dur-medium) var(--ease-enter),
      transform var(--dur-medium) var(--ease-enter);
  }

  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 {
    transition-delay: 80ms;
  }

  .reveal-delay-2 {
    transition-delay: 160ms;
  }

  .reveal-delay-3 {
    transition-delay: 240ms;
  }

  .reveal-left {
    opacity: 0;
    transform: translateX(-20px);
    transition:
      opacity var(--dur-medium) var(--ease-enter),
      transform var(--dur-medium) var(--ease-enter);
  }

  .reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
  }

  .section-enter {
    opacity: 0;
    transform: translateX(-12px);
    transition:
      opacity var(--dur-medium) var(--ease-enter),
      transform var(--dur-medium) var(--ease-enter);
  }

  .section-enter.revealed {
    opacity: 1;
    transform: translateX(0);
  }

  /* ─── Page load: hero entrance ──────────────────────────────────────────── */

  .hero-enter {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-long) var(--ease-enter),
      transform var(--dur-long) var(--ease-enter);
  }

  .hero-enter.loaded {
    opacity: 1;
    transform: translateY(0);
  }

  /* ─── Hover micro-interactions ──────────────────────────────────────────── */

  .card-hover {
    transition:
      transform var(--dur-short) var(--ease-std),
      box-shadow var(--dur-short) var(--ease-std);
  }

  .card-hover:hover {
    transform: translateY(-3px);
  }

  /* ─── Status pulse ──────────────────────────────────────────────────────── */

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
  }

  .pulse-dot {
    animation: pulse-dot 2s var(--ease-std) infinite;
  }

  /* ─── Line draw (decorative separators) ─────────────────────────────────── */

  @keyframes line-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .line-draw {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-medium) var(--ease-enter);
  }

  .line-draw.revealed {
    transform: scaleX(1);
  }

  /* ─── data-reveal: JS-driven initial hidden state ────────────────────────── */

  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
  }

  [data-reveal="left"] {
    transform: translateX(-20px);
  }

  [data-reveal="none"] {
    transform: none;
  }
}