/**
 * Premium motion layer — restrained, conversion-focused animation.
 *
 * Inspired by the effect vocabulary of libraries like ReactBits (count-ups,
 * shiny text, spotlight cards, staggered reveals) but built in plain CSS on the
 * site's five colours: #000 #ff3f3f #ffedde #fff #F9F9FB. Nothing here adds a
 * colour, moves layout, or hides content from a non-JS visitor:
 *
 *  - Reveal styles apply ONLY under `html.hip-motion`, a class v2-motion.js
 *    adds at runtime. No JS -> no class -> everything renders static.
 *  - Every animation lives inside prefers-reduced-motion: no-preference.
 *  - Hover effects are additionally gated on (hover:hover) pointers.
 */

@media (prefers-reduced-motion: no-preference) {

  /* ---- 1. Hero entrance: a three-beat rise, CSS-only so it never waits on
         delayed JavaScript. Only the first hero on the page. ---- */
  @keyframes hip-rise {
    from { opacity: 0; transform: translateY(14px) }
    to   { opacity: 1; transform: none }
  }
  .hero .eyebrow,
  .ghero .eyebrow,
  .rhero .eyebrow { animation: hip-rise .5s cubic-bezier(.22,1,.36,1) both }
  .hero h1,
  .ghero h1,
  .rhero h1,
  .hero .hero__title,
  .rhero .rhero__title { animation: hip-rise .55s .07s cubic-bezier(.22,1,.36,1) both }
  .hero .lede,
  .ghero .lede,
  .rhero .lede { animation: hip-rise .55s .14s cubic-bezier(.22,1,.36,1) both }
  .hero .trustline,
  .hero .hero__cta { animation: hip-rise .55s .22s cubic-bezier(.22,1,.36,1) both }

  /* ---- 2. Shiny text on the hero highlight: a soft white sheen drifting
         across the red <em>. Palette: red base, white light. ---- */
  @keyframes hip-sheen { to { background-position: -200% center } }
  .hero h1 em {
    background: linear-gradient(
      110deg,
      #ff3f3f 42%,
      #fff 50%,
      #ff3f3f 58%
    );
    background-size: 220% 100%;
    background-position: 60% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hip-sheen 5.5s ease-in-out 1.2s infinite;
  }

  /* ---- 3. CTA shine sweep. Hover on every primary button; the hero's big
         CTA also gets a slow idle sweep as a gentle attention nudge. ---- */
  .btn--primary { position: relative; overflow: hidden }
  .btn--primary::after {
    content: "";
    position: absolute;
    inset: -2px auto -2px -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  @keyframes hip-sweep { to { left: 130% } }
  @media (hover: hover) {
    .btn--primary:hover::after { animation: hip-sweep .65s ease }
  }
  .hero__cta .btn--primary::after { animation: hip-sweep 4.5s ease-in-out 2s infinite }

  /* ---- 4. Staggered scroll reveal (JS-gated). Cards rise as they enter;
         --hip-d carries each card's slot in its row. ---- */
  html.hip-motion .hip-reveal {
    opacity: 0;
    transform: translateY(16px);
  }
  html.hip-motion .hip-reveal.hip-in {
    opacity: 1;
    transform: none;
    transition:
      opacity .55s cubic-bezier(.22,1,.36,1) var(--hip-d, 0s),
      transform .55s cubic-bezier(.22,1,.36,1) var(--hip-d, 0s);
  }

  /* ---- 5. Card lift + spotlight. The spotlight follows the pointer via
         --hx/--hy set by JS; light is white at 6%, i.e. no new colour. ---- */
  @media (hover: hover) {
    .hip-spot { position: relative }
    .hip-spot::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(240px circle at var(--hx, 50%) var(--hy, 50%), rgba(255,255,255,.16), transparent 65%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
      z-index: 1;
    }
    .hip-spot:hover::before { opacity: 1 }
    /* Light cards get a red-tinted light instead of white-on-white. */
    .hip-spot--light::before {
      background: radial-gradient(240px circle at var(--hx, 50%) var(--hy, 50%), rgba(255,63,63,.07), transparent 65%);
    }
  }

  /* ---- 6. A slow drift on the heroes' existing red glow, so the dark
         headers feel alive without moving any content. ---- */
  @keyframes hip-drift {
    from { transform: translate3d(0,0,0) }
    to   { transform: translate3d(-2.5%, 2%, 0) scale(1.06) }
  }
  .hero::before,
  .ghero::before,
  .rhero::before { animation: hip-drift 16s ease-in-out infinite alternate; will-change: transform }

  /* ---- 7. Count-up targets just avoid layout shift while ticking. ---- */
  .hip-count { font-variant-numeric: tabular-nums }
}

/* Reduced motion: nothing above applies; make doubly sure nothing lingers. */
@media (prefers-reduced-motion: reduce) {
  .hero h1 em {
    background: none;
    -webkit-text-fill-color: initial;
  }
}