/* ===== extra effects: blur, glass, glow ===== */
#app{background:transparent;position:relative;z-index:1}

/* static pure-black background */
body,#app{background:#000}
.aurora,.hero::after{display:none}

/* reveal with blur */
.rv{filter:blur(4px);transition:opacity .8s,transform .9s var(--spring),filter .9s}
.rv.in{filter:blur(0)}

/* hero fades + blurs while scrolling away */
.hero .wrap{opacity:calc(1 - var(--hp,0)*1.2);filter:blur(calc(var(--hp,0)*4px));transform:translateY(calc(var(--hp,0)*-36px));will-change:opacity,filter,transform}

/* glass cards */
.group,.discord{background:rgba(14,14,15,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 50px rgba(0,0,0,.35)}
.chip{background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tags span{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.row{transition:background .25s,padding-left .35s var(--spring)}
.row:hover{background:rgba(255,255,255,.04)}
.app{transition:transform .45s var(--spring),box-shadow .3s}
.row:hover .app{transform:scale(1.08) rotate(-3deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 30px rgba(255,255,255,.12)}

/* characters: glass cards + hover glow */
.cq .ch{background:rgba(255,255,255,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:scale .45s var(--spring),box-shadow .35s,border-color .3s}
.cq .ch img{transition:filter .5s}
.cq .ch:hover,.cq .ch:active{scale:1.09;border-color:rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 40px rgba(255,255,255,.18),0 16px 36px rgba(0,0,0,.6)}
.cq .ch:hover img,.cq .ch:active img{filter:grayscale(.75) contrast(1.15) brightness(1.05)}
.cq:hover div{animation-play-state:paused}

/* buttons shine */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.btn.pri::after{background:linear-gradient(110deg,transparent 30%,rgba(0,0,0,.14) 50%,transparent 70%)}
.btn:hover::after{transform:translateX(120%)}
.btn.pri{box-shadow:0 0 30px rgba(255,255,255,.18)}

/* glowing headline accent */
h1 em,h2 em{filter:drop-shadow(0 0 10px rgba(255,255,255,.15))}

/* progressive blur behind the tab bar */
.fx-bottom{position:fixed;left:0;right:0;bottom:0;height:calc(120px + env(safe-area-inset-bottom,0px));z-index:15;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(transparent,#000 75%);mask-image:linear-gradient(transparent,#000 75%);background:linear-gradient(transparent,rgba(0,0,0,.55));transition:opacity .8s .4s}
body:not(.entered) .fx-bottom{opacity:0}


@media (prefers-reduced-motion:reduce){.rv{filter:none}.hero .wrap{filter:none;opacity:1;transform:none}}

/* ===== liquid glass tab bar ===== */
nav{
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(10px) saturate(2) brightness(1.12);
  backdrop-filter:blur(10px) saturate(2) brightness(1.12);
  backdrop-filter:blur(10px) saturate(2) brightness(1.12) url(#liquid);
  border:.5px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.12),inset 0 0 18px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.45);
  overflow:hidden;
}
nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 20% -20%,rgba(255,255,255,.35),transparent 55%);mix-blend-mode:screen;opacity:.7}
nav::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;border:1px solid transparent;background:linear-gradient(160deg,rgba(255,255,255,.7),transparent 30%,transparent 70%,rgba(255,255,255,.35)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);opacity:.6}
nav a{text-shadow:0 1px 6px rgba(0,0,0,.35)}
nav a.on{color:#fff}
.pill{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.10));-webkit-backdrop-filter:blur(6px) brightness(1.25);backdrop-filter:blur(6px) brightness(1.25);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 2px rgba(255,255,255,.2),0 4px 14px rgba(0,0,0,.3)}
.fx-bottom{background:linear-gradient(transparent,rgba(0,0,0,.35))}