/* ===== Mascote "Adriano" (componente <x-mascot>) ===== */
.mascot { position: relative; display: inline-block; width: var(--ms, 200px); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.m-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 85%; }

/* Cada parte só aparece nos humores listados em data-m */
.mascot [data-m] { display: none; }
.mascot[data-mood="happy"]     [data-m~="happy"],
.mascot[data-mood="neutral"]   [data-m~="neutral"],
.mascot[data-mood="confused"]  [data-m~="confused"],
.mascot[data-mood="thinking"]  [data-m~="thinking"],
.mascot[data-mood="oops"]      [data-m~="oops"],
.mascot[data-mood="celebrate"] [data-m~="celebrate"],
.mascot[data-mood="love"]      [data-m~="love"],
.mascot[data-mood="sleepy"]    [data-m~="sleepy"] { display: inline; }

.hand { fill: #ffdc4d; stroke: #f4b62a; stroke-width: 2.5; }
.blush { opacity: .5; transition: opacity .3s; }
.mascot[data-mood="love"] .blush, .mascot[data-mood="celebrate"] .blush { opacity: .85; }

/* Olhos: seguem o cursor (variáveis --lx/--ly definidas pelo JS) e piscam */
.pupils { transform: translate(calc(var(--lx, 0) * .55px), calc(var(--ly, 0) * .5px)); transition: transform .12s ease-out; }
.eyes-blink { transform-box: fill-box; transform-origin: center; animation: m-blink 4.8s infinite; }
@keyframes m-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

/* Mãos que tampam os olhos */
.cover { opacity: 0; transform: translateY(46px); transition: transform .28s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; pointer-events: none; }
.mascot.is-covering .cover { opacity: 1; transform: translateY(0); }

/* Animações de humor */
.wave { transform-origin: 150px 134px; animation: m-wave 1.4s ease-in-out infinite; }
@keyframes m-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 75% { transform: rotate(14deg); } }
.hand-up { animation: m-cheer .7s ease-in-out infinite alternate; }
.up-r { animation-delay: -.35s; }
@keyframes m-cheer { to { transform: translateY(-9px); } }
.cap-g { transform-box: fill-box; transform-origin: center bottom; }
.mascot[data-mood="celebrate"] .cap-g { animation: m-cap 1s ease-in-out infinite; }
@keyframes m-cap { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-8deg); } }
.tassel { transform-origin: 152px 22px; animation: m-sway 3s ease-in-out infinite; }
@keyframes m-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.drop { transform-box: fill-box; transform-origin: top center; animation: m-drip 2.4s ease-in infinite; }
@keyframes m-drip { 0% { transform: translateY(-4px) scale(.7); opacity: 0; } 25% { opacity: 1; transform: none; } 100% { transform: translateY(30px); opacity: 0; } }
.qm { transform-box: fill-box; transform-origin: center; animation: m-qbob 3.4s ease-in-out infinite; }
.q2 { animation-delay: -1.5s; } .q3 { animation-delay: -2.4s; }
@keyframes m-qbob { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-9px) rotate(12deg); } }
.dot { animation: m-dot 1.2s infinite; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .4s; }
@keyframes m-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.spark { transform-box: fill-box; transform-origin: center; animation: m-twinkle 1.4s ease-in-out infinite; }
.s2 { animation-delay: -.3s; } .s3 { animation-delay: -.7s; } .s4 { animation-delay: -1s; }
@keyframes m-twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.floaty { animation: m-rise 2.6s ease-in infinite; } .h2 { animation-delay: -1.3s; }
@keyframes m-rise { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.heart-eye { transform-box: fill-box; transform-origin: center; animation: m-beat .9s ease-in-out infinite; }
@keyframes m-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.zz { animation: m-zz 2.6s ease-in-out infinite; opacity: 0; } .z2 { animation-delay: .6s; } .z3 { animation-delay: 1.2s; }
@keyframes m-zz { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
.snore { transform-box: fill-box; transform-origin: center; animation: m-snore 2.6s ease-in-out infinite; }
@keyframes m-snore { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.3); } }

/* Interação: passar o mouse e clicar */
.mascot:hover .m-svg { animation: m-wiggle .5s ease; }
.mascot.jump .m-svg { animation: m-jump .65s cubic-bezier(.3, .7, .4, 1); }
.mascot.shake .m-svg { animation: m-shake .5s ease; }
.mascot.spin .m-svg { animation: m-spin 1s cubic-bezier(.3, .7, .3, 1); }
@keyframes m-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes m-jump {
    0% { transform: scale(1, 1); } 20% { transform: scale(1.1, .88); }
    50% { transform: translateY(-26px) scale(.94, 1.1); } 80% { transform: translateY(0) scale(1.07, .92); } 100% { transform: scale(1, 1); }
}
@keyframes m-spin {
    0% { transform: scale(.85) rotate(0); } 35% { transform: translateY(-34px) scale(1.18) rotate(200deg); }
    70% { transform: translateY(0) scale(.96) rotate(360deg); } 85% { transform: scale(1.06) rotate(360deg); } 100% { transform: scale(1) rotate(360deg); }
}
@keyframes m-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }

