/*
 * Pose-aware entrances for static mascots on authenticated pages.
 * Placement belongs to the existing page styles; this sheet animates only the
 * dedicated inner layer, so the final footprint and every breakpoint stay put.
 */

.internal-page-mascot-slot {
    line-height: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.internal-page-mascot-slot--ready {
    aspect-ratio: 854 / 748;
}

.internal-page-mascot-slot--insight {
    aspect-ratio: 1024 / 555;
}

.internal-page-mascot-slot--ponder {
    aspect-ratio: 863 / 784;
}

.internal-page-mascot-slot--victory {
    aspect-ratio: 1006 / 749;
}

.internal-page-mascot-slot--teach {
    aspect-ratio: 1007 / 726;
}

.internal-page-mascot-slot > .internal-page-mascot-motion {
    width: 100%;
    height: 100%;
}

.internal-page-mascot-motion {
    display: block;
    line-height: 0;
    pointer-events: none;
    transform: none;
}

.internal-page-mascot-slot > .internal-page-mascot-motion > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

body.tw-dashboard.tw-challenges
    .challenges-desktop-mascot-stage
    > .internal-page-mascot-motion {
    width: 100%;
}

html.studiverse-page-mascot-motion
    [data-page-mascot-motion]:not(.is-page-mascot-motion-active):not(.is-page-mascot-motion-complete) {
    opacity: 0;
}

html.studiverse-page-mascot-motion
    [data-page-mascot-motion].is-page-mascot-motion-active {
    will-change: transform, opacity;
}

html.studiverse-page-mascot-motion
    [data-page-mascot-motion].is-page-mascot-motion-complete {
    opacity: 1;
    transform: none;
    will-change: auto;
}

[data-page-mascot-motion="ready"] {
    transform-origin: 50% 74%;
}

[data-page-mascot-motion="insight"] {
    transform-origin: 52% 76%;
}

[data-page-mascot-motion="ponder"] {
    /* Anchor the thinking gesture close to the supporting hand so the
       entrance reads as a deliberate lean, not a floating card animation. */
    transform-origin: 54% 82%;
}

[data-page-mascot-motion="victory"] {
    transform-origin: 50% 80%;
}

[data-page-mascot-motion="charge"] {
    transform-origin: 51% 82%;
}

[data-page-mascot-motion="teach"] {
    transform-origin: 52% 79%;
}

@media (prefers-reduced-motion: no-preference) {
    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="ready"].is-page-mascot-motion-active {
        animation: studiverse-page-mascot-ready 720ms cubic-bezier(.16, 1, .3, 1) both;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="insight"].is-page-mascot-motion-active {
        animation: studiverse-page-mascot-insight 820ms cubic-bezier(.16, 1, .3, 1) both;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="ponder"].is-page-mascot-motion-active {
        animation: studiverse-page-mascot-ponder 900ms cubic-bezier(.16, 1, .3, 1) both;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="victory"].is-page-mascot-motion-active {
        animation: studiverse-page-mascot-victory 1040ms cubic-bezier(.16, 1, .3, 1) both;
    }

    /* The leaderboard already gives the trophy pose a prominent hero slot.
       Keep its entrance as restrained as the Stats mascot instead of adding
       a second, oversized celebration through the motion itself. */
    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="victory"][data-page-mascot-group="leaderboard"].is-page-mascot-motion-active {
        animation: studiverse-page-mascot-insight 820ms cubic-bezier(.16, 1, .3, 1) both;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="charge"].is-page-mascot-motion-active {
        animation: studiverse-page-mascot-charge 860ms cubic-bezier(.16, 1, .3, 1) both;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="teach"].is-page-mascot-motion-active {
        animation: studiverse-page-mascot-teach 780ms cubic-bezier(.16, 1, .3, 1) both;
    }
}

