/*
 * Outline-text reveal — single source of truth for the stroke + fill text effect
 * used by header nav, services list, lead submit, and footer Facebook / Instagram.
 *
 * Markup contract:
 *   <el class="lz-outline-text-reveal" data-text="visible label">visible label</el>
 *
 * Animation variants (default vs. active end-states):
 *   .lz-outline-text-reveal                         → rest: stroke only,  active: filled  (body buttons)
 *   .lz-outline-text-reveal.lz-outline-text-reveal--from-fill
 *                                                   → rest: filled,        active: stroke (header nav)
 *
 * Direction:
 *   The clip wipes from inline-start in both LTR and RTL — automatically.
 *
 * Theming (per call site):
 *   --lz-outline-stroke-c   stroke color  (default: currentColor)
 *   --lz-outline-stroke-w   stroke width  (default: 0.015em)
 *   --lz-outline-fill-c     fill color of the reveal layer (default: var(--lz-outline-stroke-c))
 *   --lz-outline-text-dur   transition duration (default: 0.8s)
 *   --lz-outline-text-ease  transition easing  (default: var(--lz-ease-out-quart))
 *
 * Call sites set tokens only; the stroke recipe (text-fill-color, text-stroke, paint-order)
 * and the ::before reveal geometry live here.
 */

.lz-outline-text-reveal {
  position: relative;
  --lz-outline-stroke-c: currentColor;
  --lz-outline-stroke-w: 0.015em;
  --lz-outline-text-dur: 0.8s;
  --lz-outline-text-ease: var(--lz-ease-out-quart);
  --lz-outline-text-rest: inset(0 100% 0 0);
  --lz-outline-text-active: inset(0 0 0 0);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: var(--lz-outline-stroke-w) var(--lz-outline-stroke-c);
  paint-order: stroke fill;
}

.lz-outline-text-reveal--from-fill {
  --lz-outline-text-rest: inset(0 0 0 0);
  --lz-outline-text-active: inset(0 0 0 100%);
}

html[dir="rtl"] .lz-outline-text-reveal {
  --lz-outline-text-rest: inset(0 0 0 100%);
}

html[dir="rtl"] .lz-outline-text-reveal--from-fill {
  --lz-outline-text-rest: inset(0 0 0 0);
  --lz-outline-text-active: inset(0 100% 0 0);
}

.lz-outline-text-reveal::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--lz-outline-fill-c, var(--lz-outline-stroke-c));
  clip-path: var(--lz-outline-text-rest);
  transition: clip-path var(--lz-outline-text-dur) var(--lz-outline-text-ease);
}

.lz-outline-text-reveal:hover::before,
.lz-outline-text-reveal:focus-visible::before,
.lz-outline-text-reveal.is-active::before,
.lz-outline-text-reveal.is-selected::before {
  clip-path: var(--lz-outline-text-active);
}

@media (prefers-reduced-motion: reduce) {
  .lz-outline-text-reveal::before {
    transition: none;
    clip-path: inset(0 0 0 0);
  }
}