/* =====================================================
   Vice City Vibe
   components.css

   Reusable UI components
===================================================== */



/* =====================================================
   LOGO
===================================================== */


.logo {

    font-family: var(--font-logo);

    font-size: 1.8rem;

    letter-spacing: 2px;

    color: var(--text);

    text-transform: uppercase;

    transition: var(--transition);

}



.logo:hover {

    color: var(--pink);

    text-shadow:
        0 0 10px var(--pink),
        0 0 25px var(--pink);

}





/* =====================================================
   NAVIGATION GLASS PANEL
===================================================== */


.site-header {

    background:

        linear-gradient(
            to bottom,
            rgba(13,16,33,0.85),
            rgba(13,16,33,0.35)
        );

    backdrop-filter: blur(12px);

}





.main-navigation {

    border-bottom:

        1px solid rgba(255,255,255,0.08);

}





.navigation-links a {

    position: relative;

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text-muted);

    transition: var(--transition);

}





.navigation-links a:hover {

    color: var(--cyan);

}





.navigation-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--pink);

    transition: var(--transition);

}





.navigation-links a:hover::after {

    width: 100%;

}





/* =====================================================
   BUTTONS
===================================================== */


.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:

        0.85rem 2rem;


    border-radius: 50px;


    background: var(--pink);

    color: white;


    font-weight: 700;

    letter-spacing: 0.5px;


    transition: var(--transition);


    box-shadow:

        0 0 20px rgba(255,62,165,0.35);

}





.button:hover {

    background: var(--cyan);

    color: var(--bg);


    transform: translateY(-3px);


    box-shadow:

        0 0 25px rgba(0,217,255,0.45);

}





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


.card {

    background:

        linear-gradient(
            145deg,
            var(--surface),
            var(--surface-light)
        );


    border-radius: var(--radius);


    padding: 2rem;


    border:

        1px solid rgba(255,255,255,0.08);


    transition: var(--transition);


    box-shadow: var(--shadow);

}





.card:hover {

    transform: translateY(-8px);


    border-color:

        rgba(0,217,255,0.5);


    box-shadow:

        0 15px 40px rgba(0,0,0,0.5),
        0 0 20px rgba(0,217,255,0.15);

}





.card h3 {

    color: var(--text);

    margin-bottom: 0.8rem;

}





/* =====================================================
   SECTION TITLES
===================================================== */


.section-title {

    text-align: center;

    margin-bottom: 3rem;

}





.section-title span {

    color: var(--pink);

}





/* =====================================================
   FEATURE BOXES
===================================================== */


.feature-box {

    background: var(--surface);

    border-radius: var(--radius);

    padding: 2.5rem;


    border-left:

        4px solid var(--cyan);


}





/* =====================================================
   BADGES
===================================================== */


.badge {

    display: inline-block;


    padding:

        0.35rem 0.9rem;


    border-radius: 50px;


    background: var(--purple);


    color: white;


    font-size: 0.85rem;

    font-weight: 700;

}





/* =====================================================
   SCROLL INDICATOR
===================================================== */


.scroll-indicator {

    margin-top: 4rem;


    font-size: 2rem;


    color: var(--cyan);


    animation:

        bounce 2s infinite;

}





@keyframes bounce {


    0%,
    100% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(12px);

    }


}





/* =====================================================
   FOOTER
===================================================== */


.site-footer {

    background:

        rgba(0,0,0,0.2);


    border-top:

        1px solid rgba(255,255,255,0.08);

}





.site-footer h3 {

    font-family: var(--font-logo);

    color: var(--pink);

    letter-spacing: 2px;

}