/* ===========================================================
   animations.css — reusable keyframes and enter transitions
   =========================================================== */

/* ---------- Trace pulse travel (landing signature element) ----------
   Paired with .trace-pulse in landing.css, which sets
   offset-path + animation-name: trace-travel. */
@keyframes trace-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- Generic fade / slide utilities ----------
   Applied by resume.js / app.js when injecting rendered
   sections, so content enters in a staggered sequence rather
   than popping in all at once. */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up-sm {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.fade-in {
  animation: fade-in var(--dur-med) var(--ease-standard) both;
}

.slide-up {
  animation: slide-up var(--dur-med) var(--ease-standard) both;
}

.slide-up-sm {
  animation: slide-up-sm var(--dur-fast) var(--ease-standard) both;
}

.scale-in {
  animation: scale-in var(--dur-med) var(--ease-standard) both;
}

/* ---------- Stagger helper ----------
   app.js/resume.js add both a reveal class (above) and a
   .stagger-<n> class to sibling elements (project cards,
   timeline items, chips) so they cascade in rather than
   animate in lockstep. Covers up to 8 siblings; anything
   beyond that just shares the last delay. */
.stagger-1 { animation-delay: 40ms; }
.stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 120ms; }
.stagger-4 { animation-delay: 160ms; }
.stagger-5 { animation-delay: 200ms; }
.stagger-6 { animation-delay: 240ms; }
.stagger-7 { animation-delay: 280ms; }
.stagger-8 { animation-delay: 320ms; }

/* ---------- Screen transitions ----------
   Complements the .is-leaving (landing.css) and .is-visible
   (resume.css) state classes toggled by router.js. */
.landing.is-leaving {
  animation: fade-out-scale var(--dur-med) var(--ease-standard) forwards;
}

@keyframes fade-out-scale {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.98); }
}

.resume.is-visible .resume-header {
  animation: slide-up var(--dur-med) var(--ease-standard) both;
}

.resume.is-visible .resume-section {
  animation: slide-up var(--dur-med) var(--ease-standard) both;
}

.resume.is-visible .resume-section:nth-of-type(1) { animation-delay: 60ms; }
.resume.is-visible .resume-section:nth-of-type(2) { animation-delay: 110ms; }
.resume.is-visible .resume-section:nth-of-type(3) { animation-delay: 160ms; }
.resume.is-visible .resume-section:nth-of-type(4) { animation-delay: 210ms; }
.resume.is-visible .resume-section:nth-of-type(5) { animation-delay: 260ms; }
.resume.is-visible .resume-section:nth-of-type(6) { animation-delay: 310ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .slide-up, .slide-up-sm, .scale-in,
  .landing.is-leaving,
  .resume.is-visible .resume-header,
  .resume.is-visible .resume-section {
    animation: none !important;
  }
}