/*
  Motion utilities — scroll reveals, counters, active-nav highlighting,
  the capability marquee and the hero shimmer/line-draw effects.
  Populated in Task 6. Reduced-motion handling lives globally in
  base.css so this file only needs to add the enter/active states.
*/

/* =======================================================================
   Hero motion (Task 5) — line-art draw-in, a slow float loop on the
   nearest wireframe echo, the headline's gold shine sweep, and the
   hero content's on-load entrance. Every effect here is neutralized
   under prefers-reduced-motion at the bottom of this block (mandatory).
========================================================================== */

/* ---- Line-draw (pathLength="1" normalizes every path to length 1,
   so one dasharray/dashoffset pair works regardless of geometry) ------- */
.hero-line{
  fill:none;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw 2.4s var(--ease-out) forwards;
}
@keyframes draw{
  to{stroke-dashoffset:0;}
}
/* Staggered so the three echoes (large/ghost → mid → small/bright)
   draw in back-to-front, like the mark assembling itself. */
.hero-line--ghost{animation-delay:.1s;}
.hero-line--mid{animation-delay:.45s;}
.hero-line--float{animation-delay:.8s;}

/* ---- Floaty loop on the nearest (brightest) wireframe echo ------------
   Applied to an INNER group with no positioning transform of its own —
   the outer <g transform="translate(...) scale(...) rotate(...)"> in
   index.html sets the shape's place/size/orientation as a plain SVG
   attribute; a CSS `transform` animation on that same element would
   replace (not add to) the attribute, snapping the shape back to the
   viewBox origin. Animating this transform-free inner group avoids
   that. transform-box:fill-box centers the rotation on the shape's own
   bounds instead of the whole SVG viewBox. */
.hero__float{
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation:floaty 7s var(--ease-in-out) infinite;
  animation-delay:1.4s;
}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-16px) rotate(1.5deg);}
}

/* ---- Headline gold shine ------------------------------------------------
   color:var(--gold-deep) is a same-paint fallback for the rare browser
   without background-clip:text support, and it is also reused verbatim
   as the reduced-motion resting color below. The animated sweep uses
   --gold-shine (tokens.css), not --gold-grad: --gold-grad's bright stop
   (--gold-bright, 1.57:1 on white) fails WCAG AA for large text, and
   since this animates infinitely the headline would sit at sub-AA gold
   for most of every cycle. --gold-shine's two stops (--gold-deep 3.92:1,
   --gold-mid 3.22:1) are both individually verified >=3:1 against
   --paper, so the whole sweep stays AA-safe throughout. */
.shine{
  color:var(--gold-deep);
  background:var(--gold-shine);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{
  0%{background-position:0% 0%;}
  100%{background-position:100% 0%;}
}

/* ---- Hero content entrance -------------------------------------------- */
.hero__content{
  opacity:0;
  transform:translateY(28px);
  animation:hero-in .9s var(--ease-out) .15s forwards;
}
.hero__scroll{
  opacity:0;
  animation:hero-in .9s var(--ease-out) .55s forwards;
}
@keyframes hero-in{
  to{opacity:1;transform:translateY(0);}
}

/* =======================================================================
   Scroll reveal (Task 6) — generic scroll-in used by every later content
   section. main.js adds .is-visible via a one-shot IntersectionObserver
   once each [data-reveal] element crosses into view (optionally staggered
   per-element via data-reveal-delay, an inline ms transition-delay set by
   the JS). This file only owns the resting/entered visual states.
========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}
/* Directional/scale variants: data-reveal="left|right|scale" swaps the
   resting transform; the shared .is-visible rule above still clears it. */
[data-reveal="left"]{transform:translateX(-32px);}
[data-reveal="right"]{transform:translateX(32px);}
[data-reveal="scale"]{transform:scale(.94);}

/* =======================================================================
   Marquee (Task 6) — infinite horizontal scroller for the capability
   logos/badges strip. .marquee is the clipping viewport (with an edge
   fade so content doesn't hard-cut); .marquee__track holds the content
   duplicated back-to-back (two identical copies) so animating to
   translateX(-50%) loops seamlessly to the start.
========================================================================== */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 28s linear infinite;
}
@keyframes marquee{
  to{transform:translateX(-50%);}
}

/* ---- Reduced motion (mandatory) — consolidated single block covering
   every motion effect defined in this file: hero lines fully drawn, no
   float/shine loops, hero content shown without an entrance, reveals
   appear immediately with no transform/transition, marquee stops
   moving. ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-line{animation:none;stroke-dashoffset:0;}
  .hero__float{animation:none;transform:none;}
  .shine{animation:none;background:none;color:var(--gold-deep);}
  .hero__content,
  .hero__scroll{animation:none;opacity:1;transform:none;}
  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
  .marquee__track{
    animation-play-state:paused;
  }
}