/* ============================================================
   Mascota Pro — Frontend Styles
   Extracted from wp_head + wp_footer <style> blocks · v8.0.0

   Dynamic values are supplied as CSS custom properties injected
   via wp_add_inline_style() in PHP:
     --mp-c1            : bubble border colour
     --mp-c1-88         : bubble border colour + 88 hex alpha
     --mp-c2            : bubble background colour
     --mp-c-txt         : bubble text colour
     --mp-sz            : mascota size in px
     --mp-happy-altura  : happy-jump height in px
     --mp-happy-altura-30 : 30% of happy-jump height in px
     --mp-zi            : z-index (clamped to 2147483647 min)
   ============================================================ */

/* ── Z-index override — Mascota always on top ── */
#mpW {
    position: fixed !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
    isolation: isolate !important;
    pointer-events: none !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}
/* Only interactive parts receive clicks */
#mpFig,
#mpBub,
#mpFig canvas,
#mpFig img,
#mpFig video {
    pointer-events: auto !important;
}
#mpFig {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}
#mpBub {
    z-index: 2147483646 !important;
    position: absolute !important;
    pointer-events: auto !important;
}
/* Prevent mascota blocking clicks in non-interactive areas */
#mpW *:not(#mpFig):not(#mpBub):not(#mpFig *):not(#mpBub *) {
    pointer-events: none !important;
}

/* ── Entry animations ── */
@keyframes mpEnBounce {
    0%   { transform: translateY(-100%) scaleY(.4) scaleX(1.3); opacity: 0; }
    40%  { transform: translateY(0) scaleY(1.15) scaleX(.92); opacity: 1; }
    58%  { transform: translateY(var(--mp-happy-altura)) scaleY(.93) scaleX(1.04); }
    72%  { transform: translateY(0) scaleY(1.07) scaleX(.97); }
    85%  { transform: translateY(var(--mp-happy-altura-30)) scaleY(.97); }
    100% { transform: translateY(0) scaleY(1) scaleX(1); }
}
@keyframes mpEnElastic {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    30%  { transform: scale(1.4) rotate(8deg); opacity: 1; }
    55%  { transform: scale(.85) rotate(-4deg); }
    70%  { transform: scale(1.1) rotate(2deg); }
    85%  { transform: scale(.96); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes mpEnPop {
    0%   { transform: scale(0); opacity: 0; }
    55%  { transform: scale(1.35); opacity: 1; }
    72%  { transform: scale(.9); }
    88%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes mpEnFade {
    0%   { opacity: 0; transform: scale(.5); }
    65%  { opacity: 1; transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes mpEnSlide {
    0%   { transform: translateY(-100%); opacity: 0; }
    65%  { transform: translateY(6px); opacity: 1; }
    82%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* ── Idle animations ── */
@keyframes mpFloat {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-7px) rotate(.4deg); }
    70%       { transform: translateY(-4px) rotate(-.4deg); }
}
@keyframes mpBreathe {
    0%, 100% { transform: scale(1); }
    45%       { transform: scale(1.06); }
    72%       { transform: scale(.98); }
}
@keyframes mpBob {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%       { transform: translateY(-6px) rotate(-2deg); }
    75%       { transform: translateY(-4px) rotate(2deg); }
}
@keyframes mpSwing {
    0%, 100% { transform: rotate(0); transform-origin: 50% 0; }
    30%       { transform: rotate(-6deg); transform-origin: 50% 0; }
    70%       { transform: rotate(6deg);  transform-origin: 50% 0; }
}
@keyframes mpPulseGlow {
    0%, 100% { filter: drop-shadow(0 0 0px   var(--mp-c1)); }
    50%       { filter: drop-shadow(0 0 10px  var(--mp-c1-88)); }
}

/* ── Walk animation ── */
@keyframes mpWalkBob {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%       { transform: translateY(-5px) rotate(-1.5deg); }
    75%       { transform: translateY(-3px) rotate(1.5deg); }
}

/* ── State animations ── */
@keyframes mpHappyA {
    0%   { transform: scaleY(1)   scaleX(1)    translateY(0); }
    25%  { transform: scaleY(.85) scaleX(1.15) translateY(3px); }
    55%  { transform: scaleY(1.1) scaleX(.94)  translateY(calc(-1 * var(--mp-happy-altura))); }
    80%  { transform: scaleY(.96) scaleX(1.04) translateY(2px); }
    100% { transform: scaleY(1)   scaleX(1)    translateY(0); }
}
@keyframes mpSleepA {
    0%, 100% { transform: scaleY(1) rotate(0); }
    50%       { transform: scaleY(.96) rotate(2deg); }
}
@keyframes mpExcitedA {
    0%, 100% { transform: translateX(0) rotate(0); }
    20%       { transform: translateX(-4px) rotate(-2.5deg); }
    40%       { transform: translateX(4px)  rotate(2.5deg); }
    60%       { transform: translateX(-2px) rotate(-1deg); }
    80%       { transform: translateX(2px)  rotate(1deg); }
}

/* ── Zzz particles ── */
.mpZ {
    position: absolute;
    pointer-events: none;
    font-weight: 900;
    color: var(--mp-c1);
    animation: mpZzz 2s ease-in-out infinite;
}
@keyframes mpZzz {
    0%   { opacity: 0; transform: translate(0, 0) scale(.7); }
    20%  { opacity: 1; }
    80%  { opacity: .8; }
    100% { opacity: 0; transform: translate(-8px, -26px) scale(1.3); }
}

/* ── Confetti particles ── */
@keyframes mpPart {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}
.mp-p {
    position: absolute;
    top: 40%; left: 40%;
    width: 8px; height: 8px;
    border-radius: 50%;
    animation: mpPart .9s ease-out forwards;
    pointer-events: none;
}

/* ── Emoji reaction ── */
@keyframes mpReact {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0)    scale(.5); }
    25%  { opacity: 1; transform: translateX(-50%) translateY(-14px) scale(1.2); }
    75%  { opacity: 1; transform: translateX(-50%) translateY(-26px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-38px) scale(.8); }
}

/* ── Bubble animations ── */
@keyframes mpBubIn {
    0%   { transform: scale(0);    opacity: 0; transform-origin: bottom left; }
    65%  { transform: scale(1.04); opacity: 1; transform-origin: bottom left; }
    100% { transform: scale(1);                transform-origin: bottom left; }
}
@keyframes mpBubOut {
    0%   { transform: scale(1); opacity: 1; transform-origin: bottom left; }
    100% { transform: scale(0); opacity: 0; transform-origin: bottom left; }
}

/* ── Ping / notification ── */
@keyframes mpPing {
    0%   { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}
#mpNotif.on { animation: mpPing .85s ease-out infinite; }

/* ── Cursor blink (typing indicator) ── */
.mpCur {
    display: inline-block;
    width: 2px; height: 12px;
    background: var(--mp-c1);
    margin-left: 2px;
    vertical-align: middle;
    animation: mpBlinkCur .6s infinite;
}
@keyframes mpBlinkCur {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── CSS flip for walk-left when no dedicated left frames ── */
#mpFig.fl-css #mpImg,
#mpFig.fl-css svg { transform: scaleX(-1); }

/* ── Close button — visible on hover ── */
#mpFig:hover #mpClose { display: flex !important; }

/* ── Accessibility: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    #mpFig,
    #mpBub,
    #mpW { animation: none !important; transition: none !important; }
}

/* ── Mobile scale-down ── */
@media (max-width: 480px) {
    #mpW { transform: scale(.82); transform-origin: top left; }
}