/* ==========================================================================
   FormFit motion layer v2 — animations, transitions, micro-interactions.
   Everything is transform/opacity based (GPU-friendly, zero layout shift)
   and fully disabled for prefers-reduced-motion users.
   ========================================================================== */

/* ---- smooth cross-page transitions (progressive enhancement) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 190ms var(--ease-io) both}
::view-transition-new(root){animation:vt-in 300ms var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- layout polish: sections authored without an inner .wrap were
   rendering edge-to-edge; give their children the same containment ---- */
.sec>:not(.wrap){max-width:var(--maxw);margin-left:auto;margin-right:auto;
padding-left:1.15rem;padding-right:1.15rem}

/* ---- gentle page fade on first paint ---- */
body{animation:page-in 380ms ease-out both}
@keyframes page-in{from{opacity:0}to{opacity:1}}

/* ---- reading progress bar (injected by core.js) ---- */
#pgbar{position:fixed;left:0;top:0;height:3px;width:0;z-index:130;pointer-events:none;
background:linear-gradient(90deg,var(--accent) 0%,var(--pop) 100%);
border-radius:0 99px 99px 0;box-shadow:0 0 10px var(--accent-ring);opacity:0;
transition:opacity var(--t)}

/* ---- scroll reveals (stagger is applied per batch by core.js) ---- */
.rv{opacity:0;transform:translateY(18px) scale(.985);
transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rv.in{opacity:1;transform:none}
.rise{animation:rise var(--t-slow) var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- hero: staggered entrance + living background ---- */
.hero .eyebrow{animation:rise 420ms var(--ease) both}
.hero h1{animation:rise 480ms var(--ease) 70ms both}
.hero .lede{animation:rise 500ms var(--ease) 140ms both}
.hero .trust{animation:rise 520ms var(--ease) 240ms both}
.trust{list-style:none;padding-left:0}
.hero .trust li{animation:rise 460ms var(--ease) both}
.hero .trust li:nth-child(1){animation-delay:300ms}
.hero .trust li:nth-child(2){animation-delay:380ms}
.hero .trust li:nth-child(3){animation-delay:460ms}
.hero .trust li:nth-child(4){animation-delay:540ms}
.hero::before{animation:blob-a 18s var(--ease-io) infinite alternate}
.hero::after{content:"";position:absolute;right:-14%;top:-34%;width:56%;height:130%;
z-index:-1;pointer-events:none;
background:radial-gradient(closest-side,var(--pop-soft),transparent 70%);
opacity:.55;animation:blob-b 22s var(--ease-io) infinite alternate}
@keyframes blob-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3%,5%,0) scale(1.07)}}
@keyframes blob-b{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5%,7%,0) scale(1.1)}}
.hero h1 em{font-style:italic;
background:linear-gradient(100deg,var(--accent) 20%,var(--pop) 50%,var(--accent) 80%);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:220% 0}}

/* ---- header & brand ---- */
.brand .m{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.brand:hover .m{transform:rotate(-8deg) scale(1.1);box-shadow:0 4px 12px var(--accent-ring)}
nav.main a{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
nav.main a:active{transform:scale(.95)}
.icon-btn{transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn:active{transform:scale(.88)}
#themeBtn svg,#soundBtn svg{transition:transform var(--t) var(--ease)}
#themeBtn:hover svg{transform:rotate(-18deg) scale(1.05)}
#soundBtn:hover svg{transform:scale(1.12)}

/* ---- smooth theme crossfade (class applied briefly by core.js) ---- */
html.tswap,html.tswap *,html.tswap *::before,html.tswap *::after{
transition:background-color 400ms var(--ease),color 400ms var(--ease),
border-color 400ms var(--ease),box-shadow 400ms var(--ease),fill 400ms var(--ease) !important}

/* ---- cards: lift, glow sweep, playful icons ---- */
.grid .tcard{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.grid .tcard:hover{transform:translateY(-4px)}
html[data-theme=dim] @keyframes sheen{0%{left:-80%;opacity:0}15%{opacity:1}100%{left:130%;opacity:0}}
.tcard .ico{display:inline-block;transition:transform var(--t) var(--ease)}
.tcard .go{transition:transform var(--t) var(--ease)}
.tcard:hover .go{transform:translateX(4px)}
.sec .card{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.sec .grid>.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong)}

/* ---- chips ---- */
.chip{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.chip:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(35,32,28,.09)}
.chip:active{transform:translateY(0) scale(.95)}

/* ---- buttons: ripple + lively press ---- */
.btn{position:relative;overflow:hidden}
.btn:active{transform:translateY(1px) scale(.98)}
.btn .ripple{position:absolute;border-radius:50%;pointer-events:none;
transform:translate(-50%,-50%) scale(0);background:rgba(255,255,255,.5);
animation:ripple 550ms var(--ease) forwards}
.btn.ghost .ripple,.btn.quiet .ripple,.btn.google .ripple{background:var(--accent-ring)}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---- dropzone ---- */
.drop .di{transition:transform var(--t) var(--ease),background var(--t)}
.drop:hover .di{transform:translateY(-3px) scale(1.08)}
.drop.over{animation:drop-pulse 1s var(--ease-io) infinite}
.drop.over .di{transform:scale(1.12)}
@keyframes drop-pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-ring)}50%{box-shadow:0 0 0 12px rgba(0,0,0,0)}}

