/* ─── RICHARD Hero Mario Easter Egg ──────────────────────────────── */
/* Sprites: Mario.gif, Mario - Walk3.gif, Mario - Jump.gif (videogamesprites.net, SuperMarioBros1) */

.mario-wrap {
    position: absolute;
    bottom: 18%;
    left: -15%;
    width: 56px;
    height: 64px;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.mario-figure {
    width: 100%;
    height: 100%;
    background-image: url('../images/mario/mario-stand.gif');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    image-rendering: pixelated;
    transform-origin: bottom center;
}

/* Walking lap: handled on the wrapper via `left` so it never conflicts
   with the figure's hop/melt `transform` animations. */
.mario-wrap.is-active-walk {
    animation: mario-walk 24s linear infinite;
}

/* Hop + frame-swap only run while a lap is in progress. The melt
   animation is always present but starts paused; JS flips the
   play-state list to pause hop/frames and run melt on collision. */
.mario-wrap.is-active-walk .mario-figure {
    animation:
        mario-hop 0.8s ease-in-out infinite,
        mario-frames 0.8s steps(1) infinite,
        mario-melt 0.6s ease-in 1 forwards;
    animation-play-state: running, running, paused;
}

.mario-wrap.is-active-walk.is-colliding .mario-figure {
    animation-play-state: paused, paused, running;
}

/* Once the lava has been switched off (after being on at least once),
   freeze Mario in place instead of letting him keep running against
   inactive lava. Skipped while mid-melt so that reaction can finish. */
.mario-wrap.is-active-walk.is-lava-paused:not(.is-colliding) {
    animation-play-state: paused;
    opacity: 0;
}

.mario-wrap.is-active-walk.is-lava-paused:not(.is-colliding) .mario-figure {
    animation-play-state: paused !important;
}

@keyframes mario-walk {
    from { left: -15%; }
    to   { left: 110%; }
}

@keyframes mario-hop {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-22px); }
    100% { transform: translateY(0); }
}

@keyframes mario-frames {
    0%   { background-image: url('../images/mario/mario-stand.gif'); }
    34%  { background-image: url('../images/mario/mario-jump.gif'); }
    67%  { background-image: url('../images/mario/mario-walk.gif'); }
}

@keyframes mario-melt {
    0%   { transform: translateY(0) scaleY(1); opacity: 1; }
    60%  { transform: translateY(10px) scaleY(0.25); opacity: 0.6; }
    100% { transform: translateY(18px) scaleY(0.05); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mario-wrap {
        display: none;
    }
}