/* Motion layer (loaded after style.css). fx.js drives .page-enter / .reveal / --mx --my / --px --py. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pop { from { opacity: 0; scale: .9; translate: 0 26px; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes sweep { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(300%) skewX(-20deg); } }
@keyframes stripes { to { background-position: 28px 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes ring { from { transform: scale(.6); opacity: 0; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px #22c55e00; } 100% { box-shadow: 0 0 0 0 #22c55e00; } }

/* route change: content slides in */
main.page-enter > * { animation: rise .6s var(--ease-out) both; }
main.page-enter > :nth-child(2) { animation-delay: .06s; }
main.page-enter > :nth-child(3) { animation-delay: .12s; }
main.page-enter > :nth-child(4) { animation-delay: .18s; }
main.page-enter > :nth-child(n+5) { animation-delay: .24s; }
main.page-enter > .hero { animation: none; }

/* hero: staggered headline, hand-drawn underline, floating cards with mouse parallax */
.hero > div:first-child > * { animation: rise .8s var(--ease-out) both; }
.hero > div:first-child > :nth-child(1) { animation-delay: .05s; }
.hero > div:first-child > :nth-child(2) { animation-delay: .15s; }
.hero > div:first-child > :nth-child(3) { animation-delay: .3s; }
.hero > div:first-child > :nth-child(4) { animation-delay: .42s; }
.hero > div:first-child > :nth-child(5) { animation-delay: .52s; }
.hero > div:first-child > :nth-child(6) { animation-delay: .62s; }
.scribble { position: relative; display: inline-block; }
.scribble svg { position: absolute; left: -2%; bottom: -.06em; width: 104%; height: .3em; overflow: visible; }
.scribble path { fill: none; stroke: var(--acc); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw 1.1s .9s var(--ease-out) forwards; }
.float {
  transform: translate(calc(var(--px, 0) * var(--depth, 20) * -1px), calc(var(--py, 0) * var(--depth, 20) * -1px)) rotate(var(--rot, 0deg));
  transition: transform .6s var(--ease-out), box-shadow .3s;
  animation: pop .9s var(--spring) both, bob 6s ease-in-out infinite;
}
.float.f1 { animation-delay: .35s, 1.3s; }
.float.f2 { animation-delay: .5s, 2.1s; animation-duration: .9s, 7s; }
.float.f3 { animation-delay: .45s, 1.7s; animation-duration: .9s, 6.5s; }
.float.f4 { animation-delay: .6s, 2.5s; animation-duration: .9s, 7.5s; }
.float .dot { box-shadow: 0 0 0 0 #22c55e80; animation: pulse 2s infinite; }

/* running ribbon of specs */
.marquee { margin: 64px 0 0; padding: 16px 0; border-block: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; align-items: center; gap: 26px; padding-right: 26px; animation: marquee 38s linear infinite; font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.marquee-track i { font-style: normal; color: var(--acc); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee + .stats-strip { margin-top: 28px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out) var(--d, 0ms), transform .7s var(--ease-out) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* interactive surfaces: lift + pointer-follow glow */
@media (hover: hover) and (pointer: fine) {
  .card, .stat, .preset { transition: transform .35s var(--ease-out), box-shadow .35s, border-color .2s, background-color .2s; }
  .reveal.in { transition: opacity .7s var(--ease-out) var(--d, 0ms), transform .35s var(--ease-out), box-shadow .35s, border-color .2s; }
  .grid > .card:hover, .stat:hover, .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .preset:hover { transform: translateY(-2px); }
  .card, .stat, .preset, .drop { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), var(--acc-soft), transparent 45%); }
  .tier.hot { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), #ff5a1f40, transparent 45%); }
  .float:hover { box-shadow: 0 22px 50px #10101429; }
}

/* buttons: arrow nudge, shine sweep, press spring */
.btn .arr { display: inline-block; transition: transform .3s var(--spring); }
.btn:hover .arr { transform: translateX(5px); }
.btn.shine { position: relative; overflow: hidden; isolation: isolate; }
.btn.shine::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, #ffffff66, transparent); transform: translateX(-120%) skewX(-20deg); pointer-events: none; }
.btn.shine:hover::after, .btn.shine:focus-visible::after { animation: sweep .9s var(--ease-out); }
.btn:active { transform: scale(.96); }
.chip { transition: background .2s, border-color .2s, transform .25s var(--spring); }
.chip:active { transform: scale(.94); }

/* drop zone: idle bob, wiggle while a file hovers over */
.drop .ico { animation: bob 3.2s ease-in-out infinite; }
.drop.over .ico { animation: wiggle .5s ease-in-out infinite; }
.drop.over { box-shadow: 0 0 0 6px var(--acc-soft); }

/* progress + quality report */
.progress i { background-image: linear-gradient(45deg, #ffffff40 25%, transparent 25% 50%, #ffffff40 50% 75%, transparent 75%); background-size: 28px 28px; animation: stripes .8s linear infinite; }
.progress.indet i { animation: slide 1.1s infinite ease-in-out, stripes .8s linear infinite; }
.q-bar i { transform-origin: left; animation: grow 1.1s var(--ease-out) both; }
.q-score { animation: ring .7s var(--spring) both; }
.checks li { animation: rise .5s var(--ease-out) both; }
.checks li:nth-child(2) { animation-delay: .05s; }
.checks li:nth-child(3) { animation-delay: .1s; }
.checks li:nth-child(4) { animation-delay: .15s; }
.checks li:nth-child(5) { animation-delay: .2s; }
.checks li:nth-child(n+6) { animation-delay: .25s; }
details[open] > :not(summary) { animation: rise .4s var(--ease-out) both; }
details summary::after { transition: transform .35s var(--spring), background .2s, color .2s; }
details[open] summary::after { transform: rotate(180deg); }

/* toast springs up, theme button spins, menus drop in */
.toast { transition: opacity .25s, transform .45s var(--spring); }
.theme-btn svg { transition: transform .5s var(--spring); }
.theme-btn:hover svg { transform: rotate(30deg) scale(1.12); }
.menu-pop { animation: rise .25s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .scribble path { stroke-dashoffset: 0; }
}