/* =======================================================
   STELLABOLD INDEX
   MAIN STYLES
======================================================= */


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

html{

    scroll-behavior:smooth;

}


body{

    background:#f8fafc;

    color:#0f172a;

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;

}


/* =======================================================
   TEXT EFFECTS
======================================================= */


.gradient-text{

    background:

    linear-gradient(
        90deg,
        #2563eb 0%,
        #7c3aed 100%
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* =======================================================
   BACKGROUND GRID
======================================================= */


.grid-pattern{

    background-size:

    40px 40px;


    background-image:

    linear-gradient(
        to right,
        rgba(0,0,0,.03) 1px,
        transparent 1px
    ),

    linear-gradient(
        to bottom,
        rgba(0,0,0,.03) 1px,
        transparent 1px
    );

}

/* =======================================================
   ROTATING WORDS
======================================================= */


.word-slider{

    display:inline-block;

    position:relative;

    vertical-align:bottom;

    text-align:left;

    overflow:hidden;

    padding-right:.1em;

}


.word-slider .word{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    opacity:0;

    animation:

    slideWords 8s cubic-bezier(.4,0,.2,1) infinite;

}



.word-slider .word:nth-child(2){

    animation-delay:0s;

}


.word-slider .word:nth-child(3){

    animation-delay:2s;

}


.word-slider .word:nth-child(4){

    animation-delay:4s;

}


.word-slider .word:nth-child(5){

    animation-delay:6s;

}



@keyframes slideWords{


    0%{

        opacity:0;

        transform:translateY(100%);

    }


    4%,
    21%{

        opacity:1;

        transform:translateY(0);

    }


    25%,
    100%{

        opacity:0;

        transform:translateY(-100%);

    }


}

/* =======================================================
   INDUSTRY BANNER
======================================================= */


.industry-banner{

    overflow:hidden;

    white-space:nowrap;

    width:100%;


    mask-image:

    linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );


    -webkit-mask-image:

    linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

}



.industry-track{

    display:inline-block;

    animation:

    scrollBanner 30s linear infinite;

}



.industry-logo{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    margin:

    0 2rem;


    height:2.5rem;


    color:#64748b;


    font-weight:700;


    font-size:1.25rem;


    text-transform:uppercase;


    letter-spacing:.05em;


    opacity:.8;


    transition:.3s;

}



.industry-logo:hover{

    opacity:1;

    color:#0f172a;

    transform:scale(1.05);

}



@keyframes scrollBanner{


    0%{

        transform:translateX(0);

    }


    100%{

        transform:translateX(-50%);

    }

}

/* =======================================================
   GLASS CARDS
======================================================= */


.glass-card{

    background:#ffffff;

    border:1px solid #e2e8f0;

    box-shadow:

    0 4px 6px -1px rgba(0,0,0,.05);


    transition:

    all .3s ease;

}



.glass-card:hover{

    border-color:#93c5fd;


    transform:

    translateY(-4px);


    box-shadow:

    0 10px 15px -3px rgba(0,0,0,.1);

}

/* =======================================================
   ACCORDION
======================================================= */


.accordion-wrapper{

    display:grid;

    grid-template-rows:0fr;

    transition:

    grid-template-rows .4s ease-out;

}



.accordion-wrapper.is-open{

    grid-template-rows:1fr;

}



.accordion-inner{

    overflow:hidden;

}

/* =======================================================
   INDEX BUTTON HELPERS
======================================================= */


.index-btn{

    transition:

    background-color .3s ease,
    transform .3s ease;

}



.index-btn:hover{

    transform:

    translateY(-2px);

}

/* =======================================================
   RESPONSIVE DESIGN
======================================================= */


/* TABLET */

@media(max-width:1024px){


    .word-slider{

        display:block;

        margin-top:.5rem;

    }


    .industry-logo{

        font-size:1rem;

        margin:0 1.2rem;

    }


}



/* MOBILE */

@media(max-width:768px){


    body{

        overflow-x:hidden;

    }



    .glass-card{

        width:100%;

    }



    .industry-logo{

        height:2rem;

        font-size:.9rem;

    }



    .word-slider{

        width:100%;

    }



}



/* SMALL MOBILE */

@media(max-width:420px){


    .industry-logo{

        font-size:.8rem;

        margin:0 .8rem;

    }


}