/* Spondra mascot component */
.mascot{--m-size:120px;width:var(--m-size);height:calc(var(--m-size)*1.04);position:relative;flex:none;line-height:0}
.mascot .m-svg{width:100%;height:100%;overflow:visible}
.mascot .m-arm{transform-box:fill-box;transform-origin:50% 2px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}

.mascot .m-eye{transform-box:fill-box;transform-origin:center;transition:transform .08s}
.mascot.blink .m-eye{transform:scaleY(.08)}.mascot.blink .m-pupils{opacity:0}
.mascot .m-pupils{transition:transform .18s ease-out}
.mascot .m-prop,.mascot .m-eyes-happy,.mascot .m-eyes-sleepy,.mascot .m-mouth-o{opacity:0;transition:opacity .25s}
.mascot.mood-happy .m-eyes,.mascot.mood-sleepy .m-eyes,.mascot.mood-yawn .m-eyes{opacity:0}
.mascot.mood-happy .m-eyes-happy,.mascot.mood-sleepy .m-eyes-sleepy,.mascot.mood-yawn .m-eyes-sleepy{opacity:1}
.mascot.mood-yawn .m-mouth{opacity:0}.mascot.mood-yawn .m-mouth-o{opacity:1}
.mascot.pose-wave .m-arm-r{transform:rotate(-150deg);animation:m-wave 1.1s ease-in-out infinite}
.mascot.pose-phone .m-arm-r{transform:rotate(-165deg)}.mascot.pose-phone .m-prop-phone{opacity:1}
.mascot.pose-thumb .m-arm-r{transform:rotate(-120deg)}.mascot.pose-thumb .m-prop-thumb{opacity:1}
.mascot.pose-point .m-arm-r{transform:rotate(-90deg)}.mascot.pose-point .m-prop-point{opacity:1}
.mascot.pose-doc .m-arm-r{transform:rotate(-140deg)}.mascot.pose-doc .m-prop-doc{opacity:1}
.mascot.pose-hand .m-arm-r{transform:rotate(-100deg)}
.mascot.pose-type .m-prop-laptop{opacity:1}.mascot.pose-type .m-arm-l{transform:rotate(-28deg);animation:m-tapl .32s ease-in-out infinite alternate}.mascot.pose-type .m-arm-r{transform:rotate(28deg);animation:m-tapr .28s ease-in-out infinite alternate}
.mascot.pose-yawn .m-arm-l{transform:rotate(168deg)}.mascot.pose-yawn .m-arm-r{transform:rotate(-168deg)}.mascot.pose-yawn .m-prop-zz{opacity:1}
.mascot .m-glow{animation:m-glow 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mascot .m-halo{animation:m-halo 4s ease-in-out infinite}
.mascot .m-led{animation:m-led 2.4s ease-in-out infinite}
@keyframes m-wave{0%,100%{transform:rotate(-140deg)}50%{transform:rotate(-165deg)}}
@keyframes m-tapl{from{transform:rotate(-26deg)}to{transform:rotate(-32deg)}}
@keyframes m-tapr{from{transform:rotate(26deg)}to{transform:rotate(32deg)}}
@keyframes m-glow{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}
@keyframes m-halo{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes m-led{0%,100%{opacity:1}50%{opacity:.45}}
.m-float{animation:m-float 4.5s ease-in-out infinite}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  .mascot *,.mascot,.m-float{animation:none!important;transition:none!important}
}
/* ===== photo mode (raster art from CONFIG in mascot.js) ===== */
.mascot.m-photo{height:calc(var(--m-size)*var(--m-ratio,1));--lx:0;--ly:0}
.m-photo .m-tilt{position:absolute;inset:0;transform:perspective(700px) rotateY(calc(var(--lx)*10deg)) rotateX(calc(var(--ly)*-7deg)) translate(calc(var(--lx)*3px),calc(var(--ly)*2px)) rotate(var(--lean,0deg));transform-origin:50% 85%;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .6s}
.m-photo picture,.m-photo .m-img,.m-photo .m-glow{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none}
.m-photo .m-img{object-fit:contain;filter:drop-shadow(0 10px 18px rgba(17,20,24,.28))}
.m-head .m-tilt{border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--mint),0 6px 16px -6px rgba(17,20,24,.5),0 0 18px -4px rgba(56,225,179,.55)}
.m-head .m-img{filter:none}
.m-photo .m-glow{mix-blend-mode:screen;opacity:.55;animation:m-glowp 3.6s ease-in-out infinite}
.m-photo .m-s{position:absolute;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(56,225,179,.55),rgba(56,225,179,0) 65%);mix-blend-mode:screen;animation:m-glowp 3.6s ease-in-out infinite;pointer-events:none}
.m-photo .m-hl{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--lx)*35%) calc(35% + var(--ly)*30%),rgba(255,255,255,.22),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}
.m-bust .m-hl{-webkit-mask:var(--m-mask) center/contain no-repeat;mask:var(--m-mask) center/contain no-repeat}
.m-photo.blink .m-glow{opacity:.95}.m-photo.blink .m-s{opacity:1}
@keyframes m-glowp{0%,100%{opacity:.35}50%{opacity:.85}}
/* pose: badge icon + small lean, no body redraw */
.m-photo .m-badge{position:absolute;right:-4%;bottom:4%;width:max(22px,calc(var(--m-size)*.3));aspect-ratio:1;border-radius:50%;background:var(--charcoal,#111418);color:var(--mint,#38e1b3);box-shadow:0 0 0 2px var(--mint,#38e1b3),0 4px 10px -3px rgba(0,0,0,.45);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);z-index:2}
.m-bust .m-badge{right:4%;bottom:22%;width:clamp(28px,calc(var(--m-size)*.22),40px)}
.m-photo .m-badge svg{width:58%;height:58%;fill:currentColor}
.m-photo.m-has-badge .m-badge{opacity:1;transform:none}
.m-photo.pose-point{--lean:-4deg}.m-photo.pose-phone{--lean:5deg}.m-photo.pose-doc{--lean:-2deg}
.m-photo.pose-wave .m-tilt{animation:m-sway 1.3s ease-in-out 2}
.m-photo.pose-thumb .m-badge{animation:m-pop .5s cubic-bezier(.3,1.6,.5,1)}
.m-photo.pose-type .m-badge circle{animation:m-dot 1s infinite}.m-photo.pose-type .m-badge circle:nth-child(2){animation-delay:.15s}.m-photo.pose-type .m-badge circle:nth-child(3){animation-delay:.3s}
@keyframes m-sway{0%,100%{rotate:0deg}30%{rotate:-4deg}70%{rotate:4deg}}
@keyframes m-pop{0%{transform:scale(.3)}100%{transform:none}}
@keyframes m-dot{0%,100%{opacity:.35}50%{opacity:1}}
/* moods via lighting and overlays */
.m-photo.mood-happy .m-tilt{filter:brightness(1.05) saturate(1.06)}
.m-photo.mood-sleepy .m-tilt,.m-photo.mood-yawn .m-tilt{filter:brightness(.72) saturate(.7)}
.m-photo .m-bubble{position:absolute;left:-6%;top:-4%;font:700 calc(max(10px,var(--m-size)*.13))/1 Inter,system-ui,sans-serif;letter-spacing:.06em;color:var(--charcoal,#111418);background:#fff;border-radius:999px;padding:.3em .55em;box-shadow:0 4px 12px -4px rgba(0,0,0,.4);opacity:0;transform:translateY(6px) scale(.8);transition:opacity .3s,transform .4s;z-index:2;line-height:1;white-space:nowrap}
.m-photo.mood-yawn .m-bubble{opacity:1;transform:none;animation:m-zz 2s ease-in-out infinite}
@keyframes m-zz{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.m-photo .m-tilt,.m-photo .m-glow,.m-photo .m-s,.m-photo .m-badge,.m-photo .m-bubble,.m-photo.pose-type .m-badge circle{animation:none!important;transition:none!important}.m-photo .m-glow{opacity:.6}.m-photo .m-s{opacity:.7}}