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

.background-gradient {

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at top left,
            #1a1a1a 0%,
            #050505 70%
        );

    z-index: -3;
}

.background-noise {

    position: fixed;

    inset: 0;

    opacity: 0.03;

    pointer-events: none;

    background-image:
        url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    z-index: -2;
}

/* =========================
   NAVBAR
========================= */

.navbar {

    width: 100%;

    position: fixed;

    top: 0;
    left: 0;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        1.5rem
        3rem;

    z-index: 100;

    background:
        rgba(5, 5, 5, 0.55);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.04);
}

.logo {

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 0.25rem;
}

.nav-links {

    display: flex;

    gap: 2rem;
}

/* =========================
   HERO SECTION
========================= */

.project-hero {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    align-items: center;

    gap: 4rem;

    padding:
        10rem
        5rem
        6rem
        5rem;
}

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

.project-label {

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.12rem;

    font-size: 0.8rem;

    margin-bottom: 1.5rem;
}

.hero-content h1 {

    font-size:
        clamp(3.5rem, 7vw, 7rem);

    line-height: 0.95;

    letter-spacing: -0.06em;

    font-weight: 600;

    margin-bottom: 2rem;

    max-width: 700px;
}

.project-intro {

    max-width: 650px;

    color: var(--text-secondary);

    font-size: 1.1rem;

    line-height: 1.8;

    margin-bottom: 2.5rem;
}

/* =========================
   TAGS
========================= */

.project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;
}

.project-tags span {

    padding:
        0.8rem
        1rem;

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

    background:
        rgba(255, 255, 255, 0.03);

    color: var(--text-secondary);

    font-size: 0.9rem;
}

/* =========================
   REPOSITORY LINK
========================= */

.repository-link {

    display: inline-block;

    margin-top: 2rem;

    color: var(--text-secondary);

    position: relative;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.repository-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.12);

    transition:
        background var(--transition-fast);
}

.repository-link:hover {

    color: var(--text-primary);

    transform: translateX(4px);
}

.repository-link:hover::after {

    background:
        rgba(255, 255, 255, 0.3);
}

/* =========================
   HERO IMAGE
========================= */

.hero-image {

    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.02);
}

.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

/* =========================
   CONTENT SECTION
========================= */

.content-section {

    padding:
        8rem
        5rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.04);
}

/* =========================
   SECTION HEADING
========================= */

.section-heading {

    margin-bottom: 4rem;
}

.section-label {

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.12rem;

    font-size: 0.8rem;

    margin-bottom: 1rem;
}

.section-heading h2 {

    font-size:
        clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1.02;

    letter-spacing: -0.05em;

    font-weight: 600;

    max-width: 900px;
}

/* =========================
   TEXT CONTENT
========================= */

.text-content {

    max-width: 850px;
}

.text-content p {

    color: var(--text-secondary);

    font-size: 1.05rem;

    line-height: 1.9;

    margin-bottom: 2rem;
}

/* =========================
   FEATURES
========================= */

.features-section {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 2rem;

    padding:
        0rem
        5rem
        8rem
        5rem;
}

/* =========================
   FEATURE CARD
========================= */

.feature-card {

    padding: 2rem;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.02);
}

.feature-card h3 {

    font-size: 1.4rem;

    margin-bottom: 1rem;
}

.feature-card p {

    color: var(--text-secondary);

    line-height: 1.8;
}

/* =========================
   GALLERY
========================= */

.gallery-section {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 2rem;

    padding:
        0rem
        5rem
        8rem
        5rem;
}

.gallery-section img {

    width: 100%;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    display: block;
}

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

.project-footer {

    padding:
        4rem
        5rem
        6rem
        5rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.04);
}

.project-footer a {

    color: var(--text-secondary);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.project-footer a:hover {

    color: var(--text-primary);

    transform: translateX(-4px);
}

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

@media (max-width: 1100px) {

    .project-hero {

        grid-template-columns: 1fr;

        padding:
            8rem
            2rem
            4rem
            2rem;
    }

    .content-section,
    .features-section,
    .gallery-section,
    .project-footer {

        padding-left: 2rem;
        padding-right: 2rem;
    }

    .features-section {

        grid-template-columns: 1fr;
    }

    .gallery-section {

        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .navbar {

        padding:
            1.5rem;
    }

    .nav-links {

        gap: 1rem;
    }

    .hero-content h1 {

        font-size:
            clamp(3rem, 12vw, 5rem);
    }
}