/* =========================================
   VRChatCustom 2.0
   Stats Section Styles
========================================= */



/* ===============================
   STATS CONTAINER
================================ */


.stats {


    width:

    min(95%, 1200px);



    margin:

    0 auto;



    display:

    grid;



    grid-template-columns:

    repeat(4,1fr);



    gap:

    25px;



    position:

    relative;



    z-index:

    2;



}







/* ===============================
   STAT BOX
================================ */


.stat-box {


    padding:

    35px 25px;



    text-align:

    center;



    background:

    var(--glass-bg);



    border:

    1px solid var(--glass-border);



    border-radius:

    var(--radius-large);



    backdrop-filter:

    blur(20px);



    -webkit-backdrop-filter:

    blur(20px);



    transition:

    var(--transition-normal);



    position:

    relative;



    overflow:

    hidden;



}






/* ===============================
   TOP GLOW LINE
================================ */


.stat-box::before {


    content:"";


    position:

    absolute;



    top:

    0;



    left:

    50%;



    transform:

    translateX(-50%);



    width:

    0;



    height:

    3px;



    background:

    var(--primary);



    transition:

    var(--transition-normal);



    box-shadow:

    0 0 20px var(--primary);



}







/* ===============================
   HOVER
================================ */


.stat-box:hover {


    transform:

    translateY(-10px);



    border-color:

    rgba(0,245,212,.35);



    box-shadow:

    var(--shadow-glow);



}






.stat-box:hover::before {


    width:

    80%;



}








/* ===============================
   NUMBER
================================ */


.stat-box h2 {


    font-family:

    var(--font-title);



    font-size:

    clamp(
        32px,
        4vw,
        45px
    );



    margin-bottom:

    10px;



    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );



    -webkit-background-clip:

    text;



    -webkit-text-fill-color:

    transparent;



    filter:

    drop-shadow(
        0 0 15px
        rgba(0,245,212,.35)
    );



}







/* ===============================
   DESCRIPTION
================================ */


.stat-box p {


    color:

    var(--text-secondary);



    font-size:

    15px;



    font-weight:

    500;



    letter-spacing:

    .5px;



}








/* ===============================
   ICON SUPPORT
================================ */


.stat-icon {


    width:

    50px;



    height:

    50px;



    margin:

    0 auto 20px;



    display:

    flex;



    justify-content:

    center;



    align-items:

    center;



    border-radius:

    50%;



    background:

    rgba(0,245,212,.1);



    color:

    var(--primary);



    font-size:

    22px;



}







/* ===============================
   ANIMATION
================================ */


.stat-box {


    animation:

    fadeUp .8s ease forwards;



}







@keyframes fadeUp {


    from {


        opacity:

        0;


        transform:

        translateY(30px);



    }



    to {


        opacity:

        1;


        transform:

        translateY(0);



    }


}