/* ClearPantry — hand-drawn motion micro-polish
   Owns: SVG sketch underline + arrow draw animations
   Does NOT own: layout, typography, color tokens (those live in style.css) */

/* ── 1. SVG path-draw keyframes ─────────────────────────── */
@keyframes svg-draw {
  to { stroke-dashoffset: 0; }
}

/* ── 2. Reduced-motion: skip animation, show final state ─── */
@media (prefers-reduced-motion: reduce) {
  .sketch-underline path,
  .sketch-underline polyline,
  .cta-arrow path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ── 3. Sketch underline container ──────────────────────── */
/* Positioned absolutely under its parent text element.
   Reserve height so no layout shift when SVG appears. */
.sketch-underline-wrap {
  position: relative;
  display: inline-block;
}

.sketch-underline {
  /* Block-level below the text, no layout shift */
  display: block;
  overflow: visible;
  pointer-events: none;
  margin-top: -4px;    /* pull up slightly toward the text baseline */
}

/* Paths start invisible (dashoffset = full length), draw to 0 on trigger */
.sketch-underline path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* opacity starts at 0 so pre-animation state is invisible */
  opacity: 0;
  transition: opacity 0s;
}

/* When .draw class is added by JS, animate */
.sketch-underline.draw path {
  opacity: 1;
  animation: svg-draw 600ms ease-out forwards;
}

/* Delayed start for H1 (page-load trigger) */
.sketch-underline.draw.delay-80 path {
  animation-delay: 80ms;
}

/* Stat underlines on fear callout — faster, snappier */
.sketch-underline.draw.stat-underline path {
  animation-duration: 480ms;
}

/* ── 4. CTA arrow accent ─────────────────────────────────── */
/* Positioned wrapper — sits top-right of the Buy Clean button */
.cta-arrow-wrap {
  position: relative;
  display: inline-block;
}

.cta-arrow {
  position: absolute;
  top: -28px;
  right: -18px;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.1s;
}

/* Show arrow wrapper when parent is hovered */
.cta-arrow-wrap:hover .cta-arrow,
.cta-arrow-wrap:focus-within .cta-arrow {
  opacity: 1;
}

.cta-arrow path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: var(--arrow-len, 120);
  stroke-dasharray: var(--arrow-len, 120);
}

/* Draw arrow on hover */
.cta-arrow-wrap:hover .cta-arrow path,
.cta-arrow-wrap:focus-within .cta-arrow path {
  animation: svg-draw 400ms ease-out forwards;
}

/* ── 5. Hero H1 underline — homepage only ────────────────── */
.hero-h1-underline-wrap {
  display: inline;
}

/* The SVG sits below the H1 as a block element */
.hero-h1-underline {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-top: -6px;
  overflow: visible;
  pointer-events: none;
}

.hero-h1-underline path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.hero-h1-underline.draw path {
  opacity: 1;
  animation: svg-draw 700ms ease-out forwards;
  animation-delay: 200ms;
}

/* Mobile safety: keep within text width at 375px */
@media (max-width: 430px) {
  .hero-h1-underline {
    max-width: 100%;
  }
  .cta-arrow {
    top: -22px;
    right: -12px;
    transform: scale(0.85);
    transform-origin: top right;
  }
}