.cinematic-intro[hidden]{display:none!important}
.mascot-intro .intro-aura{z-index:0;pointer-events:none}
.mascot-intro canvas{z-index:1;pointer-events:none}
.mascot-intro .mascot-stage{z-index:2}
.mascot-intro>button,.mascot-intro .mascot-load-status{z-index:3}
.mascot-stage{position:relative;display:grid;grid-template-columns:minmax(220px,400px) minmax(320px,560px);align-items:center;gap:32px;width:min(1050px,90vw)}
.mascot-figure{position:relative;text-align:center;opacity:0;transform:translateY(45px) scale(.88);transition:opacity .65s,transform .9s cubic-bezier(.16,1,.3,1)}
.mascot-figure img{position:relative;display:block;width:100%;height:min(62vh,540px);object-fit:contain;filter:drop-shadow(0 15px 28px #0006);transform-origin:50% 75%}
.intro-reveal .mascot-figure{opacity:1;transform:none}
.intro-reveal .mascot-figure img{animation:xiaoxi-greet 3.8s ease-in-out both}
.mascot-intro .intro-brand{text-align:left;transition-delay:.55s}
.mascot-intro .intro-seal{margin:0 0 24px;width:54px;height:54px;font-size:28px}
.mascot-intro .intro-brand h1{font-size:clamp(46px,6vw,80px);letter-spacing:.09em;text-indent:0;white-space:nowrap}
.mascot-intro .intro-brand i{margin:0 0 18px}
.mascot-intro .intro-brand p{letter-spacing:.2em;font-size:10px}
.mascot-intro .intro-agent{font-size:clamp(23px,3vw,34px);margin:18px 0 24px}
.mascot-name{display:inline-block;border:1px solid #d3a85066;background:#14253bd9;border-radius:24px;padding:8px 20px;color:#f4d58f;font-size:14px;letter-spacing:.12em}
.mascot-orbit{position:absolute;left:7%;right:7%;bottom:10%;height:60px;border:1px solid #edbd65aa;border-radius:50%;box-shadow:0 0 25px #d3a85044,inset 0 0 18px #d3a85033;transform:rotate(-9deg)}
.mascot-knowledge{position:absolute;right:-1%;top:48%;width:66px;padding:12px;background:linear-gradient(140deg,#fff4c930,#c99b4f11);border:1px solid #f4d58f;border-radius:9px;color:#ffdf99;box-shadow:0 0 35px #d3a85044;opacity:0;transform:translateY(20px) rotate(10deg)}
.mascot-knowledge span{font-size:14px;letter-spacing:.2em}.mascot-knowledge i{display:block;height:2px;background:#ffe3a5aa;margin-top:8px}.mascot-knowledge i:last-child{width:60%}
.intro-reveal .mascot-knowledge{animation:xiaoxi-card .8s 1.25s ease forwards}
.mascot-spark{position:absolute;right:15%;top:45%;color:#ffe3a5;font-size:34px;opacity:0}
.intro-reveal .mascot-spark{animation:xiaoxi-spark 1.3s 1.05s ease both}
.mascot-intro.no-mascot .mascot-figure{display:none}.mascot-intro.no-mascot .mascot-stage{display:block;width:auto}
@keyframes xiaoxi-greet{0%{transform:translateY(15px) rotate(-5deg)}25%{transform:translateY(-12px) rotate(3deg)}48%{transform:translateY(-3px) rotate(-2deg)}75%{transform:translateY(-10px) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes xiaoxi-card{to{opacity:1;transform:translateY(-10px) rotate(-7deg)}}
@keyframes xiaoxi-spark{0%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:translate(55px,-30px) scale(.4)}}
@media(max-width:700px){.mascot-stage{grid-template-columns:1fr;gap:18px;width:90vw}.mascot-figure{width:230px;max-width:60vw;margin:auto}.mascot-figure img{height:33vh;max-height:290px}.mascot-intro .intro-brand{text-align:center}.mascot-intro .intro-seal{display:none}.mascot-intro .intro-brand h1{font-size:46px;margin-top:10px}.mascot-intro .intro-brand i{margin:0 auto 12px}.mascot-intro .intro-agent{font-size:24px;margin:12px 0}.mascot-intro .intro-brand small{font-size:12px}.mascot-name{font-size:12px;padding:5px 14px}.mascot-knowledge{width:48px;padding:9px;right:-12%;top:38%}}
@media(max-height:520px) and (min-width:701px){.mascot-figure img{height:66vh}.mascot-intro .intro-seal{display:none}}
@media(max-height:520px) and (min-width:500px) and (max-width:700px){.mascot-stage{grid-template-columns:180px 1fr;gap:16px;width:94vw}.mascot-figure{width:180px}.mascot-figure img{height:55vh}.mascot-intro .intro-brand h1{font-size:38px}.mascot-intro .intro-agent{font-size:22px}.mascot-intro .intro-brand p{font-size:8px}}
.mascot-load-status{position:absolute;bottom:74px;left:5%;width:90%;text-align:center;color:#e4cd99;font-size:14px}
.intro-loading .intro-brand{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.cinematic-intro.mascot-intro{display:grid}.mascot-intro *{animation:none!important;transition:none!important}.mascot-intro .intro-brand,.mascot-intro .mascot-figure{transform:none;filter:none}.intro-reveal .mascot-knowledge{opacity:1}.mascot-intro.intro-leave{display:none}}