/* animations.css — GSAP-driven custom-property recipients.
 *
 * GSAP can animate CSS custom properties, but the CSS has to know
 * what to do with them. This file owns those declarations so the
 * JS only needs to set numeric progress values (0 -> 1).
 *
 * Loaded explicitly from kais/templates/app/home.html for now.
 * Safe to load globally if other pages adopt the same hooks.
 */

/* ── How-it-works connector line (steps-row) ────────────────────── */
/* The .steps-row gets a `--kais-connector-progress` custom property
 * set by GSAP. We use clip-path to reveal a horizontal connector
 * pseudo-element behind the step badges. The pseudo is only visible
 * at >= 768px because below that the steps stack vertically. */
@media (min-width: 768px) {
  #how-it-works .steps-row {
    --kais-connector-progress: 0;
    position: relative;
  }
  #how-it-works .steps-row::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 28px;          /* aligned with the centre of the step badges */
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(99, 102, 241, 0.6),
      rgba(168, 85, 247, 0.6),
      rgba(34, 197, 94, 0.6)
    );
    clip-path: inset(0 calc((1 - var(--kais-connector-progress)) * 100%) 0 0);
    pointer-events: none;
    z-index: 0;
  }
}

/* ── Final-CTA button shimmer ───────────────────────────────────── */
/* The shimmer is a gradient that slides across the button as
 * `--kais-shimmer` goes 0 -> 1. Implemented with a ::after overlay
 * so we never compete with the button's native hover transition. */
.final-cta-section .btn-kais-primary {
  --kais-shimmer: 0;
  position: relative;
  overflow: hidden;
}
.final-cta-section .btn-kais-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc((var(--kais-shimmer) * 200%) - 50%);
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  pointer-events: none;
  /* The overlay only contributes if the JS layer has had a chance
   * to set --kais-shimmer (i.e. GSAP is alive). With prefers-reduced-
   * motion the GSAP layer no-ops, so the shimmer stays parked at
   * -50% and is invisible. */
}

/* ── splitWords() inside gradient-clipped text ─────────────────── */
/* The hero `<span class="highlight-orange">` paints its text in a
 * gradient via `background-clip: text + color: transparent`. When
 * GSAP's splitWords() wraps the word in a `display: inline-block`
 * child span, the child becomes an atomic inline-block and the
 * parent's text-clip no longer reaches it — the word disappears.
 * Re-paint the gradient on the child so the visual is preserved
 * post-split. */
.highlight-orange .gsap-word {
  background: linear-gradient(90deg, #FF9600, #FFB74D);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Reduced-motion belt-and-braces ─────────────────────────────── */
/* If motion is suppressed AND the GSAP layer somehow shipped a
 * mid-flight value (rare; reload-mid-tween case), force the final
 * resting state so users never see partial animations. */
@media (prefers-reduced-motion: reduce) {
  #how-it-works .steps-row {
    --kais-connector-progress: 1;
  }
  .final-cta-section .btn-kais-primary {
    --kais-shimmer: 0;
  }
  .final-cta-section .btn-kais-primary::after {
    display: none;
  }
}