/* ---- progress / working ---- */
.working:not(.hide){animation:soft-in var(--t-slow) var(--ease) both}
.working .ring{animation:ring-pulse 1.8s var(--ease-io) infinite}
.working .ring .fg{filter:drop-shadow(0 0 4px var(--accent-ring))}
@keyframes ring-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes soft-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- result celebration ---- */
.result{position:relative;animation:result-pop 560ms cubic-bezier(.34,1.56,.64,1) both}
.result .big{animation:rise 420ms var(--ease) 120ms both}
@keyframes result-pop{0%{opacity:0;transform:translateY(14px) scale(.93)}
60%{opacity:1;transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:none}}
.cfx{position:absolute;left:50%;top:36%;width:7px;height:11px;border-radius:2px;
pointer-events:none;z-index:6;opacity:0;
animation:cfx var(--cfx-t,900ms) cubic-bezier(.15,.6,.35,1) var(--cfx-d,0ms) forwards}
.cfx.c1{background:var(--accent)}.cfx.c2{background:var(--pop)}
.cfx.c3{background:var(--ok)}.cfx.c4{background:var(--warn)}
@keyframes cfx{0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}
100%{opacity:0;transform:translate(calc(-50% + var(--cfx-x,0px)),calc(-50% + var(--cfx-y,-70px)))
rotate(var(--cfx-r,200deg)) scale(.7)}}

