/* Face coordinates align with the unchanged 204 × 190 crop of the approved art. */
.mascot { position:absolute; background:none; mask-image:none; animation:none; z-index:4; pointer-events:none; }
.mascot-body { position:absolute; inset:0; transform-origin:50% 85%; transition:rotate 280ms ease; }
.mascot-skin { inset:0; background-size:432.353% auto; background-position:49.8525% 12.1783%; mask-image:radial-gradient(ellipse,#000 52%,transparent 74%); }
.mascot-face { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.eye-overlay,.closed-eyes,.mouth-cover,.yawn-mouth,.sleep-mouth { opacity:0; }
.eye-overlay { transition:opacity 90ms ease; }
.pupil { transition:transform 280ms ease; }
.eyelid { transform:scaleY(0); transform-box:fill-box; transform-origin:50% 0; transition:transform 120ms ease; }
.closed-eyes { transition:opacity 80ms ease; }
.mouth-cover,.sleep-mouth { transition:opacity 160ms ease; }
.yawn-mouth { transform-box:fill-box; transform-origin:center; }
.mascot[data-expression="idle"] .mascot-body { animation:mascot-idle 6.5s ease-in-out -.9s infinite; }
.mascot[data-expression="greeting"] .mascot-body { animation:mascot-greeting 950ms ease-out both; }
.mascot[data-expression="waiting"] .mascot-body { animation:mascot-expectant 1.9s ease-in-out both; }
.mascot:not([data-gaze="center"]) .eye-overlay,
.mascot:is([data-expression="greeting"],[data-expression="waiting"],[data-expression="waking"],[data-expression="happy"],[data-expression="startled"]) .eye-overlay { opacity:1; }
.mascot[data-gaze="left"] .pupil { transform:translate(-2px,0); }
.mascot[data-gaze="right"] .pupil { transform:translate(2px,0); }
.mascot[data-gaze="button"] .pupil { transform:translate(0,4px); }
.mascot[data-gaze="pointer"] .pupil { transform:translate(var(--gaze-x,0px),var(--gaze-y,0px)); }
[data-app-state="landing"] .mascot[data-gaze="pointer"] .mascot-body { rotate:var(--attention-tilt,0deg); }
.mascot[data-expression="waiting"] .eye-open-left { transform:translateY(-1.5px); }
.mascot[data-blink="true"] .eyelid,.mascot[data-expression="asleep"] .eyelid { transform:scaleY(1); }
.mascot[data-blink="true"] .closed-eyes,.mascot[data-expression="asleep"] .closed-eyes { opacity:1; }
.mascot:is([data-expression="yawning"],[data-expression="sleepy-yawn"]) .eyelid { transform:scaleY(.68); transition-duration:400ms; }
.mascot:is([data-expression="yawning"],[data-expression="sleepy-yawn"],[data-expression="drowsy"],[data-expression="asleep"]) .mouth-cover { opacity:1; }
.mascot:is([data-expression="yawning"],[data-expression="sleepy-yawn"]) .yawn-mouth { opacity:1; animation:mascot-yawn 1.9s ease-in-out both; }
.mascot[data-expression="sleepy-yawn"] .yawn-mouth { animation-duration:2.8s; }
.mascot[data-expression="yawning"] .mascot-body { animation:mascot-yawn-lean 1.9s ease-in-out both; }
.mascot[data-expression="sleepy-yawn"] .mascot-body { animation:mascot-sleepy-lean 2.8s ease-in-out both; }
.mascot[data-expression="drowsy"] .eyelid { transform:scaleY(.78); transition-duration:650ms; }
.mascot[data-expression="drowsy"] .mascot-body { transform:translateY(2px) rotate(3deg); }
.mascot:is([data-expression="drowsy"],[data-expression="asleep"]) .sleep-mouth { opacity:1; }
.mascot[data-expression="asleep"] .mascot-body { animation:mascot-breathe 4.8s ease-in-out infinite; }
.mascot[data-expression="waking"] .mascot-body { animation:mascot-wake .72s ease-out both; }
.mascot:is([data-expression="greeting"],[data-expression="waking"],[data-expression="happy"],[data-expression="startled"]) .eye-open { transform-box:fill-box; transform-origin:center; animation:mascot-open-eyes .45s ease-out both; }
.mascot[data-expression="happy"] .mascot-body { animation:mascot-happy .4s ease-out both; }
.mascot[data-expression="startled"] .mascot-body { animation:mascot-startle .4s cubic-bezier(.2,.8,.3,1) both; }
.sleep-marks { position:absolute; left:74%; top:8%; width:34%; height:40%; color:#d8cfef; font:700 16px/1 Arial,sans-serif; }
.sleep-marks span { position:absolute; opacity:0; }
.sleep-marks span:nth-child(2) { left:8px; font-size:13px; }
.mascot[data-expression="asleep"] .sleep-marks span { animation:mascot-zzz 7s ease-out infinite; }
.mascot[data-expression="asleep"] .sleep-marks span:nth-child(2) { animation-delay:1.25s; }
.artwork-unavailable .mascot { visibility:hidden; }
@keyframes mascot-idle { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3.5px); } }
@keyframes mascot-greeting { 0%,100% { transform:translateY(0) rotate(0); } 28% { transform:translateY(-5px) rotate(-4deg); } 65% { transform:translateY(-2px) rotate(2deg); } }
@keyframes mascot-expectant { 0%,100% { transform:rotate(0); } 35% { transform:rotate(-4deg) translateY(-2px); } 68% { transform:rotate(1.5deg) translateY(-1px); } }
@keyframes mascot-yawn { 0%,100% { transform:scale(.65,.15); opacity:0; } 22%,72% { transform:scale(1); opacity:1; } }
@keyframes mascot-yawn-lean { 0%,100% { transform:rotate(0); } 45% { transform:rotate(-1.5deg) translateY(-1px); } }
@keyframes mascot-sleepy-lean { 0% { transform:rotate(0); } 45% { transform:rotate(-1deg); } 100% { transform:rotate(3deg) translateY(2px); } }
@keyframes mascot-breathe { 0%,100% { transform:translateY(3px) rotate(3deg) scale(1); } 50% { transform:translateY(2.3px) rotate(3deg) scale(1.008); } }
@keyframes mascot-wake { 0% { transform:translateY(2px) rotate(3deg); } 24% { transform:translateY(-1px) rotate(-2deg); } 65% { transform:rotate(1.5deg); } 100% { transform:none; } }
@keyframes mascot-open-eyes { 0%,45% { transform:scale(1.03,1.12); } 100% { transform:scale(1); } }
@keyframes mascot-happy { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-4px) rotate(-1deg); } 75% { transform:translateY(1px); } }
@keyframes mascot-startle { 0%,100% { transform:translateY(0); } 30% { transform:translateY(-7px) rotate(-3deg); } 65% { transform:translateY(1.5px) rotate(1deg); } }
@keyframes mascot-zzz { 0%,5% { opacity:0; transform:translate(0,2px) scale(.8); } 13% { opacity:.7; } 38% { opacity:0; transform:translate(10px,-18px) scale(1.05); } 100% { opacity:0; transform:translate(10px,-18px); } }
@media(prefers-reduced-motion:reduce) {
  .mascot-body,.eye-open,.pupil { animation:none!important; transform:none!important; rotate:none!important; }
  .eyelid,.mouth-cover,.eye-overlay { transition-duration:0s; }
  .mascot:is([data-expression="yawning"],[data-expression="sleepy-yawn"]) .yawn-mouth { opacity:1; transform:scale(.85); }
  .mascot[data-expression="asleep"] .sleep-marks span:first-child { opacity:.55; }
  .mascot[data-expression="asleep"] .sleep-marks span:nth-child(2) { opacity:0; }
}