/* Motion layer: brand intro, page transitions, ambient light, micro-interactions. Loaded after app.css. */
:root{--eo:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);--eio:cubic-bezier(.65,0,.35,1);--vx:50vw;--vy:40vh}
@property --p{syntax:"<number>";inherits:true;initial-value:0}
@property --fxa{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- page transitions (cross-document View Transitions) ---------- */
@view-transition{navigation:auto}
.side{view-transition-name:pg-side}
.topbar{view-transition-name:pg-top}
.tabs{view-transition-name:pg-tabs}
.side a.n.on{view-transition-name:pg-pill}
.tabs a.on{view-transition-name:pg-tab}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--eo)}
::view-transition-old(root){animation:fx-old .34s var(--eio) both}
::view-transition-new(root){animation:fx-new .62s var(--eo) both}
::view-transition-old(pg-side),::view-transition-new(pg-side),::view-transition-old(pg-tabs),::view-transition-new(pg-tabs),::view-transition-old(pg-top),::view-transition-new(pg-top){animation:none;mix-blend-mode:normal}
::view-transition-group(pg-pill),::view-transition-group(pg-tab){animation-timing-function:var(--spring);animation-duration:.5s}
@keyframes fx-old{to{opacity:0;transform:scale(.965);filter:blur(6px)}}
@keyframes fx-new{from{clip-path:circle(0 at var(--vx) var(--vy));filter:brightness(1.25)}to{clip-path:circle(150vmax at var(--vx) var(--vy));filter:none}}

/* loading bar while the next page is on its way */
#pg-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cobalt2),var(--amber),var(--amber2));box-shadow:0 0 14px #f2982caa}
#pg-bar.go{animation:fx-bar 2.4s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes fx-bar{0%{transform:scaleX(0)}30%{transform:scaleX(.55)}100%{transform:scaleX(.92)}}

/* ---------- brand intro (once per session) ---------- */
/* hidden until the intro opens; if fx.js never runs, the page shows itself after 3.2s */
html.fx-intro body>:not(#pg-intro){animation:fx-unhide 3.2s step-end both}
@keyframes fx-unhide{from{opacity:0}to{opacity:1}}
#pg-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(60vmax 50vmax at 30% 20%,#343be640,transparent 60%),radial-gradient(50vmax 40vmax at 80% 90%,#f2982c30,transparent 60%),var(--night);color:#fff;overflow:hidden;cursor:pointer}
#pg-intro .stage{display:grid;justify-items:center;gap:22px;position:relative}
#pg-intro .mk{position:relative;width:clamp(96px,14vw,150px);aspect-ratio:1028/1140;filter:drop-shadow(0 0 1.5px #ffffffb0) drop-shadow(0 0 28px #343be6cc)}
#pg-intro .mk i{position:absolute;inset:0;background:url(/mark.png) center/contain no-repeat}
#pg-intro .mk i:first-child{clip-path:inset(0 61% 0 0);animation:fx-l .8s var(--spring) both}
#pg-intro .mk i:nth-child(2){clip-path:inset(0 0 0 39%);animation:fx-r .8s var(--spring) .08s both}
#pg-intro .mk b{position:absolute;inset:0;-webkit-mask:url(/mark.png) center/contain no-repeat;mask:url(/mark.png) center/contain no-repeat;background:linear-gradient(105deg,transparent 35%,#fff 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:fx-sweep .9s var(--eio) .75s both;mix-blend-mode:screen}
#pg-intro .mk::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;border:2px solid var(--amber2);opacity:0;animation:fx-ring 1s var(--eo) .7s both}
#pg-intro .wm{display:flex;font:900 clamp(30px,5.4vw,64px)/1 var(--disp);letter-spacing:.02em}
#pg-intro .wm span{display:inline-block;animation:fx-letter .7s var(--spring) both;animation-delay:calc(.55s + var(--i)*.05s)}
#pg-intro .tg{font:700 clamp(10px,1.1vw,13px) var(--disp);color:var(--amber2);letter-spacing:.2em;animation:fx-track 1s var(--eo) 1s both}
#pg-intro .ln{width:min(260px,50vw);height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);transform:scaleX(0);animation:fx-line .8s var(--eo) .95s both}
#pg-intro.out{animation:fx-intro-out .7s var(--eio) forwards;pointer-events:none}
#pg-intro.out .stage{animation:fx-stage-out .6s var(--eio) forwards}
@keyframes fx-l{from{transform:translateX(-70%) rotate(-14deg);opacity:0;filter:blur(10px)}}
@keyframes fx-r{from{transform:translateX(70%) rotate(14deg);opacity:0;filter:blur(10px)}}
@keyframes fx-sweep{to{background-position:150% 0}}
@keyframes fx-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(34);border-width:1px}}
@keyframes fx-letter{from{opacity:0;transform:translateY(60%) rotate(8deg);filter:blur(8px)}}
@keyframes fx-track{from{opacity:0;letter-spacing:1.2em}to{opacity:1;letter-spacing:.6em}}
@keyframes fx-line{to{transform:scaleX(1)}}
@keyframes fx-intro-out{to{clip-path:circle(0 at 50% 50%);opacity:.6}}
@keyframes fx-stage-out{to{transform:scale(1.6);opacity:0;filter:blur(12px)}}
html.fx-after .layout,html.fx-after .login{animation:fx-land .9s var(--eo) both}
@keyframes fx-land{from{transform:scale(1.04);filter:blur(8px);opacity:0}}

