/* ============================================================
   ANIMATIONS — FANUCAiLeadCV
   Keyframes, scroll-reveal system, and motion control.

   All animations are OPT-IN via data attributes or utility
   classes. A single prefers-reduced-motion query at the
   bottom disables them globally — it is always the last rule
   in this file so it always wins the cascade.

   Usage:
     Scroll-reveal:   <div data-reveal="slide-up">
     Stagger group:   <ul data-reveal-stagger>
     Named keyframe:  animation: slide-up-fade var(--duration-reveal) var(--ease-out);
   ============================================================ */

/* ----------------------------------------------------------
   SCROLL-REVEAL SYSTEM
   scroll-reveal.js adds .is-visible via IntersectionObserver.
   Elements with [data-reveal] start hidden; animate on entry.
---------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transition:
    opacity   var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

/* Variant: slide up from below */
[data-reveal="slide-up"] {
  transform: translateY(var(--space-8));
}

/* Variant: slide in from right */
[data-reveal="slide-left"] {
  transform: translateX(var(--space-8));
}

/* Variant: slide in from left */
[data-reveal="slide-right"] {
  transform: translateX(calc(-1 * var(--space-8)));
}

/* Variant: scale up from slightly smaller */
[data-reveal="scale-in"] {
  transform: scale(0.92);
}

/* Revealed state — applied by JS */
[data-reveal].is-visible {
  opacity:   1;
  transform: none;
}

/* ----------------------------------------------------------
   STAGGER GROUPS
   Parent gets [data-reveal-stagger]; children animate in
   sequence with incremental delays.
   Supports up to 8 children; extend if needed.
---------------------------------------------------------- */

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(var(--space-6));
  transition:
    opacity   var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay:   0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay:  80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 560ms; }

[data-reveal-stagger].is-visible > * {
  opacity:   1;
  transform: none;
}

/* ----------------------------------------------------------
   KEYFRAMES
---------------------------------------------------------- */

/* Basic fade in */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide up with fade — general-purpose entry */
@keyframes slide-up-fade {
  from {
    opacity:   0;
    transform: translateY(var(--space-6));
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Clip-path word reveal — hero headline (CSS only, no JS) */
@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0   0% 0 0); }
}

/* Scale in from slightly smaller */
@keyframes scale-in {
  from {
    opacity:   0;
    transform: scale(0.90);
  }
  to {
    opacity:   1;
    transform: scale(1);
  }
}

/* Pulse glow — for accent-coloured elements (CTA buttons, nav highlight) */
@keyframes pulse-glow {
  0%,
  100% { box-shadow: var(--shadow-accent); }
  50%  { box-shadow: var(--shadow-accent-strong); }
}

/* Scanline sweep — hero overlay texture animation */
@keyframes scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

/* SVG stroke draw — timeline track, language progress rings
   Requires the element to have stroke-dasharray = total-length
   and stroke-dashoffset starting at total-length. */
@keyframes stroke-draw {
  from { stroke-dashoffset: var(--stroke-total, 1000); }
  to   { stroke-dashoffset: 0; }
}

/* Counter odometer — used by counters.js */
@keyframes count-up {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero headline — per-word stagger wrapper */
.hero__headline .word {
  display:    inline-block;
  clip-path:  inset(0 100% 0 0);
  animation:  clip-reveal var(--duration-slower) var(--ease-out) both;
}

/* Stagger delays for up to 8 headline words */
.hero__headline .word:nth-child(1) { animation-delay: 0.10s; }
.hero__headline .word:nth-child(2) { animation-delay: 0.22s; }
.hero__headline .word:nth-child(3) { animation-delay: 0.34s; }
.hero__headline .word:nth-child(4) { animation-delay: 0.46s; }
.hero__headline .word:nth-child(5) { animation-delay: 0.58s; }
.hero__headline .word:nth-child(6) { animation-delay: 0.70s; }
.hero__headline .word:nth-child(7) { animation-delay: 0.82s; }
.hero__headline .word:nth-child(8) { animation-delay: 0.94s; }

/* ----------------------------------------------------------
   TIMELINE TRACK LINE ANIMATION
   .timeline::before is the vertical connector line.
   Adding .timeline--visible (by timeline.js IntersectionObserver)
   triggers a scaleY(0 → 1) transition from the top downward.
   This gives the "track drawing" effect as the section enters view.
---------------------------------------------------------- */

.timeline::before {
  transform-origin: top center;
  transform:        scaleY(0);
  transition:       transform 0.9s var(--ease-out);
}

.timeline.timeline--visible::before {
  transform: scaleY(1);
}

/* ----------------------------------------------------------
   PREFERS-REDUCED-MOTION — GLOBAL KILL SWITCH
   This block MUST remain the last rule in this file.
   It overrides every animation declared above without needing
   to touch individual component rules. Duration set to 0.01ms
   (not 0) to avoid a snap-to-end flash on some browsers.
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  /* Snap scroll-reveal elements to their visible state */
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }

  /* Hero headline: show all words immediately */
  .hero__headline .word {
    clip-path:  none !important;
    animation:  none !important;
    opacity:    1 !important;
  }

  /* Timeline track: always fully visible */
  .timeline::before {
    transform:  scaleY(1) !important;
    transition: none !important;
  }

  /* Skill bars, language rings — handled in their own files */
  .skill-bar__fill,
  .lang-ring__progress {
    animation:  none !important;
    transition: none !important;
  }

  /* Pulse glow: keep shadow, remove animation */
  [style*="pulse-glow"] {
    animation: none !important;
  }
}