/* ============================================================
   MOUSE TRAIL — BACKGROUND ONLY Start
============================================================ */

.page-wrapper {
    position: relative;
    isolation: isolate;
}


/* TRAIL LAYER */

.mouse-trail-layer {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 0;

    overflow: hidden;
}


/* INDIVIDUAL TRAIL */

.mouse-trail {
    position: fixed;

    width: 135px;
    height: 82px;

    border-radius: 50%;

    background: transparent;

    pointer-events: none;

    opacity: 0;

    filter: blur(25px);

    animation: mouseTrail 1.2s ease-out forwards;

    will-change: transform, opacity;
}


.mouse-trail::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 70%;
    height: 65%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #A41728;

    filter: blur(9px);

    opacity: .55;
}


/* TRAIL ANIMATION */

@keyframes mouseTrail {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.25);
    }

    15% {
        opacity: .40;
        transform:
            translate(-50%, -50%)
            scale(.65);
    }

    45% {
        opacity: .28;
        transform:
            translate(-50%, -50%)
            scale(1.05, .65);
    }

    75% {
        opacity: .12;
        transform:
            translate(-50%, -50%)
            scale(1.35, .45);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.65, .25);
    }

}


/* ============================================================
   CONTENT ABOVE TRAIL
============================================================ */

/*
   These are intentionally above the mouse layer.
*/



/* ALL CONTENT INSIDE MAIN */

.page-wrapper main section {
    position: relative;
    z-index: 1;
}


/* ============================================================
   FLOATING BUTTONS — ABSOLUTELY ABOVE TRAIL
============================================================ */

.floating-controls {
    position: fixed !important;
    z-index: 99999 !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {
    .stats-section {
    padding: 0px 20px;
}

    .mouse-trail-layer {
        display: none;
    }

}


/* ============================================================
   TOUCH DEVICES
============================================================ */

@media (hover: none), (pointer: coarse) {

    .mouse-trail-layer {
        display: none;
    }

}


/*    Mouse effets csss END  */