/* ---------- v5: transitions everywhere. Only transform / opacity / clip-path / translate animate. ---------- */
:root{--ease-spring:cubic-bezier(.34,1.56,.64,1);--tbt:64px}

/* boot loader */
.boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);transition:opacity .5s var(--ease-out),visibility 0s linear .5s}
.boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-mark{width:46px;height:46px;border-radius:14px;background:var(--accent);clip-path:polygon(0 100%,38% 0,100% 0,72% 46%,52% 46%,44% 62%,76% 62%,64% 100%);animation:bootPulse 1s var(--ease-io) infinite alternate}
.boot.done .boot-mark{animation:none;transform:scale(1.8);opacity:0;transition:transform .5s var(--ease-out),opacity .4s}
@keyframes bootPulse{from{transform:scale(.86);opacity:.55}to{transform:scale(1);opacity:1}}

/* header: staggered entrance, hide on scroll down, reveal on scroll up */
.site-header{transition:transform .45s var(--ease-out),box-shadow var(--d-med),border-color var(--d-med)}
body.hdr-hide .site-header{transform:translate3d(0,-100%,0)}
.site-header>*{animation:hdrIn .7s var(--ease-out) backwards}
.site-header>.brand{animation-delay:.05s}.site-header>nav{animation-delay:.12s}.site-header>.hdr-actions{animation-delay:.2s}
@keyframes hdrIn{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
.toolbar{top:var(--tbt);transition:top .45s var(--ease-out)}
@media (max-width:980px){.toolbar{top:0}}

/* nav magic-line pill */
.site-header nav{position:relative}
.nav-pill{position:absolute;left:0;top:50%;height:36px;margin-top:-18px;width:var(--w,0);border-radius:10px;background:rgba(255,255,255,.09);transform:translate3d(var(--x,0),0,0);opacity:0;pointer-events:none;transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .25s}
.site-header nav a{position:relative;z-index:1}
.site-header nav a:hover,.site-header nav a[aria-current=page]{background:transparent}
.site-header nav a[aria-current=page]::after{display:block;left:50%;right:auto;width:5px;height:5px;bottom:2px;margin-left:-2.5px;border-radius:50%;transform:scale(1);background:var(--accent)}
.site-header nav a::after{display:block;left:50%;right:auto;width:5px;height:5px;bottom:2px;margin-left:-2.5px;border-radius:50%;transform:scale(0);transition:transform .35s var(--ease-spring)}

/* view enter: every route fades/slides in on top of the wipe */
#view.view-enter>*:not(.hero){animation:viewIn .7s var(--ease-out) backwards}
#view.view-enter>*:nth-child(2){animation-delay:.05s}#view.view-enter>*:nth-child(3){animation-delay:.1s}
#view.view-enter>*:nth-child(4){animation-delay:.15s}#view.view-enter>*:nth-child(n+5){animation-delay:.2s}
@keyframes viewIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* aurora behind the hero (transform-only, paused when off-screen) */
.hero-bg{overflow:hidden}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;width:62vmax;height:62vmax;border-radius:50%;pointer-events:none;will-change:transform;animation:drift 26s ease-in-out infinite alternate;animation-play-state:paused}
.hero-bg::before{left:-18vmax;top:-26vmax;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%)}
.hero-bg::after{right:-22vmax;bottom:-30vmax;background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 62%);animation-duration:34s;animation-direction:alternate-reverse}
.hero.vis .hero-bg::before,.hero.vis .hero-bg::after{animation-play-state:running}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vmax,5vmax,0) scale(1.15)}}
.hero2 .hero-inner{translate:0 calc(var(--sy,0)*.16px);opacity:calc(1 - var(--sy,0)/760)}
.hero2 .waves{translate:calc(var(--px,0)*-10px) calc(var(--py,0)*-6px + var(--sy,0)*.1px)}

