/* Ambient home background and logo intro — kept in one file since both are new, self-contained visual systems layered on top of the existing site chrome rather than tweaks to it. */
#ambient-scene{position:fixed;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 22%,#000 55%);mask-image:linear-gradient(90deg,transparent 0,transparent 22%,#000 55%)}
@media(max-width:820px){#ambient-scene{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 42%,#000 72%);mask-image:linear-gradient(180deg,transparent 0,transparent 42%,#000 72%)}}
#ambient-scene canvas{width:100%;height:100%;display:block}

#brand-badge{display:inline-block;width:48px;height:48px;flex:0 0 auto}
#brand-badge canvas{width:100%;height:100%;display:block}
@media(max-width:1150px){#brand-badge{width:42px;height:42px}}
@media(max-width:980px){#brand-badge{width:38px;height:38px}}
@media(max-width:480px){#brand-badge{width:36px;height:36px}}

#auth-badge{width:110px;height:110px;margin-bottom:18px}
#auth-badge canvas{width:100%;height:100%;display:block}
@media(max-width:700px){#auth-badge{width:84px;height:84px;margin-bottom:12px}}

#mascot-scene{position:fixed;right:14px;bottom:10px;width:136px;height:170px;z-index:20;pointer-events:none}
#mascot-scene canvas{width:100%;height:100%;display:block}
#mascot-scene:after{content:'';position:absolute;left:50%;bottom:6%;width:60%;height:12%;transform:translateX(-50%);background:radial-gradient(closest-side,#00000033,transparent 75%)}
@media(max-width:980px){#mascot-scene{width:116px;height:145px;right:10px;bottom:8px}}
@media(max-width:480px){#mascot-scene{width:96px;height:120px;right:6px;bottom:6px}}

#logo-intro{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);transition:opacity .4s ease}
#logo-intro-stage{width:min(46vw,220px);height:min(46vw,220px)}
#logo-intro-stage canvas{width:100%;height:100%;display:block}
#logo-intro-mark{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-1px;color:var(--text);opacity:0;transform:translateY(10px) scale(.96);animation:logo-mark-in .6s .85s ease forwards}
#logo-intro-mark b{color:var(--red)}
#logo-intro.logo-intro-out{opacity:0;pointer-events:none}
@keyframes logo-mark-in{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#logo-intro{display:none}}