/* Compact mascot in sidebars / forum / contact hero */
.exam-sidebar-mascot .mascot,
.forum-header-mascot .mascot,
.landing-contact-mascot .mascot,
.notes-mascot .mascot,
.metrics-mascot .mascot {
    width: 72px;
    height: 89px;
}

/* Decorative only: no pointer hover, no hit target (pass-through to page behind). */
.mascot,
.mascot * {
    pointer-events: none;
    cursor: default;
}

/* Fixed scene: all layers share this coordinate space (see MASCOT_FACES.md). */
.mascot {
    position: relative;
    width: 99px;
    height: 121px;
    margin: 0 auto 0.35rem;
    animation: mascotFloat 3.2s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Persistent Base B — single img, never double-buffered in JS. */
.mascot__base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

/* Layer stack wrapper (aligned with legacy face origin) */
.mascot__tilt {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform-origin: 50% 30%;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Double-buffer stack: two imgs per part; opacity crossfade in JS (no display toggles). */
.mascot__dbl {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mascot__dbl--hole {
    z-index: 1;
}
.mascot__dbl--face-overlay {
    z-index: 2;
}
.mascot__dbl--eyes {
    z-index: 3;
}
.mascot__dbl--mouth {
    z-index: 4;
}
.mascot__dbl--accessory {
    z-index: 5;
}
.mascot__dbl--hand-left {
    z-index: 6;
}
.mascot__dbl--hand-right {
    z-index: 7;
}

/* Part layers: opacity is driven only by JS (inline) — no default opacity here (avoids invisible / dimmed stacks). */
.mascot__dbl .mascot__part {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain;
    object-position: center;

    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;

    user-select: none;
    pointer-events: none;
}

/* Hide eyes/mouth stacks under full-face overlay (wrapper only; inner img opacities unchanged). */
.mascot.mascot--face-overlay .mascot__dbl--eyes,
.mascot.mascot--face-overlay .mascot__dbl--mouth {
    opacity: 0;
    pointer-events: none;
}

.mascot.mascot--legacy .mascot__tilt {
    visibility: hidden;
}

@keyframes mascotFloat {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Success state animations — cssExpression keys from mascot.js (MASCOT_FACES.md) */
.mascot[data-expression="excited"],
.mascot[data-expression="big_success"],
.mascot[data-expression="joy"],
.mascot[data-expression="triumph"],
.mascot[data-expression="success"],
.mascot[data-expression="celebration"],
.mascot[data-expression="success_big"],
.mascot[data-expression="success_celebrate"],
.mascot[data-expression="proud_smile"] {
    animation: mascotBounce 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes mascotBounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Error state animations */
.mascot[data-expression="fail_sad"],
.mascot[data-expression="error"],
.mascot[data-expression="soft_error"],
.mascot[data-expression="strong_error"],
.mascot[data-expression="error_strong"],
.mascot[data-expression="frustrated"],
.mascot[data-expression="mad"],
.mascot[data-expression="disappointed"],
.mascot[data-expression="worried"],
.mascot[data-expression="very_sad"],
.mascot[data-expression="sad"] {
    animation: mascotShake 0.3s ease-in-out;
}

@keyframes mascotShake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

.mascot[data-expression="angry"] {
    animation: mascotShake 0.35s ease-in-out;
}

/* Surprised/shocked animation */
.mascot[data-expression="surprised"],
.mascot[data-expression="shocked"],
.mascot[data-expression="wow"] {
    animation: mascotSurprise 0.4s ease-out;
}

@keyframes mascotSurprise {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Sleepy animation */
.mascot[data-expression="idle_sleepy"],
.mascot[data-expression="yawn"],
.mascot[data-expression="tired"],
.mascot[data-expression="unamused"] {
    animation: mascotSlowBlink 4s ease-in-out infinite;
}

@keyframes mascotSlowBlink {
    0%,
    90%,
    100% {
        transform: translateY(0);
    }
    95% {
        transform: translateY(-2px);
    }
}

/* Curious / attentive tilt */
.mascot[data-expression="curious"],
.mascot[data-expression="look_left"],
.mascot[data-expression="look_right"],
.mascot[data-expression="look_up"],
.mascot[data-expression="looking_left"],
.mascot[data-expression="looking_right"],
.mascot[data-expression="looking_up"] {
    animation: mascotTilt 1s ease-in-out infinite;
}

@keyframes mascotTilt {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* Page placement helpers (scoped with [data-mascot-scope]) */
.mascot-hero {
    text-align: center;
    margin-bottom: 0.75rem;
}

.mascot-hero .mascot {
    margin-left: auto;
    margin-right: auto;
}

.dashboard-hub[data-mascot-scope] > .mascot-hero {
    margin-bottom: 1rem;
}

.exam-page-header[data-mascot-scope],
.exam-mascot-scope .exam-page-header {
    text-align: center;
}

.exam-page-header .mascot,
.exam-mascot-scope .exam-page-header .mascot {
    margin-left: auto;
    margin-right: auto;
}

.explorer-mascot-slot {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

/* Question Explorer — attempt flow: mascot on same row as question image (size scales with viewport) */
.explorer-attempt-flow[data-mascot-scope] .explorer-question-image-row__mascot {
    flex: 0 0 auto;
    align-self: flex-end;
    line-height: 0;
}

.explorer-attempt-flow[data-mascot-scope] .explorer-question-image-row__mascot .mascot {
    width: min(42px, 10.5vw);
    height: calc(min(42px, 10.5vw) * 121 / 99);
    margin: 0;
    cursor: default;
}

@media (min-width: 480px) {
    .explorer-attempt-flow[data-mascot-scope] .explorer-question-image-row__mascot .mascot {
        width: min(48px, 9vw);
        height: calc(min(48px, 9vw) * 121 / 99);
    }
}

@media (min-width: 900px) {
    .explorer-attempt-flow[data-mascot-scope] .explorer-question-image-row__mascot .mascot {
        width: min(54px, 7.5vw);
        height: calc(min(54px, 7.5vw) * 121 / 99);
    }
}

@media (max-width: 640px) {
    .explorer-attempt-flow[data-mascot-scope] .explorer-question-image-row__mascot {
        align-self: center;
    }

    .explorer-attempt-flow[data-mascot-scope] .explorer-question-image-row__mascot .mascot {
        width: min(39px, 16.5vw);
        height: calc(min(39px, 16.5vw) * 121 / 99);
    }
}

.trial-phone-card[data-mascot-scope] .mascot-hero,
.login-page[data-mascot-scope] .mascot-hero {
    margin-bottom: 0.5rem;
}

.landing-hero[data-mascot-scope] .mascot {
    margin: 0 auto 0.75rem;
}