/* ---- fx v2: hero depth, mascot, stats, flip cards, page transitions ---- */
.hero{overflow:visible}
.hero .fx-aur{position:absolute;inset:-10% -20% -6%;z-index:-2;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.fx-aur i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.fx-aur i:nth-child(1){width:46%;height:60%;left:48%;top:-6%;background:#67e8f9;animation:fxa 18s ease-in-out infinite alternate}
.fx-aur i:nth-child(2){width:34%;height:46%;left:70%;top:40%;background:#c4b5fd;animation:fxa 22s ease-in-out -6s infinite alternate-reverse}
.fx-aur i:nth-child(3){width:30%;height:40%;left:-4%;top:52%;background:#fde68a;opacity:.4;animation:fxa 20s ease-in-out -3s infinite alternate}
.fx-aur b{position:absolute;left:0;right:0;bottom:0;height:46%;background-image:linear-gradient(rgba(14,116,144,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(14,116,144,.14) 1px,transparent 1px);background-size:48px 48px;transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%)}
[data-theme=dark] .fx-aur i{opacity:.28}
@keyframes fxa{to{transform:translate(-12%,10%) scale(1.15)}}
.hero h1{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.stage .ring{box-shadow:0 0 0 18px rgba(103,232,249,.10),0 0 0 40px rgba(103,232,249,.06)}
/* mascot */
.fx-masc{position:absolute;left:31%;top:24%;width:38%;z-index:3;cursor:pointer;background:none;border:0;padding:0;transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .35s,left .5s,top .5s,width .5s;filter:drop-shadow(0 18px 22px rgba(6,32,43,.28))}
.fx-masc svg{width:100%;height:auto;display:block;overflow:visible}
.stage:not(.matching) .sbot:last-of-type{opacity:0;pointer-events:none;transform:scale(.6)}
.stage.matching .fx-masc{left:74%;top:78%;width:22%}
.fx-masc:focus-visible{outline:3px solid #0e7490;outline-offset:4px;border-radius:24px}
.fx-masc .hd{transform-origin:100px 118px;transition:transform .18s ease-out}
.fx-masc .eye{transform-box:fill-box;transform-origin:center;animation:fxblink 5.2s infinite}
.fx-masc .pu{transition:transform .12s ease-out}
.fx-masc .armR{transform-origin:150px 150px;transition:transform .3s}
.fx-masc .ant{transform-origin:100px 40px;animation:fxant 3s ease-in-out infinite}
.fx-masc .bob{animation:fxbob 3.4s ease-in-out infinite}
.fx-masc .glow{animation:fxglow 2s ease-in-out infinite}
.fx-masc .mouth{transition:d .2s}
.fx-masc.wave .armR{animation:fxwave .9s ease-in-out 2}
.fx-masc.hype .armR{transform:rotate(-120deg)}
.fx-masc.hype .eye{animation:none;transform:scale(1.15)}
.fx-masc.hype .ch{opacity:1}
.fx-masc.jump{animation:fxjump .6s cubic-bezier(.3,1.6,.5,1)}
.fx-masc .ch{opacity:.55;transition:opacity .2s}
@keyframes fxblink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes fxant{50%{transform:rotate(8deg)}}
@keyframes fxbob{50%{transform:translateY(-6px)}}
@keyframes fxglow{50%{opacity:.45}}
@keyframes fxwave{0%,100%{transform:rotate(0)}30%{transform:rotate(-140deg)}60%{transform:rotate(-100deg)}}
@keyframes fxjump{40%{transform:translateY(-14%) scale(1.04,.96)}}
.fx-say{position:absolute;left:50%;top:-14%;translate:-50% 0;white-space:nowrap;background:#fff;color:#06202b;font:600 13px/1.2 inherit;padding:7px 11px;border-radius:12px;box-shadow:0 6px 18px -6px rgba(6,32,43,.35);opacity:0;transition:opacity .2s;pointer-events:none}
.fx-masc.talk .fx-say{opacity:1}
/* stats */
.fx-stats{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 0;padding:0;list-style:none}
.fx-stats li{display:flex;align-items:baseline;gap:6px;font-size:14px;color:var(--mut)}
.fx-stats b{font:700 26px/1 Fraunces,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.fx-stats .lv{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:fxpulse 2s infinite;align-self:center}
@keyframes fxpulse{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
/* flip cards */
.fx-flipb{position:absolute;top:10px;right:10px;z-index:4;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;font:600 12px/1 inherit;padding:7px 10px;cursor:pointer}
.fx-flipb:hover,.fx-flipb:focus-visible{background:var(--cs)}
.fx-back{position:absolute;inset:0;z-index:5;border-radius:inherit;background:var(--card);padding:18px;display:flex;flex-direction:column;gap:8px;border:2px solid var(--a,#06b6d4);overflow:auto}
.fx-back[hidden]{display:none}
.fx-back h3{margin:0}.fx-back ul{margin:0;padding-left:18px;font-size:14px}.fx-back .fx-p{font-weight:700}
.fx-back .row{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.pcard.fx-fl{animation:fxflip .42s ease-in-out}
@keyframes fxflip{50%{transform:perspective(800px) rotateY(90deg)}}
/* page transitions */
::view-transition-old(root){animation:fxout .22s ease-in both}
::view-transition-new(root){animation:fxin .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxout{to{opacity:0;transform:translateY(-10px) scale(.99)}}
@keyframes fxin{from{opacity:0;transform:translateY(14px)}}
.hd{view-transition-name:site-hd}
html.fx-leave main{opacity:0;transform:translateY(-8px);transition:opacity .18s,transform .18s}
@media (max-width:860px){.fx-masc{width:40%;left:30%}}
@media (prefers-reduced-motion:reduce){.fx-aur i,.fx-masc *,.fx-masc,.fx-stats .lv{animation:none!important}::view-transition-old(root),::view-transition-new(root){animation:none}.pcard.fx-fl{animation:none}}