/* PeBord visual effects: iOS-style springs, reveal on scroll, liquid glass. All motion is off with prefers-reduced-motion. */
:root{--spring:cubic-bezier(.32,.72,0,1);--spring2:cubic-bezier(.34,1.56,.64,1);--gl1:rgba(255,255,255,.62);--gl2:rgba(255,255,255,.2);--glb:rgba(255,255,255,.7);--gls:rgba(90,45,0,.30)}
@media(prefers-color-scheme:dark){:root{--gl1:rgba(255,255,255,.12);--gl2:rgba(255,255,255,.04);--glb:rgba(255,255,255,.22);--gls:rgba(0,0,0,.55)}}

/* ---------- liquid glass ---------- */
.glass{position:relative;isolation:isolate;border-radius:24px;border:1px solid var(--glb);
 background:linear-gradient(135deg,var(--gl1),var(--gl2));
 -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.04);backdrop-filter:blur(26px) saturate(190%) brightness(1.04);
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 26px rgba(255,255,255,.16),0 22px 44px -20px var(--gls),0 2px 6px rgba(0,0,0,.05)}
@media(prefers-color-scheme:dark){.glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.05),0 22px 44px -20px var(--gls)}}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:.55;transition:opacity .4s;
 background:radial-gradient(420px circle at var(--mx,18%) var(--my,0%),rgba(255,255,255,.7),rgba(255,255,255,0) 55%)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;padding:1px;
 background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.55));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.8}
@media(prefers-color-scheme:dark){.glass::before{background:radial-gradient(420px circle at var(--mx,18%) var(--my,0%),rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}.glass::after{opacity:.35}}
@media(hover:hover){.glass:hover::before{opacity:1}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--bg)}}
.nav.glass{position:sticky;transition:transform .5s var(--spring),box-shadow .4s,background .4s}.nav.scrolled{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),0 16px 34px -14px var(--gls)}
.feat.glass,.steps .glass,.faq .glass{transition:transform .5s var(--spring),box-shadow .4s}
@media(hover:hover){.feat.glass:hover,.steps .glass:hover{transform:translateY(-4px) scale(1.012)}}

/* buttons: spring press + sheen */
.btn{transition:transform .35s var(--spring2),box-shadow .3s,background .3s;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.95);transition-duration:.12s}
.btn.pri{position:relative;overflow:hidden;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(0,0,0,.18),0 12px 26px -10px var(--ac)}
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .8s var(--spring)}
@media(hover:hover){.btn.pri:hover::after{left:130%}}

/* ---------- reveal on scroll ---------- */
.fx .rv,.fx [data-fx]{opacity:0;transform:translate3d(0,34px,0) scale(.985);filter:blur(6px);
 transition:opacity .9s var(--spring),transform 1s var(--spring),filter .9s var(--spring);transition-delay:calc(var(--d,0)*85ms);will-change:opacity,transform}
.fx [data-fx=fade]{transform:none}
.fx [data-fx=scale]{transform:scale(.88)}
.fx [data-fx=left]{transform:translate3d(-40px,0,0)}
.fx [data-fx=right]{transform:translate3d(40px,0,0)}
.fx .rv.in,.fx [data-fx].in{opacity:1;transform:none;filter:none;will-change:auto}
/* icons pop in with a spring after their card appears */
.fx .feat .ic{transform:scale(.4) rotate(-12deg);opacity:0;transition:transform .8s var(--spring2) .25s,opacity .5s .25s}
.fx .feat.in .ic{transform:none;opacity:1}
.fx .steps .num{transform:scale(0);transition:transform .7s var(--spring2) .3s}.fx .steps>div.in .num{transform:none}
/* words rise out of a mask */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.fx .split .w>i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .95s var(--spring);transition-delay:calc(var(--wi,0)*60ms + 120ms)}
.fx .split.in .w>i{transform:none}
.split em .w>i{color:var(--ac)}
/* FAQ */
.faq details[open] p{animation:fxdrop .5s var(--spring)}@keyframes fxdrop{from{opacity:0;transform:translateY(-8px)}}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:12px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;transition:transform .45s var(--spring2)}.faq details[open] summary::after{transform:rotate(45deg)}
/* background blobs drift */
.bg i{transition:transform .2s linear}.bg i:nth-child(1){animation:drift 22s ease-in-out infinite alternate}.bg i:nth-child(2){animation:drift 28s ease-in-out -8s infinite alternate-reverse}.bg i:nth-child(3){animation:drift 32s ease-in-out -14s infinite alternate}
@keyframes drift{to{margin:40px 0 0 60px;scale:1.12}}
/* hero art */
.hero-art{margin-top:28px;max-width:340px}
.hero-art .chip{background:linear-gradient(135deg,var(--gl1),var(--gl2));border:1px solid var(--glb);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 24px -10px var(--gls)}
@media(max-width:820px){.hero-art{display:none}}
/* app / doc pages */
body{animation:fxpage .7s var(--spring) both}@keyframes fxpage{from{opacity:0}}
/* toast + sheets already spring; make modal glass */
.pwa-modal.glass,.pwa-sheet.glass{background:linear-gradient(135deg,var(--gl1),var(--gl2))}

@media(prefers-reduced-motion:reduce){
 .fx .rv,.fx [data-fx],.fx .feat .ic,.fx .split .w>i,.fx .steps .num{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
 .bg i,body,.faq details[open] p,.art img,.art .chip{animation:none!important}.btn,.btn.pri::after,.glass{transition:none!important}
}
.fx-fail .rv,.fx-fail [data-fx],.fx-fail .feat .ic,.fx-fail .split .w>i,.fx-fail .steps .num{opacity:1!important;transform:none!important;filter:none!important}
.pwa-sheet.glass{position:fixed}