/* Folded-arms pose: quiet confidence, with no playful bounce. */
@keyframes studiverse-page-mascot-ready {
    0% {
        opacity: 0;
        transform: translate3d(-7px, 7px, 0) scale(.965) rotate(-.7deg);
    }
    24% {
        opacity: .88;
    }
    60% {
        opacity: 1;
        transform: translate3d(1px, -2px, 0) scale(1.009) rotate(.3deg);
    }
    82% {
        transform: translate3d(0, 1px, 0) scale(.998) rotate(-.1deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* Tablet pose: enter toward the data, then stop with measured precision. */
@keyframes studiverse-page-mascot-insight {
    0% {
        opacity: 0;
        transform: translate3d(9px, 7px, 0) scale(.962) rotate(1deg);
    }
    22% {
        opacity: .86;
    }
    56% {
        opacity: 1;
        transform: translate3d(-1px, -3px, 0) scale(1.011) rotate(-.45deg);
    }
    78% {
        transform: translate3d(1px, 1px, 0) scale(.998) rotate(.14deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* Thinking pose: rise into the question, lean toward the hand at the chin,
   then resolve one restrained micro-settle. The asymmetric trajectory gives
   the static artwork intention without turning contemplation into a bounce. */
@keyframes studiverse-page-mascot-ponder {
    0% {
        opacity: 0;
        transform: translate3d(-20px, 15px, 0) scale(.932) rotate(-1.45deg);
    }
    18% {
        opacity: .72;
    }
    47% {
        opacity: 1;
        transform: translate3d(3px, -6px, 0) scale(1.018) rotate(.52deg);
    }
    68% {
        transform: translate3d(-1.5px, 2px, 0) scale(.996) rotate(-.18deg);
    }
    83% {
        transform: translate3d(.5px, -1.5px, 0) scale(1.004) rotate(.08deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* Trophy pose: arrive from below-left as the cup is lifted, carry that energy
   into one clear overshoot, then settle at the supporting hand. This needs a
   broader silhouette change than the quieter Lobby and Stats poses because
   the trophy artwork is frequently rendered inside a compact hero slot. */
@keyframes studiverse-page-mascot-victory {
    0% {
        opacity: 0;
        transform: translate3d(-22px, 18px, 0) scale(.9) rotate(-2.8deg);
    }
    18% {
        opacity: .72;
    }
    48% {
        opacity: 1;
        transform: translate3d(4px, -9px, 0) scale(1.032) rotate(1.1deg);
    }
    68% {
        transform: translate3d(-1.5px, 3px, 0) scale(.994) rotate(-.35deg);
    }
    84% {
        transform: translate3d(.5px, -2px, 0) scale(1.006) rotate(.14deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* Forward-punch pose: rise from below the cards, then lock into place. */
@keyframes studiverse-page-mascot-charge {
    0% {
        opacity: 0;
        transform: translate3d(-7px, 15px, 0) scale(.948) rotate(-1.25deg);
    }
    22% {
        opacity: .86;
    }
    56% {
        opacity: 1;
        transform: translate3d(2px, -4px, 0) scale(1.017) rotate(.62deg);
    }
    79% {
        transform: translate3d(-1px, 1px, 0) scale(.997) rotate(-.18deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* Open-book pose: a small move toward the lesson and a soft final nod. */
@keyframes studiverse-page-mascot-teach {
    0% {
        opacity: 0;
        transform: translate3d(8px, 7px, 0) scale(.964) rotate(.8deg);
    }
    23% {
        opacity: .87;
    }
    55% {
        opacity: 1;
        transform: translate3d(-1px, -3px, 0) scale(1.011) rotate(-.38deg);
    }
    79% {
        transform: translate3d(1px, 1px, 0) scale(.998) rotate(.13deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="ready"].is-page-mascot-motion-active {
        animation-name: studiverse-page-mascot-ready-mobile;
        animation-duration: 560ms;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="insight"].is-page-mascot-motion-active {
        animation-name: studiverse-page-mascot-insight-mobile;
        animation-duration: 620ms;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="ponder"].is-page-mascot-motion-active {
        animation-name: studiverse-page-mascot-ponder-mobile;
        animation-duration: 700ms;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="victory"].is-page-mascot-motion-active {
        animation-name: studiverse-page-mascot-victory-mobile;
        animation-duration: 760ms;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="victory"][data-page-mascot-group="leaderboard"].is-page-mascot-motion-active {
        animation-name: studiverse-page-mascot-insight-mobile;
        animation-duration: 620ms;
    }

    html.studiverse-page-mascot-motion
        [data-page-mascot-motion="teach"].is-page-mascot-motion-active {
        animation-name: studiverse-page-mascot-teach-mobile;
        animation-duration: 620ms;
    }
}

@keyframes studiverse-page-mascot-ready-mobile {
    0% {
        opacity: 0;
        transform: translate3d(4px, 4px, 0) scale(.982) rotate(.35deg);
    }
    58% {
        opacity: 1;
        transform: translate3d(0, -1px, 0) scale(1.006) rotate(-.18deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes studiverse-page-mascot-insight-mobile {
    0% {
        opacity: 0;
        transform: translate3d(5px, 4px, 0) scale(.98) rotate(.45deg);
    }
    58% {
        opacity: 1;
        transform: translate3d(-1px, -1px, 0) scale(1.007) rotate(-.2deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes studiverse-page-mascot-ponder-mobile {
    0% {
        opacity: 0;
        transform: translate3d(-9px, 10px, 0) scale(.958) rotate(-.72deg);
    }
    22% {
        opacity: .78;
    }
    54% {
        opacity: 1;
        transform: translate3d(1px, -3px, 0) scale(1.012) rotate(.24deg);
    }
    78% {
        transform: translate3d(-.5px, 1px, 0) scale(.998) rotate(-.08deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes studiverse-page-mascot-victory-mobile {
    0% {
        opacity: 0;
        transform: translate3d(-12px, 10px, 0) scale(.93) rotate(-1.4deg);
    }
    20% {
        opacity: .78;
    }
    52% {
        opacity: 1;
        transform: translate3d(2px, -4px, 0) scale(1.02) rotate(.5deg);
    }
    75% {
        transform: translate3d(-1px, 1px, 0) scale(.997) rotate(-.15deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes studiverse-page-mascot-teach-mobile {
    0% {
        opacity: 0;
        transform: translate3d(4px, 4px, 0) scale(.98) rotate(.4deg);
    }
    58% {
        opacity: 1;
        transform: translate3d(-1px, -1px, 0) scale(1.007) rotate(-.18deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce), print {
    html [data-page-mascot-motion] {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }
}