/* Quân sư cử động: nổi nhẹ, thở, chớp mắt, ánh sáng quét, hạt vàng, bảng số liệu nhấp nháy, nghiêng theo chuột.
   Dùng: <div class="mascot-live"> ... xem static/mascot-demo.html. Toạ độ tính theo % ảnh gốc 1387×1134. */
.mascot-live{--ml-w:min(560px,100%);position:relative;width:var(--ml-w);aspect-ratio:1387/1134;perspective:900px;margin-inline:auto;-webkit-tap-highlight-color:transparent}
.ml-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out;transform:rotateX(var(--ml-rx,0deg)) rotateY(var(--ml-ry,0deg))}
.ml-float{position:absolute;inset:0;transform-origin:50% 92%;animation:ml-float 5.5s ease-in-out infinite}
.ml-float>*{position:absolute}
.ml-img{inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 22px 28px #35180a40)}

/* thở: nhấp nhô nhẹ ở thân, giữ nguyên chân/chữ */
@keyframes ml-float{
  0%,100%{transform:translateY(0) scale(1,1)}
  50%{transform:translateY(-1.6%) scale(1.006,1.012)}
}

/* chớp mắt: mi da phủ lên mắt, nghiêng theo khuôn mặt */
.ml-eye{background:radial-gradient(ellipse at 50% 30%,#fdd0ad 0,#fcc9a4 70%,#f3b78f 100%);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r)) scaleY(0);transform-origin:50% 0;opacity:0}
.ml-eye.is-blink{animation:ml-blink .22s ease-in-out}
@keyframes ml-blink{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scaleY(0)}45%,55%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scaleY(1)}100%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scaleY(0)}}
.ml-eye.l{left:51.3%;top:29.5%;width:7.4%;height:6.9%;--r:14deg}
.ml-eye.r{left:59.8%;top:33.1%;width:5%;height:5.4%;--r:14deg}

/* ánh sáng quét chỉ trên hình quân sư (dùng chính ảnh làm khuôn) */
.ml-shine{inset:0;pointer-events:none;mix-blend-mode:soft-light;
  -webkit-mask:var(--ml-src) center/100% 100% no-repeat;mask:var(--ml-src) center/100% 100% no-repeat}
.ml-shine::before{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,#fff 50%,transparent 60%);transform:translateX(-80%);animation:ml-shine 6s ease-in-out infinite}
@keyframes ml-shine{0%,55%{transform:translateX(-80%)}100%{transform:translateX(80%)}}

/* bảng số liệu & robot: quầng sáng vàng thở nhịp */
.ml-glow{border-radius:50%;background:radial-gradient(closest-side,#ffd36a99,#ffd36a00);mix-blend-mode:screen;transform:translate(-50%,-50%);animation:ml-glow 3.2s ease-in-out infinite;pointer-events:none}
.ml-glow:nth-of-type(2){animation-delay:.6s}.ml-glow:nth-of-type(3){animation-delay:1.2s}.ml-glow:nth-of-type(4){animation-delay:1.8s}.ml-glow:nth-of-type(5){animation-delay:2.4s}
@keyframes ml-glow{0%,100%{opacity:.15;scale:.9}50%{opacity:.9;scale:1.08}}
.ml-glow.g1{left:19.8%;top:38.5%;width:22%;height:26%}
.ml-glow.g2{left:13.5%;top:53%;width:20%;height:20%}
.ml-glow.g3{left:84.2%;top:28%;width:19%;height:30%}
.ml-glow.g4{left:90%;top:51%;width:20%;height:20%}
.ml-glow.g5{left:15%;top:20%;width:14%;height:17%}

/* hạt vàng bay lên */
.ml-spark{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff6c9,#ffc93d 55%,#ffc93d00 72%);opacity:0;animation:ml-spark var(--d) ease-in-out infinite;animation-delay:var(--t);pointer-events:none}
@keyframes ml-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),-60px) scale(1.1)}}

@media(prefers-reduced-motion:reduce){
  .ml-float,.ml-shine::before,.ml-glow,.ml-spark,.ml-eye{animation:none!important}
  .ml-tilt{transform:none!important;transition:none}
  .ml-spark,.ml-shine{display:none}
  .ml-glow{opacity:.3}
}