/* ===========================================================================
   static.css — the animation layer.

   tailwind.css carries every visual style from the original build, unchanged.
   This file carries only what framer-motion used to do at runtime: entrance
   animations, scroll reveals, the mobile sheet, and the transitions inside the
   two looping product visuals.

   Everything hidden by default is gated behind `.js` on <html>, set by an
   inline script in <head>. With JavaScript off, nothing is hidden and the page
   reads as plain static content.

   `--ease-out-soft` is the cubic-bezier(0.22, 1, 0.36, 1) already defined in
   tailwind.css — the same curve framer-motion was given as EASE.
   =========================================================================== */

/* ----------------------------- Scroll reveals -----------------------------
   Replaces <Reveal> and <RevealItem>: opacity 0 -> 1 and y 22px -> 0 over
   0.85s, fired once when the element crosses its threshold. --rd is the
   per-element delay app.js reads from data-reveal-delay. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.85s var(--ease-out-soft) var(--rd, 0s),
    transform 0.85s var(--ease-out-soft) var(--rd, 0s);
  will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ----------------------------- Hero entrance ------------------------------
   The headline lines rise out of their overflow-hidden masks; the eyebrow,
   lede, buttons and card fade up behind them. --d is the stagger delay, set
   inline per element exactly as the React delays were. */

@keyframes do-hero-line {
  from {
    transform: translateY(110%);
  }
  to {
    transform: none;
  }
}

@keyframes do-hero-soft {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes do-hero-card {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .hero-line {
  animation: do-hero-line 1.05s var(--ease-out-soft) var(--d, 0s) both;
}

.js .hero-soft {
  animation: do-hero-soft 0.9s var(--ease-out-soft) var(--d, 0s) both;
}

.js .hero-card {
  animation: do-hero-card 1.1s var(--ease-out-soft) 0.35s both;
}

/* ------------------------------ Mobile sheet ------------------------------
   Replaces the AnimatePresence mount/unmount. Kept in the DOM and driven by
   .is-open; visibility keeps it out of the tab order and off the pointer
   while closed. */

#mobile-nav {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 0.45s var(--ease-out-soft),
    transform 0.45s var(--ease-out-soft),
    visibility 0.45s linear;
}

#mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mnav-item {
  opacity: 0;
  transform: translateY(14px);
}

#mobile-nav.is-open .mnav-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-out-soft) var(--d, 0s),
    transform 0.5s var(--ease-out-soft) var(--d, 0s);
}

.mnav-foot {
  opacity: 0;
}

#mobile-nav.is-open .mnav-foot {
  opacity: 1;
  transition: opacity 0.5s linear 0.3s;
}

/* --------------------------- Content swap-ins -----------------------------
   React remounted these nodes on a changed key, so each new value animated in
   from scratch. app.js replays the matching animation whenever it writes new
   text. */

@keyframes do-swap {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes do-swap-up {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes do-swap-sm {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes do-swap-md {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The demo form's success panel. */
@keyframes do-swap-form {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------ Hero claim card internals ----------------------- */

/* Pointer tilt. The 3D context the motion component used to declare inline. */
#hero-tilt {
  transform-style: preserve-3d;
}

/* One validation segment, filling as its check clears. */
#claim-segments .seg {
  width: 0;
  transition: width 0.7s var(--ease-out-soft);
}

#claim-segments .seg.is-on {
  width: 100%;
}

/* Lifecycle progress line under the four stage dots. */
#claim-progress {
  width: 0;
  transition: width 1.5s var(--ease-out-soft);
}

/* ------------------------- Lifecycle ring sweep ---------------------------
   The quarter-arc rotates clockwise without bound, so it never snaps
   backwards when the cycle wraps from Resolve to Submit. */

#ring-sweep {
  transform: rotate(-90deg);
  transform-origin: 50px 50px;
  transition: transform 1s var(--ease-out-soft);
}

/* ------------------------------ Reduced motion ----------------------------
   tailwind.css already collapses every animation and transition to ~0s here.
   These rules remove the offsets as well, so content renders in its final
   position rather than snapping into place — matching what the React build
   rendered under useReducedMotion. */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .hero-line,
  .js .hero-soft,
  .js .hero-card {
    animation: none;
  }

  .mnav-item {
    opacity: 1;
    transform: none;
  }

  .mnav-foot {
    opacity: 1;
  }
}