/* ---------- ambient light ---------- */
.side{isolation:isolate;background:radial-gradient(240px 300px at 10% 104%,#2b31d655,transparent 70%),radial-gradient(200px 220px at 90% 0%,#f2982c1f,transparent 70%)}
.side::before{content:"";position:fixed;left:0;top:0;width:248px;height:100vh;z-index:-1;pointer-events:none;background:conic-gradient(from var(--fxa) at 30% 70%,#343be622,transparent 30%,#f2982c14 55%,transparent 80%,#343be622);filter:blur(40px);animation:fx-spin 18s linear infinite}
@keyframes fx-spin{to{--fxa:360deg}}
.fx-cv{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero,.login{--hx:0;--hy:0}
.hero::after{transform:translate(calc(var(--hx)*-18px),calc(var(--hy)*-14px)) rotate(-10deg);transition:transform .6s var(--eo)}
.hero h1,.hero .ring{transform:translate(calc(var(--hx)*6px),calc(var(--hy)*5px));transition:transform .6s var(--eo)}
.hero{background-size:160% 160%;animation:fx-mesh 14s ease-in-out infinite alternate}
@keyframes fx-mesh{to{background-position:100% 50%}}
.ring{animation:fx-ring-in 1.3s var(--eo) .25s both}
@keyframes fx-ring-in{from{--p:0}}

/* ---------- headings: words rise in ---------- */
.fx-w{display:inline-block;animation:fx-word .7s var(--eo) both;animation-delay:calc(.08s + var(--i)*.06s)}
@keyframes fx-word{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}}

/* ---------- cards: cursor light + tilt ---------- */
.fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#343be61f,transparent 60%);z-index:0}
.fx-lit>.fx-glow{opacity:1}
.card.feat .fx-glow,.hero .fx-glow{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#ffffff26,transparent 60%)}
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--eo),box-shadow .3s}
.fx-tilt.fx-lit{--ty:-4px;transition:transform .12s linear,box-shadow .3s}

/* ---------- scroll reveal ---------- */
.fx-r{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--eo),transform .7s var(--eo);transition-delay:calc(var(--i,0)*60ms)}
.fx-r.fx-in{opacity:1;transform:none}

/* ---------- press feedback ---------- */
.btn,a.n,.tabs a,.box,.acctabs a,.hrsec a{position:relative;overflow:hidden}
.box{overflow:visible}
.btn:active,.tabs a:active{transform:scale(.96)}
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px;background:currentColor;opacity:.28;animation:fx-rip .6s var(--eo) forwards}
@keyframes fx-rip{to{transform:scale(var(--s,30));opacity:0}}
.btn.am:hover{background-image:linear-gradient(110deg,var(--amber2),var(--amber) 30% 42%,#ffe2b8 50%,var(--amber) 58% 70%,var(--amber2));background-size:200% 100%;animation:fx-shine 1.4s linear infinite}
@keyframes fx-shine{to{background-position:-200% 0}}
a.n:not(.on) svg{transition:transform .35s var(--spring)}
a.n:not(.on):hover svg{transform:scale(1.18) rotate(-6deg)}

/* checklist tick burst */
.fx-burst{position:fixed;width:0;height:0;pointer-events:none;z-index:60}
.fx-burst i{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--c);animation:fx-spark .65s var(--eo) forwards}
@keyframes fx-spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.fx-burst b{position:absolute;width:40px;height:40px;margin:-20px;border-radius:50%;border:2px solid #27c487;animation:fx-pulse-ring .55s var(--eo) forwards}
@keyframes fx-pulse-ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}

/* AI chat bubbles */
.b.fx-pop{animation:fx-bubble .5s var(--spring) both}
@keyframes fx-bubble{from{opacity:0;transform:translateY(14px) scale(.92)}}
.b.a.fx-ans{animation:fx-ans .6s var(--eo)}
@keyframes fx-ans{from{box-shadow:0 0 0 0 #f2982c88}to{box-shadow:0 0 0 14px #f2982c00}}

/* errors shake */
.err{animation:fx-shake .5s var(--eo) .3s both}
@keyframes fx-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* login */
.login form{animation:fx-form .9s var(--spring) .2s both}
@keyframes fx-form{from{opacity:0;transform:translateY(40px) rotateX(12deg) scale(.95)}}
.login form.fx-busy .btn{color:transparent}
.login form.fx-busy .btn::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;border:3px solid var(--night);border-right-color:transparent;animation:fx-rot .7s linear infinite}
@keyframes fx-rot{to{transform:rotate(360deg)}}
.login input{transition:box-shadow .25s,border-color .25s}
.login input:focus{box-shadow:0 0 0 4px #f2982c40}


/* ---------- more life everywhere ---------- */
/* floating letters of many languages behind the work sheet */
.main{position:relative;isolation:isolate}
.fx-glyphs{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;border-radius:inherit;animation:none!important}
.fx-glyphs span{position:absolute;font:900 var(--s,60px)/1 var(--disp);color:var(--c,#1d22ad);opacity:var(--o,.05);animation:fx-glyph var(--d,30s) ease-in-out var(--w,0s) infinite alternate}
@keyframes fx-glyph{from{transform:translate(0,0) rotate(var(--r0,-10deg))}to{transform:translate(var(--dx,60px),var(--dy,-80px)) rotate(var(--r1,12deg))}}
/* tap ring where the pointer goes down */
.fx-tap{position:fixed;width:16px;height:16px;margin:-8px;border-radius:50%;border:2px solid var(--amber);pointer-events:none;z-index:90;animation:fx-tap .5s var(--eo) forwards}
.fx-tap::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--amber2);animation:fx-tap-dot .35s var(--eo) forwards}
@keyframes fx-tap{to{transform:scale(3.4);opacity:0;border-width:1px}}
@keyframes fx-tap-dot{to{transform:scale(0);opacity:0}}
/* section headers, bars, pills, badges */
.sec::before{animation:fx-secbar .8s var(--spring) both;transform-origin:0 50%}
@keyframes fx-secbar{from{transform:scaleX(0)}}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);transform-origin:0 50%;animation:fx-secbar 1.2s var(--eo) .2s both}
@keyframes fx-grow{from{width:0}}
.prog i,.hbar i,.bbar i{animation:fx-grow 1.1s var(--eo) .2s both;position:relative;overflow:hidden}
.prog i::after,.hbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff80 50%,transparent 70%) -100% 0/50% 100% no-repeat;animation:fx-bar-shine 2.6s ease-in-out 1.2s infinite}
@keyframes fx-bar-shine{to{background-position:250% 0}}
.pill{animation:fx-pill .5s var(--spring) both;animation-delay:calc(.15s + var(--i,0)*30ms)}
@keyframes fx-pill{from{transform:scale(.4);opacity:0}}
.pill.bad{animation:fx-pill .5s var(--spring) both,fx-throb 1.8s ease-in-out 1s infinite}
@keyframes fx-throb{50%{box-shadow:0 0 0 5px #d2353c22}}
.dot{animation:fx-dot 2s ease-in-out infinite}
@keyframes fx-dot{50%{box-shadow:0 0 0 5px #f2982c33}}
.card.feat{animation:fx-feat 4s ease-in-out infinite}
@keyframes fx-feat{50%{box-shadow:0 24px 50px -18px #343be6dd,0 0 0 2px #ffc07055}}
.side>img{animation:fx-logo 7s ease-in-out infinite}
@keyframes fx-logo{0%,80%,100%{filter:brightness(0) invert(1) drop-shadow(0 0 0 #ffc07000)}88%{filter:brightness(0) invert(1) drop-shadow(0 0 12px #ffc070)}}
.tag{background:linear-gradient(90deg,var(--amber2),#fff,var(--amber2));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shine 4s linear infinite}
/* table rows slide in */
.fx-row{animation:fx-row .5s var(--eo) both;animation-delay:calc(.1s + var(--i)*28ms)}
@keyframes fx-row{from{opacity:0;transform:translateX(-14px)}}
/* active nav item breathes */
a.n.on{background-size:200% 100%;background-image:linear-gradient(110deg,var(--amber2),var(--amber) 40%,#ffd59a 50%,var(--amber) 60%,var(--amber2));animation:fx-shine 5s linear infinite}
/* hero headline glow */
.hero h1{text-shadow:0 0 40px #343be6aa}
.hero .eyebrow{animation:fx-word .7s var(--eo) both}
@media(max-width:820px){.side::before{display:none}.fx-glyphs span{--s:40px}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.fx-intro body>:not(#pg-intro){opacity:1}
  .fx-r{opacity:1;transform:none}
}