/**
 * Floating Mascot Background System - Styles
 * Provides positioning, layering, and animation styles for mascots
 */

/* Base mascot element container */
.mascot-element {
    /* Position is set dynamically in JS (fixed or absolute) */
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1050;
    transform-origin: center center;
    will-change: transform, opacity;
}

.mascot-element img,
.mascot-element video {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Section overlay system - when sections intersect with mascots */
.mascot-overlay-on {
    position: relative;
    z-index: 2000 !important;
}

/* Visibility is now controlled by JSON visibleBreakpoints */



/* Reduced motion support - freeze animations but keep mascots visible */
@media (prefers-reduced-motion: reduce) {
    .mascot-element {
        will-change: auto;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 1024px) {
    .mascot-element {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
}