/* =========================================
   Lapis Interactive — Mascot (component)
   Purpose: floating mascot with soft ground shadow
   Scope: .mascot wrapper; safe on any page
   Depends on: css/style.css tokens (accent, spacing)
   ========================================= */

/* 1) Wrapper: center mascot and create local stacking context */
.mascot{
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(8px, 3vh, 24px) 0;
    isolation: isolate;  /* ensure ::after shadow stays under the image */
}

/* 2) Image: float animation + subtle glow */
.mascot img{
    position: relative; z-index: 1;   /* above shadow */
    display: block;                   /* remove inline-img bottom gap */
    width: min(280px, 40vw);
    height: auto;
    filter:
            drop-shadow(0 0 18px color-mix(in hsl, var(--accent), white 10%))
            drop-shadow(0 20px 40px rgba(0,0,0,.55));
    animation: cat-float 6s ease-in-out infinite;
    user-select: none;                /* prevent accidental select/drag */
    -webkit-user-drag: none;
}

/* 3) Ground shadow: soft ellipse under the mascot */
.mascot::after{
    content: "";
    position: absolute; z-index: 0;
    left: 50%;
    bottom: clamp(8px, 2vh, 16px);
    inline-size: min(320px, 45vw);
    block-size: clamp(16px, 2.6vh, 26px);
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0,0,0,.38), rgba(0,0,0,0));
    filter: blur(6px);
    opacity: .5;
    pointer-events: none;
}

/* 4) Pixel-art option (opt-in on wrapper) */
.mascot--pixel img{
    image-rendering: pixelated;
    image-rendering: crisp-edges; /* fallback in some engines */
}

/* 5) Motion */
@keyframes cat-float{
    0%   { transform: translateY(0) }
    50%  { transform: translateY(-6px) }
    100% { transform: translateY(0) }
}
@media (prefers-reduced-motion: reduce){
    .mascot img{ animation: none }
}

/* 6) Small screens (≤640px): scale mascot down slightly */
@media (max-width: 640px){
    .mascot img{ width: min(220px, 65vw) }
}