/**
 * 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;
    }
}

/*Mascot position WHY, cases, index*/

/* ---------------------------------------------------------
   1. INDEX PAGE (.mascot-index)
   --------------------------------------------------------- */
.mascot-index {
    position: absolute;
    z-index: 0;
    opacity: 1;
    height: auto;

    /* Default (Mobile / XS < 576px) */
    right: -40%;
    top: 120%;
    width: 100vw;
    max-width: none;
    transform: translateY(-50%);
}

/* SM (>= 576px) */
@media (min-width: 576px) {
    .mascot-index {
        top: -50%;
        right: -15%;
        width: 100vw;
        transform: translateY(-50%);
    }
}

/* MD (>= 768px) */
@media (min-width: 768px) {
    .mascot-index {
        right: -10%;
        width: 80vw;
        top: 40%;
    }
}

/* LG (>= 992px) - Base Desktop Tuning */
@media (min-width: 992px) {
    .mascot-index {
        right: 0%;
        top: 10%;
        width: 48vw;
        max-width: 850px;
        transform: none;
    }
}

/* XL (>= 1200px) */
@media (min-width: 1200px) {
    .mascot-index {
        width: 46vw;
        /* adjustments for wider screens if needed */
    }
}

/* XXL (>= 1400px) */
@media (min-width: 1400px) {
    .mascot-index {
        width: 44vw;
    }
}

/* XXXL (>= 1900px) */
@media (min-width: 1900px) {
    .mascot-index {
        width: 40vw;
        right: 2%;
    }
}

/* 4K (>= 2560px) */
@media (min-width: 2560px) {
    .mascot-index {
        width: 35vw;
        right: 5%;
        top: 15%;
        max-width: 1200px;
    }
}


/* ---------------------------------------------------------
   2. SERVICES PAGE (.mascot-services)
   --------------------------------------------------------- */
.mascot-services {
    position: absolute;
    z-index: 0;
    opacity: 1;
    height: auto;

    /* Default (Mobile / XS < 576px) */
    right: -40%;
    top: 120%;
    width: 100vw;
    max-width: none;
    transform: translateY(-50%);
}

/* SM (>= 576px) */
@media (min-width: 576px) {
    .mascot-services {
        top: -50%;
        right: -15%;
        width: 100vw;
        transform: translateY(-50%);
    }
}

/* MD (>= 768px) */
@media (min-width: 768px) {
    .mascot-services {
        right: -10%;
        width: 80vw;
        top: 40%;
    }
}

/* LG (>= 992px) - Base Desktop Tuning */
@media (min-width: 992px) {
    .mascot-services {
        right: 0%;
        top: 10%;
        width: 48vw;
        max-width: 850px;
        transform: none;
    }
}

/* XL (>= 1200px) */
@media (min-width: 1200px) {
    .mascot-services {
        width: 46vw;
        /* adjustments for wider screens if needed */
    }
}

/* XXL (>= 1400px) */
@media (min-width: 1400px) {
    .mascot-services {
        width: 44vw;
    }
}

/* XXXL (>= 1900px) */
@media (min-width: 1900px) {
    .mascot-services {
        width: 40vw;
        right: 2%;
    }
}

/* 4K (>= 2560px) */
@media (min-width: 2560px) {
    .mascot-services {
        width: 35vw;
        right: 5%;
        top: 15%;
        max-width: 1200px;
    }
}


/* ---------------------------------------------------------
   3. APPROACH PAGE (.mascot-approach)
   --------------------------------------------------------- */
.mascot-approach {
    position: absolute;
    z-index: 0;
    opacity: 1;
    height: auto;

    /* Default (Mobile / XS < 576px) */
    right: -40%;
    top: 120%;
    width: 100vw;
    max-width: none;
    transform: translateY(-50%);
}

/* SM (>= 576px) */
@media (min-width: 576px) {
    .mascot-approach {
        top: -50%;
        right: -15%;
        width: 100vw;
        transform: translateY(-50%);
    }
}

/* MD (>= 768px) */
@media (min-width: 768px) {
    .mascot-approach {
        right: -10%;
        width: 80vw;
        top: 40%;
    }
}

/* LG (>= 992px) - Base Desktop Tuning */
@media (min-width: 992px) {
    .mascot-approach {
        right: 0%;
        top: 10%;
        width: 48vw;
        max-width: 850px;
        transform: none;
    }
}

/* XL (>= 1200px) */
@media (min-width: 1200px) {
    .mascot-approach {
        width: 46vw;
        /* adjustments for wider screens if needed */
    }
}

/* XXL (>= 1400px) */
@media (min-width: 1400px) {
    .mascot-approach {
        width: 44vw;
    }
}

/* XXXL (>= 1900px) */
@media (min-width: 1900px) {
    .mascot-approach {
        width: 40vw;
        right: 2%;
    }
}

/* 4K (>= 2560px) */
@media (min-width: 2560px) {
    .mascot-approach {
        width: 35vw;
        right: 5%;
        top: 15%;
        max-width: 1200px;
    }
}

/* =========================================
   CSS-Only Mascot Animation
   ========================================= */
.mascot-css-animated {
    /* Use two separate animations with different prime durations to create a long non-repeating pattern (13 * 17 = 221s cycle) */
    animation:
        floatTranslate 13s ease-in-out infinite,
        floatRotate 17s ease-in-out infinite;
    will-change: translate, rotate;
}

@keyframes floatTranslate {
    0% {
        translate: 0 0;
    }

    20% {
        translate: 10px -15px;
    }

    40% {
        translate: -5px -25px;
    }

    60% {
        translate: -15px -10px;
    }

    80% {
        translate: 5px 5px;
    }

    100% {
        translate: 0 0;
    }
}

@keyframes floatRotate {
    0% {
        rotate: 0deg;
    }

    25% {
        rotate: 2deg;
    }

    50% {
        rotate: -1deg;
    }

    75% {
        rotate: 1deg;
    }

    100% {
        rotate: 0deg;
    }
}


/* =========================================
   Baby Super Qube Positioning (Bootstrap Grid)
   ========================================= */

.baby-wrapper {
    pointer-events: none;
    z-index: 0;
}



.baby-super-qube-img {
    width: auto;
    display: block;
    height: 90vh;
}

/* Adjustments per breakpoint if needed, though col classes handle width now */
@media (min-width: 992px) {
    .baby-super-qube-img {
        transform: translateX(-23%) translateY(-61%);
        height: 100vh;
    }
}

/* XXL (>= 1400px) */
@media (min-width: 1400px) {
    .baby-super-qube-img {
        transform: translateX(-5%) translateY(-15%);
        height: 90vh;
    }
}

/* XXXL (>= 1900px) */
@media (min-width: 1900px) {
    .baby-super-qube-img {
        transform: translateX(-5%) translateY(-15%);
        height: 70vh;
    }
}