/* buttons: shine sweep + spring press */
.btn:not(.busy)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translate3d(-130%,0,0)}
.btn:hover::after{transform:translate3d(130%,0,0);transition:transform .8s var(--ease-out)}
.btn{transition:transform .35s var(--ease-spring),border-color var(--d-fast),background var(--d-fast),translate .25s var(--ease-out)}
.btn:active{transform:scale(.96)}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.32);transform:scale(0);opacity:1;pointer-events:none;z-index:2;animation:rip .65s var(--ease-out) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
.pchip,.chip,.dl,.mini,.pill-btn,.signin,.hs-go{transition:transform .35s var(--ease-spring),border-color var(--d-fast),background var(--d-fast),color var(--d-fast),filter var(--d-fast)}
.chip:active,.pchip:active,.dl:active,.mini:active{transform:scale(.94)}

/* cards: title underline sweep, cover zoom, lifted shadow, download shine */
.card{transition:transform .5s var(--ease-out),border-color var(--d-fast),box-shadow .5s var(--ease-out)}
.card:hover{box-shadow:0 26px 60px -26px #000,0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
.card h3 a{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease-out);padding-bottom:2px}
.card:hover h3 a,.card:focus-within h3 a{background-size:100% 2px}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translate3d(-120%,0,0);pointer-events:none}
.card:hover .cover::after,.spot:hover .cover::after{transform:translate3d(120%,0,0);transition:transform 1s var(--ease-out)}
.card .cv-lines{transition:transform 1.1s var(--ease-out)}
.save{transition:transform .4s var(--ease-spring),background var(--d-fast),border-color var(--d-fast)}
.save[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 18%,rgba(9,9,11,.6));border-color:var(--accent)}
.dl::after{display:none}