/* ---- toasts: springy entrance ---- */
.toast{animation:tin 460ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes tin{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}

/* ---- disclosures ---- */
.faq details[open] .a{animation:faq-in 340ms var(--ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.faq summary:hover{transform:translateX(3px)}

/* ---- steps ---- */
.steps li::before{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.steps li:hover::before{transform:scale(1.15);box-shadow:0 3px 10px var(--accent-ring)}

/* ---- tables, footer, toolbar ---- */
table.tbl tr{transition:background var(--t-fast)}
table.tbl tr:hover td{background:var(--surface-2)}
footer.ft a{display:inline-block;transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
footer.ft a:hover{transform:translateX(3px)}
.vbar button svg{transition:transform var(--t-fast) var(--ease)}
.vbar button:hover svg{transform:scale(1.15)}

/* ---- reduced motion: calm everything down ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important}
html{scroll-behavior:auto}
.rv{opacity:1;transform:none;transition:none}
.hero::before,.hero::after{animation:none}
.hero h1 em{animation:none;background-position:0 0}
#pgbar,.cfx,.tcard::before,.btn .ripple{display:none}
::view-transition-old(root),::view-transition-new(root){animation:none !important}
}

/* ===== visual upgrade layer: hero art & chip motion ===== */
.hero-art img{animation:art-in 720ms var(--ease) 180ms both,art-float 7s ease-in-out 2s infinite alternate}
@keyframes art-in{from{opacity:0;transform:translateY(26px) scale(.955)}to{opacity:1;transform:none}}
@keyframes art-float{from{transform:translateY(0)}to{transform:translateY(-11px)}}
.fchip{animation:rise 520ms var(--ease) both,chip-bob 4.6s ease-in-out infinite alternate}
.fchip.a{animation-delay:560ms,1.4s}
.fchip.b{animation-delay:700ms,1.9s}
.fchip.c{animation-delay:840ms,2.4s}
@keyframes chip-bob{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.tcard .ico{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.why-grid .art img{transition:transform var(--t-slow) var(--ease)}
.why-grid:hover .art img{transform:translateY(-6px) rotate(-1.2deg)}
.cta-art{animation:art-float 6s ease-in-out 1s infinite alternate}
@media (prefers-reduced-motion:reduce){
.hero-art img,.fchip,.cta-art{animation:none}
}

/* ============ mascot motion ============ */
.hero-art img.m-hero{animation:mascot-pop 640ms var(--ease) 760ms both,mascot-bob 3.6s ease-in-out 1.8s infinite alternate}
.why-grid .art img.m-why{animation:mascot-bob 4.2s ease-in-out infinite alternate}
.cta-duo .m-cta{animation:mascot-bob 3s ease-in-out infinite alternate}
.m-404{animation:mascot-tilt 3.4s ease-in-out infinite}
.m-tools{transition:transform .3s var(--ease)}
.m-tools:hover{transform:rotate(-5deg) scale(1.06)}
@keyframes mascot-pop{from{opacity:0;transform:scale(.4) translateY(26px)}62%{opacity:1;transform:scale(1.07) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes mascot-bob{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes mascot-tilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg)}}
@media (prefers-reduced-motion:reduce){.hero-art img.m-hero,.why-grid .art img.m-why,.cta-duo .m-cta,.m-404{animation:none}}
/* ===== SVG micro-motion (append to motion.css) ===== */
/* 1. drop zone: rising arrow + marching dashed border */
.drop .di .ar{animation:up-arrow 2.4s var(--ease-io) infinite}
@keyframes up-arrow{0%{opacity:0;transform:translateY(2.5px)}25%{opacity:1;transform:none}
70%{opacity:1;transform:translateY(-1.5px)}90%,100%{opacity:0;transform:translateY(-3.5px)}}
.drop:hover .di .ar,.drop.over .di .ar{animation:none}
/* 2. success: check-in-circle draw-on */
.osz .okc{display:inline-block;width:26px;height:26px;vertical-align:-5px;margin-right:.3rem;color:var(--ok)}
.osz:has(.okc) .big{display:inline-block;vertical-align:middle}
.okc circle,.okc path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1}
.okc circle{transform:rotate(-90deg);transform-origin:center}
.okc.draw circle{animation:draw 300ms ease-out both}
.okc.draw path{animation:draw 260ms ease-out 220ms both}
@keyframes draw{to{stroke-dashoffset:0}}
/* 3. hero trust ticks: staggered draw-on, once */
.hero .trust li svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 380ms ease-out both}
.hero .trust li:nth-child(1) svg path{animation-delay:420ms}
.hero .trust li:nth-child(2) svg path{animation-delay:470ms}
.hero .trust li:nth-child(3) svg path{animation-delay:520ms}
.hero .trust li:nth-child(4) svg path{animation-delay:570ms}
/* 4. steps: amber dot pings once on reveal */
.steps li::after{content:"";position:absolute;left:.62rem;top:-.32rem;width:7px;height:7px;border-radius:50%;
background:#f2a541;box-shadow:0 0 0 2px var(--bg,#fbfaf8);opacity:0;transform:scale(0)}
.rv.in .steps li::after,.steps li.rv.in::after{animation:ping 640ms var(--ease) both}
.steps li:nth-child(2)::after{animation-delay:110ms}
.steps li:nth-child(3)::after{animation-delay:220ms}
.steps li:nth-child(4)::after{animation-delay:330ms}
.steps li:nth-child(5)::after{animation-delay:440ms}
.steps li:nth-child(n+6)::after{animation-delay:550ms}
@keyframes ping{0%{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.7)}100%{opacity:1;transform:scale(1)}}
/* 5. tool tile: 3-point sparkle on hover */
.tcard .tart{position:relative}
.tcard .tart .spk{position:absolute;top:8px;right:8px;width:30px;height:30px;color:#f2a541;pointer-events:none}
.tcard .tart .spk path{opacity:0;transform-box:fill-box;transform-origin:center}
.tcard:hover .tart .spk path{animation:spk 600ms var(--ease) both}
.tcard:hover .tart .spk path:nth-child(2){animation-delay:90ms}
.tcard:hover .tart .spk path:nth-child(3){animation-delay:180ms}
@keyframes spk{0%{opacity:0;transform:scale(0) rotate(-40deg)}55%{opacity:1;transform:scale(1.25) rotate(8deg)}100%{opacity:1;transform:none}}
/* 6. reduced motion: no motion, final states visible */
@media (prefers-reduced-motion:reduce){
.drop .di .ar,.steps li::after,.tcard:hover .tart .spk path{animation:none}
.okc.draw circle,.okc.draw path,.hero .trust li svg path{animation:none;stroke-dashoffset:0}
.steps li::after{opacity:1;transform:none}
.tcard:hover .tart .spk path{opacity:1}
}