/* ===== Interactive mascot built from the real 3D renders (rigged in mascot.js) ===== */
.hero-scene{position:relative;z-index:1;width:118%;max-width:920px;max-height:690px;height:auto;display:block;overflow:visible;mix-blend-mode:multiply}
@media(max-width:1000px){.hero-scene{width:128%}}
@media(max-width:720px){.hero-scene{width:110%;max-width:560px}}
.table-fg{position:fixed;left:0;top:0;z-index:81;pointer-events:none;opacity:0;transform-origin:0 0;display:block}
/* music button */
.music-toggle{position:fixed;left:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 13px;border-radius:100px;border:1px solid #d9c7ad;background:rgba(255,253,247,.92);backdrop-filter:blur(10px);color:#514d45;font-size:11px;font-weight:700;letter-spacing:.6px;cursor:pointer;box-shadow:0 8px 22px rgba(101,74,38,.12);transition:transform .25s,background .25s,color .25s}
.music-toggle:hover{transform:translateY(-3px)}
.music-toggle b{font-weight:700}
.music-toggle .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.music-toggle .eq i{display:block;width:3px;height:4px;border-radius:2px;background:#c87936;transition:height .2s}
.music-toggle[aria-pressed="true"]{background:#171716;color:#fff8e7;border-color:#171716}
.music-toggle[aria-pressed="true"] .eq i{animation:eqBar .9s ease-in-out infinite}
.music-toggle[aria-pressed="true"] .eq i:nth-child(2){animation-delay:.15s}.music-toggle[aria-pressed="true"] .eq i:nth-child(3){animation-delay:.3s}.music-toggle[aria-pressed="true"] .eq i:nth-child(4){animation-delay:.45s}
@keyframes eqBar{0%,100%{height:4px}50%{height:14px}}
@media(max-width:720px){.music-toggle{left:12px;bottom:12px;padding:9px 12px 9px 11px}.music-toggle b{display:none}}

/* smooth-skinned WebGL walker */
.mascot{position:fixed;left:0;top:0;z-index:80;width:335px;height:370px;pointer-events:none;opacity:0;transform-origin:0 0;will-change:transform}
.mascot canvas{position:absolute;left:-20px;top:-10px;width:420px;height:400px;display:block}
.m-shadow{position:absolute;left:92px;top:338px;width:200px;height:30px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(60,38,18,.42) 0%,rgba(60,38,18,.16) 45%,rgba(60,38,18,0) 72%)}
.m-hit{position:absolute;left:96px;top:8px;width:200px;height:350px;pointer-events:auto;cursor:pointer;border-radius:60px}
.m-bubble{position:fixed;left:0;top:0;z-index:82;max-width:210px;padding:9px 14px;border-radius:16px 16px 16px 4px;background:#171716;color:#fff8e7;font-size:13px;font-weight:600;line-height:1.35;box-shadow:0 12px 28px rgba(40,25,10,.25);pointer-events:none;opacity:0;transform:translate(-50%,-100%) scale(.7);transform-origin:50% 100%;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.m-bubble.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.table-fg{position:fixed;left:0;top:0;z-index:81;pointer-events:none;opacity:0;transform-origin:0 0;display:block}
