/* ==========================================================================
   .ww-link — shimmer + chevron link
   --------------------------------------------------------------------------
   Opt-in, not applied to every anchor: the site's nav, logo and card links
   would all inherit it otherwise. Write a plain anchor and add the class:

       <a class="ww-link" href="/packages/">View our packages</a>

   ww-link.js builds the inner spans on load, so nothing else is authored by
   hand. The only thing an instance should ever need to set is colour:

       .ww-packages-cta { color: var(--color-tobacco); }

   Everything else derives from currentColor. Typography comes from the
   eyebrow tokens in type.css, so the scale stays in one place.

   Sizes are in em throughout — the chevron and its travel scale with the
   text rather than being pinned to the prototype's larger font size.
   ========================================================================== */

.ww-link {
  /* Highlight that sweeps through the text. Derived from the link colour so
     that setting `color` is genuinely all an instance needs. */
  --ww-link-shimmer: #d4a86d;
  --ww-link-chevron: 0.9em;
  --ww-link-hover: var(--color-tobacco, #966022);
  /* Space between the label and the chevron stage. The stage sits out of
     flow (left: 100% + this gap), so the link's layout box is the text
     alone and neighbouring links space evenly. Tight, because the text no
     longer glides aside to meet the chevron — the tip anchors to the
     stage's right edge, so the optical gap runs wider than this figure. */
  --ww-link-gap: 0.35em;
  /* Uppercase glyphs have no descenders, so their optical centre sits above
     the line-box centre; lift the chevron to match. */
  --ww-link-nudge: -0.05em;

  /* Timing, read by ww-link.js. How long the highlight takes to cross the
     text, and where in that sweep the chevron gets blown out. Unhurried:
     the sweep should read as light moving across the label, not a gust. */
  --ww-link-sweep: 0.92s;
  /* The highlight leaves the right edge of the text at ~0.37 of the sweep —
     the power2.out ease front-loads it — so the chevron catches the gust
     just before, rather than arriving after the wind has passed. */
  --ww-link-gust: 0.34;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ww-link-gap);

  font-family: var(--font-sans);
  font-size: var(--lbl);
  font-weight: var(--fw-label);
  letter-spacing: var(--track-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
  text-decoration: none;

  outline-offset: 0.6em;
}

@supports (color: color-mix(in srgb, currentColor 50%, white)) {
  .ww-link {
    --ww-link-shimmer: color-mix(in srgb, currentColor 55%, #fff);
  }
}

/* Resting colour is the instance's to set — declaring it here would win the
   cascade and ignore it. Hover is ours: reset.css ships
   `a:hover { color: #333366 }` at (0,1,1), which outranks an instance's
   single class, so leaving hover unset means links go navy blue. */
.ww-link:hover,
.ww-link:focus-visible {
  color: var(--ww-link-hover);
  text-decoration: none;
}

.ww-link__text {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.15em 0;
}

.ww-link__base,
.ww-link__shimmer {
  display: block;
  white-space: nowrap;
}

.ww-link__shimmer {
  position: absolute;
  inset: 0.15em 0 auto 0;
  /* Not `color: transparent` — the gradient below reads currentColor, and
     zeroing `color` here would mix the highlight against transparent and
     come out white. text-fill-color hides the glyphs while leaving the
     inherited colour intact for color-mix to work from. */
  -webkit-text-fill-color: transparent;
  /* Low-contrast band: the white accents sat hot enough to read metallic,
     which fought the brand's calm register. */
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.08) 46%,
    var(--ww-link-shimmer) 50%,
    rgba(255, 255, 255, 0.22) 53%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 102% 0;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  pointer-events: none;
  will-change: background-position, opacity;
}

.ww-link__chevron {
  position: absolute;
  left: calc(100% + var(--ww-link-gap));
  top: 50%;
  transform: translateY(calc(-50% + var(--ww-link-nudge)));
  width: var(--ww-link-chevron);
  height: 1.2em;
  overflow: hidden;
}

/* Shimmer-only variant: no chevron stage, so nothing trails the label. For
   links set in a separated row (e.g. ✦ dividers) where the stage's dead
   space would unbalance the gutters. */
.ww-link--no-chevron .ww-link__chevron {
  display: none;
}

/* Width animates 0 -> --ww-link-chevron, so the tip is revealed by a wipe
   rather than sliding in. */
.ww-link__chevron-origin {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 1.2em;
  overflow: hidden;
  transform: translateY(-50%);
  will-change: width;
}

.ww-link__chevron-tip {
  position: absolute;
  top: 50%;
  right: 0.06em;
  width: 0.56em;
  height: 0.56em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(-45deg) scale(0.72);
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* Dot the wipe grows out of. */
.ww-link__seed {
  position: absolute;
  top: 50%;
  right: 0.04em;
  width: 0.11em;
  height: 0.11em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%) scale(0);
  opacity: 0;
}

/* Before the script runs, and if it never does, show the resting chevron so
   the link never looks broken. */
.ww-link:not([data-ww-link="ready"]) .ww-link__chevron-origin {
  width: var(--ww-link-chevron);
}

.ww-link:not([data-ww-link="ready"]) .ww-link__chevron-tip {
  opacity: 1;
  transform: translateY(-50%) rotate(-45deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ww-link__shimmer {
    display: none;
  }

  .ww-link__chevron-origin {
    width: var(--ww-link-chevron) !important;
  }

  .ww-link__chevron-tip {
    opacity: 1 !important;
    transform: translateY(-50%) rotate(-45deg) scale(1) !important;
  }
}

/* Down-facing variant, for dropdown triggers. GSAP animates x/scale/opacity
   and preserves the rotation it reads from CSS, so pointing the tip down is
   purely declarative. Mirrors the base fallback and reduced-motion pins. */
.ww-link--down .ww-link__chevron-tip {
  transform: translateY(-50%) rotate(45deg) scale(0.72);
}

.ww-link--down:not([data-ww-link="ready"]) .ww-link__chevron-tip {
  transform: translateY(-50%) rotate(45deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ww-link--down .ww-link__chevron-tip {
    transform: translateY(-50%) rotate(45deg) scale(1) !important;
  }
}