/* Balãozinho de fala */
.m-bubble {
    position: absolute; left: 62%; top: -4px; transform: translate(0, -100%) scale(.85); transform-origin: bottom left;
    max-width: 220px; width: max-content; padding: 8px 14px; border-radius: 16px 16px 16px 4px;
    background: #fff; color: #1d1d35; font-size: 14px; font-weight: 500; line-height: 1.3;
    box-shadow: 0 10px 26px rgba(10, 4, 80, .3); opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .25s cubic-bezier(.3, 1.4, .5, 1); z-index: 5;
}
.m-bubble.show { opacity: 1; transform: translate(0, -100%) scale(1); }

/* Mascote no herói das telas de acesso (painel animado) */
.f-main.mascot { position: absolute; --ms: 300px; width: var(--ms); top: 38%; left: 50%; margin: -172px 0 0 -150px; z-index: 3; }
@media (max-height: 760px) { .f-main.mascot { --ms: 230px; margin: -132px 0 0 -115px; } }

/* Mascote em cartões (dashboard/perfil) */
.hello { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.hello h1 { margin-bottom: 2px; }
.hello .subtitle { margin: 0; }
.hello .mascot { --ms: 110px; flex: none; }
.hello .m-bubble { left: 70%; top: 6px; }

@media (prefers-reduced-motion: reduce) { .mascot, .mascot * { animation: none !important; } }

/* Confete e onda de impacto */
.confetti-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.confetti-layer i { position: absolute; left: 0; top: 0; display: block; opacity: 0; will-change: transform, opacity; }
.pop-ring { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 4px solid #ffc83d; animation: m-ring .9s ease-out forwards; }
@keyframes m-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(7); opacity: 0; } }

/* ===== Visual por curso (roupa, chapéu, rosto, cabelo) ===== */
.mascot [data-l] { display: none; }
.mascot[data-look~="o-gown"] [data-l="o-gown"],
.mascot[data-look~="o-coat"] [data-l="o-coat"],
.mascot[data-look~="o-scrubs"] [data-l="o-scrubs"],
.mascot[data-look~="o-vest"] [data-l="o-vest"],
.mascot[data-look~="o-hoodie"] [data-l="o-hoodie"],
.mascot[data-look~="o-suit"] [data-l="o-suit"],
.mascot[data-look~="o-robe"] [data-l="o-robe"],
.mascot[data-look~="o-chef"] [data-l="o-chef"],
.mascot[data-look~="o-cardigan"] [data-l="o-cardigan"],
.mascot[data-look~="o-plaid"] [data-l="o-plaid"],
.mascot[data-look~="o-sport"] [data-l="o-sport"],
.mascot[data-look~="o-stripes"] [data-l="o-stripes"],
.mascot[data-look~="o-casual"] [data-l="o-casual"],
.mascot[data-look~="h-cap"] [data-l="h-cap"],
.mascot[data-look~="h-hardhat"] [data-l="h-hardhat"],
.mascot[data-look~="h-nursecap"] [data-l="h-nursecap"],
.mascot[data-look~="h-chefhat"] [data-l="h-chefhat"],
.mascot[data-look~="h-strawhat"] [data-l="h-strawhat"],
.mascot[data-look~="h-beret"] [data-l="h-beret"],
.mascot[data-look~="h-headphones"] [data-l="h-headphones"],
.mascot[data-look~="h-headband"] [data-l="h-headband"],
.mascot[data-look~="h-flatcap"] [data-l="h-flatcap"],
.mascot[data-look~="h-sunhat"] [data-l="h-sunhat"],
.mascot[data-look~="h-bellhop"] [data-l="h-bellhop"],
.mascot[data-look~="h-headmirror"] [data-l="h-headmirror"],
.mascot[data-look~="f-glasses"] [data-l="f-glasses"],
.mascot[data-look~="f-goggles"] [data-l="f-goggles"],
.mascot[data-look~="hr-old"] [data-l="hr-old"],
.mascot[data-look~="hr-new"] [data-l="hr-new"],
.mascot[data-look~="hr-low"] [data-l="hr-low"] { display: inline; }

/* Selo com o emoji do curso */
.mascot .prop { display: none; transform-box: fill-box; transform-origin: center; }
.mascot.has-prop .prop { display: inline; animation: m-prop 3.2s ease-in-out infinite; }
@keyframes m-prop { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }

/* Troca de visual: "puff" */
.mascot.swap .m-svg { animation: m-swap .7s cubic-bezier(.3, .7, .3, 1); }
@keyframes m-swap {
    0% { transform: scale(1); } 25% { transform: scale(.82, 1.12) rotate(-6deg); }
    55% { transform: scale(1.12, .9) rotate(5deg); } 100% { transform: scale(1) rotate(0); }
}