/* =========================================================
   Corroso — motion.css
   Purposeful animation. The signature moment: evidence
   assembling into a cited claim (it demonstrates the product).
   GPU-only (transform/opacity). Exits faster than entrances.
   ========================================================= */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------
   1. HERO SIGNATURE — "the evidence assembles itself"
   Choreographed on load: copy rises, then the mock builds
   evidence item-by-item, then citations light up.
   --------------------------------------------------------- */

/* hero copy: staggered rise */
.hero-copy > * { opacity: 0; transform: translateY(16px); }
.js-anim .hero-copy > * { animation: rise .7s var(--ease-out-quint) forwards; }
.js-anim .hero-copy .eyebrow   { animation-delay: .05s; }
.js-anim .hero-copy .hero-h    { animation-delay: .14s; }
.js-anim .hero-copy .hero-lead { animation-delay: .26s; }
.js-anim .hero-copy .hero-cta  { animation-delay: .38s; }
.js-anim .hero-copy .hero-trust{ animation-delay: .50s; }

/* the highlighter sweeps in behind "your own evidence" */
.js-anim .hero-h .t-liquid {
  background-size: 0% 80%;
  background-repeat: no-repeat;
  background-position: 0 center;
  animation: highlight-sweep .55s var(--ease-out-quart) forwards;
  animation-delay: .62s;
}
@keyframes highlight-sweep { to { background-size: 100% 80%; } }

/* the app mock: lifts in as a whole, slightly later */
.hero-mockview { opacity: 0; transform: translateY(24px) scale(.985); transform-origin: center top; }
.js-anim .hero-mockview { animation: mock-in .8s var(--ease-out-expo) .35s forwards; }
@keyframes mock-in { to { opacity: 1; transform: none; } }

/* doc text fades up after the shell is in */
.js-anim .app-demo-staged .doc .kicker,
.js-anim .app-demo-staged .doc h4,
.js-anim .app-demo-staged .doc p { opacity: 0; transform: translateY(8px); }
.js-anim .app-demo-staged.run .doc .kicker { animation: rise .5s var(--ease-out-quart) .55s forwards; }
.js-anim .app-demo-staged.run .doc h4      { animation: rise .5s var(--ease-out-quart) .68s forwards; }
.js-anim .app-demo-staged.run .doc p       { animation: rise .5s var(--ease-out-quart) .82s forwards; }

/* evidence panel: items snap in one-by-one, check pops after */
.js-anim .app-demo-staged .ev-item { opacity: 0; transform: translateX(10px); }
.js-anim .app-demo-staged .ev-foot { opacity: 0; transform: translateY(6px); }
.js-anim .app-demo-staged .ev-tx .chk { transform: scale(0); transform-origin: center; }
.ev-tx .chk { transform-origin: center; }
/* indexed by inline --i (robust: not affected by mixed sibling tags) */
.js-anim .app-demo-staged.run .ev-item { animation: ev-in .4s var(--ease-out-quint) forwards; animation-delay: calc(1s + var(--i) * .14s); }
.js-anim .app-demo-staged.run .ev-item .chk { animation: pop .4s var(--ease-out-expo) forwards; animation-delay: calc(1.18s + var(--i) * .14s); }
.js-anim .app-demo-staged.run .ev-foot { animation: rise .5s var(--ease-out-quart) 1.78s forwards; }

/* citations light up AFTER their evidence has landed — the payoff */
.js-anim .app-demo-staged .doc .cite { background: transparent; border-bottom-color: transparent; }
.js-anim .app-demo-staged.run .doc .cite { animation: cite-light .5s var(--ease-out-quart) forwards; animation-delay: calc(1.22s + var(--i) * .14s); }
@keyframes cite-light {
  from { background: transparent; border-bottom-color: transparent; }
  to   { background: rgba(var(--accent-rgb), .35); border-bottom-color: var(--accent); }
}

/* live dot: gentle breathing (signals "always connected") */
.js-anim .app-bar .live::before { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); } 50% { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0); } }

/* connectors row fades after the show */
.js-anim .connectors { opacity: 0; animation: rise .6s var(--ease-out-quart) 1.9s forwards; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes ev-in { to { opacity: 1; transform: none; } }
@keyframes pop  { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------
   2. SCROLL REVEAL — staggered, with childlift for grids
   --------------------------------------------------------- */
.js-anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out-quint), transform .6s var(--ease-out-quint); }
.js-anim .reveal.in { opacity: 1; transform: none; }

