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

   Homepage specific styling
===================================================== */



/* =====================================================
   HERO BACKGROUND
===================================================== */


.hero {

    background:

        linear-gradient(
            to bottom,
            rgba(13,16,33,0.25),
            var(--bg)
        ),

        linear-gradient(
            to right,
            rgba(255,62,165,0.15),
            rgba(0,217,255,0.15)
        ),

        url("../images/hero/miami-sunset.jpg");


    background-size: cover;

    background-position: center;


}





/* =====================================================
   HERO OVERLAY

   Adds depth over the image
===================================================== */


.hero-overlay {

    position: absolute;

    inset: 0;


    background:

        linear-gradient(
            180deg,
            rgba(13,16,33,0.35),
            rgba(13,16,33,0.85)
        );


}





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


.hero-content {

    animation:

        fadeInUp 1.2s ease forwards;

}





.hero h1 {

    color: white;


    letter-spacing:

        8px;


    text-shadow:


        0 0 10px var(--pink),

        0 0 30px var(--pink),

        0 0 60px rgba(255,62,165,0.7);


}





.hero-tagline {

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


    font-size:

        clamp(1.2rem,3vw,2rem);


    color:

        var(--text);


}





.hero-description {

    margin-top: 1rem;


    font-size: 1.1rem;


    letter-spacing: 2px;

}





.hero-button {

    margin-top: 2.5rem;

}





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


@keyframes fadeInUp {


    from {

        opacity:0;

        transform:

            translateY(40px);

    }


    to {

        opacity:1;

        transform:

            translateY(0);

    }

}





/* =====================================================
   CATEGORY SECTION
===================================================== */


.category-section {

    position: relative;

}





.category-section h2 {

    text-align:center;


    color:var(--text);

}





.category-grid {

    margin-top:3rem;

}





.category-grid .card {

    text-align:center;


    min-height:220px;


    display:flex;


    flex-direction:column;


    justify-content:center;

}





.category-grid .card h3 {

    font-size:1.5rem;


    margin-bottom:1rem;

}





/* =====================================================
   FEATURE SECTIONS
===================================================== */


.feature-section .card {

    text-align:center;

}





.feature-section h2 {

    color:var(--cyan);

}





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

   Gives a retro futuristic feel
===================================================== */


body::before {

    content:"";


    position:fixed;


    inset:0;


    pointer-events:none;


    opacity:0.05;


    background-image:

        linear-gradient(
            rgba(255,255,255,.3) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.3) 1px,
            transparent 1px
        );


    background-size:

        40px 40px;


    z-index:-1;

}





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


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


    .hero-content {

        animation:none;

    }


    .scroll-indicator {

        animation:none;

    }


}