/* Per-letter "brown wave" on navigating/action links (Issue 2).
   On hover, each character ripples to espresso brown (#351707) in reading order
   and returns to its own base colour as the wave passes — one travel-and-return
   pass per hover. Each link keeps its native colour; only the sweep is brown.

   Additive + non-destructive: link-wave.js splits text into .wave-ch spans once
   and caches; with JS off the link renders normally. */

/* Single flex-item wrapper so per-letter spans never become flex items in
   display:flex / inline-flex links (.btn, .ghost-link). */
.wave-inner {
  color: inherit;
}

.wave-ch {
  /* Inline so it never affects layout; only colour animates. */
  color: inherit;
  /* No `will-change: color` — `color` is a paint property, not a compositable one,
     so the hint promotes nothing and just pins memory on every letter span site-wide,
     adding paint pressure that competes with the (main-thread-drawn) pencil cursor.
     The wave animation is unaffected. */
}

/* The sweep colour. Espresso brown by default so it reads on the site's orange /
   white / teal buttons. Buttons whose base text is ALSO espresso (light + gold
   CTAs) would sweep espresso->espresso = invisible, so they override this var to
   a contrasting brand colour below. Same keyframe, just a different destination. */
:root { --wave-ink: #351707; }
.btn-light,
.portfolio-single-page .case-button--light,
.portfolio-single-page .case-cta .case-button--ghost {
  --wave-ink: var(--sunrise-orange, #FD5918);
}

/* Travel-and-return ripple. Per-letter delay is set inline by JS. */
.wave-link.is-waving .wave-ch {
  animation: waveBrown 0.34s ease both;
}

/* Stay-brown mode (JS sets STAY_BROWN = true and adds .wave-stay). Letters go
   brown in sequence and hold until mouseleave. */
.wave-link.wave-stay.is-waving .wave-ch {
  animation: none;
  color: #351707;
}

@keyframes waveBrown {
  0%   { color: inherit; }
  45%  { color: var(--wave-ink, #351707); }
  100% { color: inherit; }
}

/* Trailing icon (svg/img) sweeps last — JS gives it the biggest delay via a
   CSS var so it stays in step with the letters. */
.wave-link.is-waving .wave-icon {
  animation: waveBrownFill 0.34s ease both;
  animation-delay: var(--wave-icon-delay, 0s);
}

@keyframes waveBrownFill {
  0%   { color: inherit; fill: currentColor; }
  45%  { color: var(--wave-ink, #351707); fill: var(--wave-ink, #351707); }
  100% { color: inherit; fill: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  /* No per-letter march — a single gentle whole-link pulse instead. */
  .wave-link.is-waving .wave-ch,
  .wave-link.is-waving .wave-icon {
    animation: none;
  }
  .wave-link.is-waving {
    animation: wavePulse 0.4s ease both;
  }
  @keyframes wavePulse {
    0%, 100% { color: inherit; }
    50% { color: var(--wave-ink, #351707); }
  }
}