/* children of a revealed grid stagger in */
.js-anim .problem-grid.in > *,
.js-anim .steps.in > *,
.js-anim .trust-grid.in > *,
.js-anim .metrics.in > * { opacity: 0; transform: translateY(18px); animation: rise .55s var(--ease-out-quint) forwards; }
.js-anim .steps.in > *:nth-child(2),
.js-anim .trust-grid.in > *:nth-child(2),
.js-anim .metrics.in > *:nth-child(2) { animation-delay: .08s; }
.js-anim .steps.in > *:nth-child(3),
.js-anim .trust-grid.in > *:nth-child(3),
.js-anim .metrics.in > *:nth-child(3) { animation-delay: .16s; }
.js-anim .trust-grid.in > *:nth-child(4),
.js-anim .metrics.in > *:nth-child(4) { animation-delay: .24s; }

/* ---------------------------------------------------------
   3. CHURN METER BARS — grow on scroll (makes 23% vs 70% visceral)
   --------------------------------------------------------- */
.stat-card .meter i { transform: scaleX(0); transform-origin: left; }
.js-anim .problem-grid.in .stat-card.bad  .meter i { animation: grow-bar .9s var(--ease-out-expo) .25s forwards; }
.js-anim .problem-grid.in .stat-card.good .meter i { animation: grow-bar 1.1s var(--ease-out-expo) .35s forwards; }
@keyframes grow-bar { to { transform: scaleX(1); } }

/* big stat numbers gently scale up as they reveal */
.js-anim .problem-grid.in .stat-card .big { animation: stat-pop .7s var(--ease-out-expo) .2s forwards; }
@keyframes stat-pop { from { opacity:.4; transform: translateY(8px) scale(.96); } to { opacity:1; transform:none; } }

/* ---------------------------------------------------------
   4. MICRO-INTERACTIONS
   --------------------------------------------------------- */
/* citation chip hover → lifts the matching evidence item in the panel */
.app-body .cite { transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out-quart); }
.app-body:hover .ev-item { transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out-quart); }
.app-body .doc .cite:hover { transform: translateY(-1px); }

/* cards lift subtly on hover (not under restrained — but motion.css opts in) */
.js-anim .step, .js-anim .rule, .js-anim .metric, .js-anim .plan { transition: transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base); }
.js-anim .step:hover, .js-anim .rule:hover, .js-anim .metric:hover { transform: translateY(-3px); }

/* buttons: press feedback + arrow nudge */
.btn i.ph-arrow-right { transition: transform var(--dur-base) var(--ease-out-quart); }
.btn:hover i.ph-arrow-right { transform: translateX(3px); }
.btn.primary { transition: transform var(--dur-fast) var(--ease-out-quart), background var(--dur-base), box-shadow var(--dur-base); }
.btn.primary:active { transform: scale(.97); }

/* connector chips: subtle hover */
.connectors .src { transition: transform var(--dur-fast) var(--ease-out-quart), color var(--dur-fast); }
.connectors .src:hover { transform: translateY(-2px); color: var(--forest); }

/* ---------------------------------------------------------
   5. FORM FEEDBACK
   --------------------------------------------------------- */
.field input, .field select { transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast) var(--ease-out-quart); }
.field input:focus, .field select:focus { transform: translateY(-1px); }

.form.is-submitting .btn.primary { opacity: .7; pointer-events: none; }
.form.is-submitting .btn.primary i { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* error shake */
.field.shake input, .field.shake select { animation: shake .4s var(--ease-out-quart); border-color: var(--neg); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }

/* success state */
.form-success { display: none; }
.form.done .form-grid { display: none; }
.form.done .form-success {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 12px 0; animation: rise .6s var(--ease-out-expo) forwards; opacity: 0;
}
.form-success .ok {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--forest);
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  animation: pop .5s var(--ease-out-expo) .15s both;
}

/* ---------------------------------------------------------
   REDUCED MOTION — honor it completely
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-copy > *, .hero-mockview, .connectors,
  .app-demo-staged .doc .kicker, .app-demo-staged .doc h4, .app-demo-staged .doc p,
  .app-demo-staged .ev-item, .app-demo-staged .ev-foot { opacity: 1 !important; transform: none !important; }
  .app-demo-staged .ev-tx .chk { transform: scale(1) !important; }
  .app-demo-staged .doc .cite { background: rgba(var(--accent-rgb), .35) !important; border-bottom-color: var(--accent) !important; }
  .hero-h .t-liquid { background-size: 100% 80% !important; }
  .stat-card .meter i { transform: scaleX(1) !important; }
}