/* surface glow (pointer-follow) */
.tile,.spot,.stat,.panel,.pn a,.auth-card{position:relative;overflow:hidden}
.tile::before,.spot::before,.stat::before,.panel::before,.pn a::before,.auth-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%);transition:opacity .4s}
.tile:hover::before,.spot:hover::before,.stat:hover::before,.panel:hover::before,.pn a:hover::before,.auth-card:hover::before{opacity:1}
.tile>*,.stat>*,.panel>*,.pn a>*,.auth-card>*{position:relative;z-index:1}
.tile{transition:transform .5s var(--ease-out),border-color var(--d-fast),box-shadow .5s var(--ease-out)}
.tile:hover{box-shadow:0 20px 44px -24px #000}
.tile b{transition:transform .5s var(--ease-spring)}
.tile:hover b{transform:translate3d(0,-2px,0) scale(1.06);transform-origin:0 50%}

/* section headings: accent bar draws in */
.sec-head h2{position:relative}
.sec-head>div{position:relative}
.sec-head>div::after{content:"";display:block;width:54px;height:3px;margin-top:12px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
[data-reveal].in .sec-head>div::after,.sec-head[data-reveal].in>div::after{transform:scaleX(1);transition:transform .9s var(--ease-out) .25s}

/* toolbar rows enter one after another */
.toolbar .tb-row,.lib-head>*{animation:viewIn .7s var(--ease-out) backwards}
.toolbar .tb-row:nth-child(2){animation-delay:.08s}.toolbar .tb-row:nth-child(3){animation-delay:.16s}
.toolbar .chips .chip{animation:chipIn .5s var(--ease-spring) backwards}
.toolbar .chips .chip:nth-child(1){animation-delay:.1s}.toolbar .chips .chip:nth-child(2){animation-delay:.15s}.toolbar .chips .chip:nth-child(3){animation-delay:.2s}
.toolbar .chips .chip:nth-child(4){animation-delay:.25s}.toolbar .chips .chip:nth-child(5){animation-delay:.3s}.toolbar .chips .chip:nth-child(6){animation-delay:.35s}
.chip.active-chip{animation:chipIn .45s var(--ease-spring) both}
.results-bar .count{transition:opacity .2s}
.grid.swap{animation:swap .45s var(--ease-out)}
@keyframes swap{from{opacity:.2;translate:0 10px}to{opacity:1;translate:0 0}}

/* admin: rows + stats */
.tbl tbody tr.row-in{animation:rowIn .5s var(--ease-out) backwards;animation-delay:calc(var(--n,0)*28ms)}
@keyframes rowIn{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
.adm-nav a{position:relative;transition:background var(--d-fast),color var(--d-fast),padding-left var(--d-med) var(--ease-out)}
.adm-nav a:hover{padding-left:18px}
.stat b{transition:transform .5s var(--ease-spring)}
.stat:hover b{transform:scale(1.06);transform-origin:0 50%}

/* modals / dropdowns / toasts: spring */
.pal-box{transform:translate3d(0,-18px,0) scale(.96);transition:opacity .25s var(--ease-out),transform .45s var(--ease-spring)}
.pal.open .pal-box{transform:none}
.pal{backdrop-filter:blur(0);transition:background .25s var(--ease-out),backdrop-filter .3s}
.pal.open{backdrop-filter:blur(6px)}
.pal li{transition:background var(--d-fast),border-color var(--d-fast),padding-left var(--d-med) var(--ease-out)}
.pal li[aria-selected=true]{padding-left:20px}
.dd-list{transition:opacity var(--d-fast),transform .45s var(--ease-spring),clip-path var(--d-med) var(--ease-out),visibility 0s linear var(--d-med)}
.toast{transition:opacity .25s,transform .5s var(--ease-spring)}
.form-err{animation:viewIn .35s var(--ease-out)}
.fld input,.fld select,.fld textarea{transition:border-color var(--d-fast),box-shadow var(--d-fast),transform .3s var(--ease-out)}
.fld input:focus,.fld select:focus,.fld textarea:focus{transform:translate3d(0,-1px,0)}

/* auth card entrance */
.auth-card{animation:authIn .9s var(--ease-out) backwards}
@keyframes authIn{from{opacity:0;translate:0 26px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
.auth-card .fld{animation:viewIn .6s var(--ease-out) backwards}
.auth-card .fld:nth-of-type(1){animation-delay:.15s}.auth-card .fld:nth-of-type(2){animation-delay:.22s}.auth-card .fld:nth-of-type(3){animation-delay:.29s}
.auth-mark{animation:bootPulse 2.4s var(--ease-io) infinite alternate}

/* detail page */
.cover.big .cv-num{translate:calc(var(--cx,0)*-20px) 0;transition:translate .6s var(--ease-out),transform .7s var(--ease-out)}
.d-hero .d-title h1{animation:viewIn .8s var(--ease-out) .1s backwards}
.facts>div{transition:background var(--d-fast)}
.facts>div:hover{background:#13131a}
.links .btn{animation:viewIn .6s var(--ease-spring) backwards}
.links .btn:nth-child(2){animation-delay:.08s}.links .btn:nth-child(3){animation-delay:.16s}.links .btn:nth-child(4){animation-delay:.24s}

/* links in prose + footer */
.prose a,.switch-auth a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease-out)}
.prose a:hover,.switch-auth a:hover{background-size:100% 1px;text-decoration:none}
.link-arrow{display:inline-block;transition:color var(--d-fast),transform .4s var(--ease-out)}
.link-arrow:hover{transform:translateX(4px)}

/* scroll to top */
.totop{position:fixed;right:20px;bottom:20px;z-index:60;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line2);color:var(--text);cursor:pointer;opacity:0;transform:translate3d(0,16px,0) scale(.9);pointer-events:none;transition:opacity .3s,transform .5s var(--ease-spring),border-color var(--d-fast),background var(--d-fast)}
.totop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .4s var(--ease-out)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
.totop:hover svg{transform:translate3d(0,-3px,0)}

@media (prefers-reduced-motion:reduce){
  .boot-mark,.auth-mark,.hero-bg::before,.hero-bg::after{animation:none}
  .site-header>*,#view.view-enter>*,.toolbar .tb-row,.toolbar .chip,.auth-card,.auth-card .fld,.links .btn,.tbl tbody tr.row-in,.d-hero .d-title h1{animation:none!important}
  .hero2 .hero-inner{translate:none;opacity:1}
  .sec-head>div::after{transform:scaleX(1)}
  .btn::after,.cover::after,.rip{display:none}
}