/* ============================================================
   VerifiedSubmission — motion layer
   Shared by index.html and use-cases.html. No dependencies.

   One easing, one duration. Everything on the page borrows from
   these four values; that consistency is what keeps restrained
   motion reading as "polished" rather than "animated".

   Every rule that HIDES something is scoped to html.js, so a
   blocked or broken script leaves the page fully readable.
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
  --reveal-duration: 320ms;
  --reveal-distance: 14px;
  --stagger-step: 60ms;
}

/* ---------- Scroll reveals ---------------------------------- */

html.js [data-reveal],
html.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--ease-out-expo),
    transform var(--reveal-duration) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-visible,
html.js [data-reveal-group] > .is-visible {
  opacity: 1;
  transform: none;
}

/* Hairline grids (gap-px + overflow-hidden) clip a rising child at
   the container edge, so those fade only. */
html.js [data-reveal-group="fade"] > * {
  transform: none;
}

/* ---------- Condensing nav ----------------------------------
   The header keeps its cream/blur/hairline utilities in the markup
   so Tailwind emits them; .is-top neutralises them at scroll 0. */

html.js #site-header {
  transition:
    background-color 300ms var(--ease-out-expo),
    border-color 300ms var(--ease-out-expo),
    backdrop-filter 300ms var(--ease-out-expo);
}

html.js #site-header.is-top {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

/* ---------- Hero Human Certainty card ----------------------- */

html.js #hero-bar {
  transition: width 900ms var(--ease-out-expo);
}

html.js .hero-check {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 320ms var(--ease-out-expo),
    transform 320ms var(--ease-out-expo);
}

html.js .hero-check.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Verify sequence --------------------------------- */

/* Progress rail under the status label. Linear, because it stands
   in for elapsed time. */
html.js #verify-rail {
  width: 0;
  transition: width 1400ms linear;
}

html.js #verify-rail.is-filling {
  width: 100%;
}

html.js #verify-status {
  transition: opacity 240ms var(--ease-out-expo);
}

html.js #verify-status.is-fading {
  opacity: 0;
}

/* Timeline rail draws top-to-bottom over the static border track. */
html.js #timeline-rail {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease-out-expo);
}

html.js #timeline-rail.is-drawn {
  transform: scaleY(1);
}

html.js .tl-event {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 320ms var(--ease-out-expo),
    transform 320ms var(--ease-out-expo);
}

html.js .tl-event.is-visible {
  opacity: 1;
  transform: none;
}

/* Spinner is hand-rolled rather than a utility class, because it is
   injected after load and must not depend on the Tailwind CDN
   noticing a new class name. */
@keyframes vs-spin {
  to { transform: rotate(360deg); }
}

.vs-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #D8FF3E;
  animation: vs-spin .8s linear infinite;
}

/* On the lime button a light spinner disappears — invert it. */
.vs-spinner--on-accent {
  border-color: rgba(26, 26, 24, .25);
  border-top-color: #1A1A18;
}

/* Dark panels need a light caret and a dimmed placeholder. */
.panel-input::placeholder {
  color: rgba(255, 255, 255, .38);
}

.panel-input {
  caret-color: #D8FF3E;
  color-scheme: dark;
}

/* ---------- Reduced motion ----------------------------------
   Everything lands in its final state immediately. motion.js checks
   the same query and skips its timers, so the verify flow loses its
   staged latency rather than merely animating faster.
   ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-group] > *,
  html.js .hero-check,
  html.js .tl-event {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js #site-header,
  html.js #hero-bar,
  html.js #verify-rail,
  html.js #verify-status,
  html.js #timeline-rail {
    transition: none;
  }

  html.js #timeline-rail {
    transform: scaleY(1);
  }

  .vs-spinner {
    animation: none;
  }
}