/* ==========================================================
   CHINMUN ERP
   CURSOR THEME EFFECT
   PREMIUM AMBIENT LIGHT
========================================================== */


/* ==========================================================
   CSS VARIABLES
========================================================== */

:root {

    --cursor-x: 50%;
    --cursor-y: 50%;

}


/* ==========================================================
   OLD CURSOR GLOW / RING
   COMPLETELY DISABLED
========================================================== */

.cursor-glow,
.cursor-ring {

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

}


/* ==========================================================
   BODY CURSOR READY
========================================================== */

body.cursor-ready {

    --ambient-opacity: 1;

}


/* ==========================================================
   PRIMARY BLUE / CYAN AMBIENT LIGHT
========================================================== */

body.cursor-ready::before {

    content: "";

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            520px circle
            at var(--cursor-x) var(--cursor-y),

            rgba(38, 116, 255, .14),

            rgba(0, 229, 195, .045) 32%,

            transparent 68%
        );

    opacity:
        var(--ambient-opacity);

    transition:
        opacity .35s ease;

    will-change:
        background;

}


/* ==========================================================
   SECONDARY PURPLE AMBIENT LIGHT
========================================================== */

body.cursor-ready::after {

    content: "";

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            760px circle
            at
            calc(var(--cursor-x) + 10%)
            calc(var(--cursor-y) - 8%),

            rgba(123, 46, 247, .085),

            rgba(94, 56, 220, .035) 38%,

            transparent 72%
        );

    opacity:
        var(--ambient-opacity);

    transition:
        opacity .35s ease;

    will-change:
        background;

}


/* ==========================================================
   KEEP WEBSITE CONTENT ABOVE AMBIENT EFFECT
========================================================== */

.site-header,
main,
section,
.site-footer {

    position: relative;

    z-index: 1;

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.hero,
.hero-section {

    position: relative;

    z-index: 1;

}


/* ==========================================================
   DASHBOARD 3D
========================================================== */

[data-tilt-card] {

    transform-style:
        preserve-3d;

    will-change:
        transform;

}


/* ==========================================================
   MAGNETIC BUTTON
========================================================== */

.magnetic-btn {

    will-change:
        transform;

}


/* ==========================================================
   SMOOTH INTERACTION
========================================================== */

[data-tilt-card],
.magnetic-btn {

    transition:
        transform .25s ease;

}


/* ==========================================================
   DESKTOP ONLY
========================================================== */

@media (min-width: 901px) {

    body.cursor-ready {

        cursor:
            default;

    }

}


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

@media (max-width: 900px) {

    body.cursor-ready::before,
    body.cursor-ready::after {

        display:
            none !important;

    }


    .cursor-glow,
    .cursor-ring {

        display:
            none !important;

    }

}


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

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

    body.cursor-ready::before,
    body.cursor-ready::after {

        display:
            none !important;

    }


    .cursor-glow,
    .cursor-ring {

        display:
            none !important;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    body.cursor-ready::before,
    body.cursor-ready::after {

        transition:
            none;

    }

}