/* ==========================================================================
   FITNESS TRAINER THEME
========================================================================== */

:root {

    --background: #050B12;
    --surface: #0E1621;
    --card: #13212E;

    --primary: #C8FF3D;
    --primary-dark: #A3D700;

    --text: #D6E4F7;
    --text-muted: #AAB4C2;

    --border: rgba(255,255,255,.08);

}

/* ==========================================================================
   GLOBAL
========================================================================== */

body {

    background-color: var(--background);
    color: var(--text);

    overflow-x: hidden;

}

/* ==========================================================================
   GLASSMORPHISM
========================================================================== */

.glass-card {

    background: linear-gradient(
        135deg,
        rgba(255,255,255,.05) 0%,
        rgba(255,255,255,0) 100%
    );

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.05);

}

/* ==========================================================================
   NEON EFFECTS
========================================================================== */

.neon-glow {

    box-shadow:
        0 0 25px rgba(200,255,61,.2);

}

.neon-glow-hover:hover {

    box-shadow:
        0 0 35px rgba(200,255,61,.4);

    border-color:
        rgba(200,255,61,.5);

}

/* ==========================================================================
   LIGHT LEAKS
========================================================================== */

.light-leak {

    background:

        radial-gradient(

            circle,

            rgba(200,255,61,.08) 0%,

            rgba(200,255,61,0) 70%

        );

}

/* ==========================================================================
   IMAGE MASK
========================================================================== */

.mask-fade {

    -webkit-mask-image:
        linear-gradient(
            to right,
            black 60%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            black 60%,
            transparent 100%
        );

}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0,
                             'wght' 400,
                             'GRAD' 0,
                             'opsz' 24;
}

.glass-card {
    background: linear-gradient(135deg,
        rgba(255,255,255,.05) 0%,
        rgba(255,255,255,0) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.05);
}

.glass-card-active {
    background: linear-gradient(135deg,
        rgba(255,255,255,.1) 0%,
        rgba(255,255,255,.02) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(200,255,61,.2);
}

.text-glow-lime {
    text-shadow: 0 0 15px rgba(200,255,61,.4);
}

.light-leak {
    background: radial-gradient(circle at center,
        rgba(200,255,61,.05) 0%,
        transparent 70%);
}