/* ═══════════════════════════════════════════════════════════
   animations.css  —  Scroll reveal · Entrances · Motion system
   ReadyStack  ·  Website-first operations theme
═══════════════════════════════════════════════════════════ */

/* ─── Scroll Reveal ──────────────────────────────────────── */
/*
  Elements start invisible. JS adds .revealed when they
  enter the viewport via IntersectionObserver.
*/
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-xslow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-out);
  will-change: opacity, transform;
}

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

/* Stagger delay variants */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* Direction variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity var(--dur-xslow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-out);
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity var(--dur-xslow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-out);
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition:
    opacity var(--dur-xslow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-spring);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ─── Page Loader Sequence ───────────────────────────────── */
@keyframes loader-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loader-logo { animation: loader-fade-in .4s var(--ease-out) .1s both; }
.loader-track { animation: loader-fade-in .4s var(--ease-out) .2s both; }
.loader-label { animation: loader-fade-in .4s var(--ease-out) .3s both; }


/* Hero text entrances removed: the v4 hero (Hero.astro) runs its own
   CSS intro on load; these body.loaded rules replayed a second, competing
   animation on the same class names when the page loader finished. */

/* ─── Nav Entrance ───────────────────────────────────────── */
@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

body.loaded #site-header {
  animation: nav-drop .5s var(--ease-out) .1s both;
}

/* ─── Dashboard Panels ───────────────────────────────────── */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.loaded .dash-topbar {
  animation: panel-in .4s var(--ease-out) .7s both;
}
body.loaded .dash-score-panel {
  animation: panel-in .5s var(--ease-out) .9s both;
}

body.loaded .dash-operate-panel {
  animation: panel-in .5s var(--ease-out) 1.0s both;
}

body.loaded .dash-metrics-strip {
  animation: panel-in .4s var(--ease-out) 1.1s both;
}
/* ─── Magnetic Button ─────────────────────────────────────── */
.magnetic {
  transform-origin: center;
  will-change: transform;
  /* JS handles the translate; CSS just smooths the return */
  transition:
    transform .35s var(--ease-out),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}

/* ─── Shimmer loading skeleton ───────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
/* ─── Number Counter Flash ───────────────────────────────── */
@keyframes count-flash {
  0%   { color: var(--amber-300); }
  100% { color: var(--amber); }
}

.counting { animation: count-flash .1s ease-out; }

/* ─── Process Connector Fill ─────────────────────────────── */
/* Driven by JS adding .active class when section is visible */
.connector-fill {
  transition: width 1.4s var(--ease-out);
}


/* ─── Typewriter cursor blink ────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ─── Marquee pause on hover ─────────────────────────────── */
.marquee-outer:hover .marquee-track {
  animation-play-state: paused;
}

/* ─── Stagger children utility ───────────────────────────── */

/* ─── Reduced motion overrides ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.loaded #site-header,
  body.loaded .dash-topbar,
  body.loaded .dash-score-panel,
  body.loaded .dash-operate-panel,
  body.loaded .dash-metrics-strip {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .marquee-track { animation-duration: 60s; }

  .magnetic {
    transition: background var(--dur-fast), box-shadow var(--dur-fast);
  }
}