/* Motion. Brand: short transitions, reveal stages in reading order, honour reduced motion, logo stays still. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Hero on load: stage bar sweeps blue, cyan, lime; copy rises in order; sample rows arrive one by one */
.hero .stagebar i { transform-origin: left; animation: grow-x .5s var(--ease) both; }
.hero .stagebar i:nth-child(1) { animation-delay: .05s; }
.hero .stagebar i:nth-child(2) { animation-delay: .25s; }
.hero .stagebar i:nth-child(3) { animation-delay: .45s; }
.hero .eyebrow, .hero h1, .hero .lead, .hero .actions, .hero p.support, .hero p:has(.textlink) { animation: rise .6s var(--ease) both; }
.hero .eyebrow { animation-delay: .1s; }
.hero h1 { animation-delay: .2s; }
.hero .lead { animation-delay: .32s; }
.hero .actions { animation-delay: .44s; }
.hero p:has(.textlink) { animation-delay: .52s; }
.hero p.support { animation-delay: .6s; }
.hero .spec-card { animation: slide-in .7s .3s var(--ease) both; }
.hero .spec-row { animation: rise .5s var(--ease) both; }
.hero .spec-row:nth-of-type(1) { animation-delay: .75s; }
.hero .spec-row:nth-of-type(2) { animation-delay: 1.05s; }
.hero .spec-row:nth-of-type(3) { animation-delay: 1.35s; }
.hero .spec-row .label svg { animation: pop .45s var(--ease) both; }
.hero .spec-row:nth-of-type(1) .label svg { animation-delay: 1.0s; }
.hero .spec-row:nth-of-type(2) .label svg { animation-delay: 1.3s; }
.hero .spec-row:nth-of-type(3) .label svg { animation-delay: 1.6s; }
.hero .spec-cap { animation: rise .5s 1.65s var(--ease) both; }
.page-hero .crumbs, .page-hero h1, .page-hero .lead, .page-hero .answer, .page-hero .meta-line { animation: rise .55s var(--ease) both; }
.page-hero h1 { animation-delay: .08s; }
.page-hero .lead { animation-delay: .16s; }
.page-hero .answer { animation-delay: .24s; }
.page-hero .meta-line { animation-delay: .32s; }

/* Scroll reveals. Only active when JS adds html.js, so content is never hidden without it. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.in .label svg, .js .label svg { }
.js .reveal.in .label svg { animation: pop .45s calc(var(--d, 0) * 70ms + .25s) var(--ease) both; }

/* Process bars draw left to right, one stage after another */
.js .steps li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.js .steps li.in { opacity: 1; transform: none; }
.js .steps li::before { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 110ms + 100ms); }
.js .steps li.in::before { transform: scaleX(1); }
.js .state { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0) * 140ms); }
.js .state.in { opacity: 1; transform: none; }
.js .state::after { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 140ms + 200ms); }
.js .state.in::after { transform: scaleX(1); }
.js .flow > i { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s var(--ease); transition-delay: calc(var(--d, 0) * 90ms + 120ms); }
.js .flow > i.in { opacity: 1; transform: none; }

/* Interaction, 180ms */
a.card, .card, .panel { transition: border-color var(--duration-ui), box-shadow var(--duration-ui), transform var(--duration-ui) var(--ease); }
a.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(20, 36, 68, .35); }
.btn svg { transition: transform var(--duration-ui) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.ticks li::before { transition: transform var(--duration-ui) var(--ease); }
.ticks li:hover::before { transform: rotate(45deg); }
.faq details[open] .ans { animation: rise .3s var(--ease) both; }
.site-header { transition: box-shadow var(--duration-ui); }
.site-header.scrolled { box-shadow: 0 8px 24px -18px rgba(11, 18, 32, .5); }
.bar .track i { transition: width .8s var(--ease); }
.result { animation: rise .5s var(--ease) both; }
.mobile-panel.open { animation: rise .25s var(--ease) both; }
.progress i { transition: width .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .steps li, .js .state, .js .flow > i { opacity: 1 !important; transform: none !important; }
  .js .steps li::before, .js .state::after { transform: none !important; }
  .hero *, .page-hero *, .hero .spec-card, .result { animation: none !important; }
}