/* ---- 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)}
.stage:not(.matching) .sbot:last-of-type{opacity:0;pointer-events:none;transform:scale(.6)}
@keyframes fxglow{50%{opacity:.45}}
/* 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 (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.pcard.fx-fl{animation:none}}