/* =============================================================================
   motion.css :: every animation lives here so it can be tuned or removed
   in one place. Scroll reveals are driven by [data-reveal] plus the .in-view
   class added by js/motion.js.
   ============================================================================= */

/* --- Base reveal: rises and fades in ------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].in-view { opacity: 1; transform: none; }

/* --- Wipe: slabs sweep in from the left ----------------------------------
   Deliberately does NOT use clip-path on the element itself. A clipped element
   reports an empty intersection rectangle, so IntersectionObserver can never
   see it and the reveal never fires. The wipe is done with an overlay panel
   that slides away instead, which leaves the element's own geometry intact. */
[data-reveal="wipe"] {
  transform: translateX(-32px);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="wipe"].in-view { transform: none; }

[data-reveal="wipe"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  pointer-events: none;
  z-index: 1;
}
[data-reveal="wipe"].in-view::after { transform: scaleX(0); }

/* --- Scale: cards settle into place -------------------------------------- */
[data-reveal="scale"] {
  transform: translateY(34px) scale(0.965);
  transform-origin: center bottom;
}
[data-reveal="scale"].in-view { transform: none; }

/* --- Chevron: timeline entries arrive pointing forward ------------------- */
[data-reveal="chevron"] { transform: translateX(-24px); }
[data-reveal="chevron"].in-view { transform: none; }

/* --- Hero entrance sequence ---------------------------------------------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}
@keyframes unfurl {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(-50%) translateX(40px); }
  to   { opacity: 0.30; clip-path: inset(0 0 0 0); transform: translateY(-50%); }
}
@keyframes cueBob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50%      { transform: translateX(-50%) translateY(9px); opacity: 1; }
}

.hero__flag { animation: unfurl 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.hero .eyebrow        { animation: riseIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.hero__headline       { animation: riseIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }
.hero__subhead        { animation: riseIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both; }
.hero__anchor         { animation: riseIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.86s both; }
.hero__cue            { animation: riseIn 0.8s ease 1.2s both, cueBob 2.6s ease-in-out 2s infinite; }

/* Flag stripes paint on one at a time during the hero unfurl */
.hero__flag .stripe {
  transform-origin: left center;
  animation: stripeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.4s + var(--s, 0) * 90ms);
}
@keyframes stripeIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Hero parallax drift (set by JS) ------------------------------------- */
.hero__inner { will-change: transform; }

/* --- Section heading underline draw -------------------------------------- */
.section__head h2 { position: relative; display: inline-block; }
.section__head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  height: 3px;
  width: 0;
  background: var(--accent);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.section__head.in-view h2::after { width: 100%; }

/* --- Flag card hover: stripes fan out ------------------------------------ */
.flag__art svg .stripe { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.flag:hover .flag__art svg .stripe:nth-child(odd)  { transform: translateX(2%); }
.flag:hover .flag__art svg .stripe:nth-child(even) { transform: translateX(-2%); }

/* --- Counting numbers ---------------------------------------------------- */
.stat__value { transition: color 0.4s ease; }

/* --- Accessibility: honour the system setting ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal]::after,
  [data-reveal="wipe"]::after { transform: scaleX(0) !important; }

  [data-reveal],
  [data-reveal="wipe"],
  [data-reveal="scale"],
  [data-reveal="chevron"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .hero__flag { opacity: 0.30; }
  .section__head h2::after { width: 100%; }
}