/* ==========================================
   GENERAL SECTION
========================================== */

.section {

    min-height: 100vh;

    padding:
            var(--spacing-xl)
            0;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

}


.section:nth-child(even) {

    background:
            linear-gradient(
                    180deg,
                    var(--color-surface),
                    var(--color-background-light)
            );

}


.section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: 50%;
    right: -250px;

    transform:
            translateY(-50%);

    background:
            radial-gradient(
                    circle,
                    rgba(
                            59,
                            130,
                            246,
                            0.08
                    ),
                    transparent 70%
            );

    filter:
            blur(60px);

    pointer-events: none;

}


/* ==========================================
   SECTION HEADER
========================================== */

.section-header {

    position: relative;

    z-index: 2;

}


.section__label {

    margin-bottom:
            var(--spacing-md);

    color:
            var(--color-accent-light);

    font-size:
            0.8rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.15em;

}


.section__title {

    max-width:
            900px;

    color:
            var(--color-text);

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

    line-height:
            0.95;

    letter-spacing:
            -0.05em;

}


.section__title span {

    display:
            block;

    color:
            var(--color-accent-light);

}


.section__content {

    max-width:
            700px;

    margin-top:
            var(--spacing-lg);

    color:
            var(--color-text-muted);

}


.section__content p {

    font-size:
            1.1rem;

    line-height:
            1.8;

}


/* ==================================================
   ABOUT
================================================== */

.about-section {

    background:
            var(--color-background);

}


.about-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap:
            6rem;

    margin-top:
            6rem;

}


.about-text {

    max-width:
            700px;

}


.about-text p {

    margin-bottom:
            1.5rem;

    color:
            var(--color-text-muted);

    font-size:
            1.1rem;

    line-height:
            1.8;

}


.about-text .about-intro {

    color:
            var(--color-text);

    font-size:
            1.8rem;

    line-height:
            1.4;

}


.about-side {

    display: flex;

    flex-direction:
            column;

    justify-content:
            center;

}


.about-line {

    width:
            60px;

    height:
            2px;

    margin-bottom:
            2rem;

    background:
            var(--color-accent);

    box-shadow:
            0 0 15px
            rgba(
                    59,
                    130,
                    246,
                    0.5
            );

}


.about-side p {

    color:
            var(--color-text-muted);

    font-size:
            1rem;

    line-height:
            2;

}


/* ==================================================
   ABOUT STATS
================================================== */

.about-stats {

    display: grid;

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

    gap:
            2rem;

    margin-top:
            8rem;

    padding-top:
            3rem;

    border-top:
            1px solid
            var(--color-border);

}


.stat {

    display: flex;

    flex-direction:
            column;

    gap:
            0.5rem;

}


.stat__number {

    color:
            var(--color-text);

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

    font-weight:
            700;

    line-height:
            1;

    letter-spacing:
            -0.05em;

}


.stat__label {

    color:
            var(--color-text-muted);

    font-size:
            0.75rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.15em;

}


/* ==================================================
   SKILLS
================================================== */

.skills-section {

    background:
            var(--color-surface);

}


.skills-grid {

    display: grid;

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

    gap:
            1px;

    margin-top:
            6rem;

    background:
            var(--color-border);

    border:
            1px solid
            var(--color-border);

}


.skill {

    position: relative;

    min-height:
            240px;

    padding:
            2rem;

    background:
            var(--color-surface);

    overflow:
            hidden;

    cursor:
            pointer;

    opacity:
            0;

    transform:
            translateY(50px);

    transition:
            opacity 0.7s ease,
            transform 0.7s ease,
            background 0.4s ease;

}


.skill.visible {

    opacity:
            1;

    transform:
            translateY(0);

}


.skill:hover {

    background:
            rgba(
                    37,
                    99,
                    235,
                    0.08
            );

}


.skill__top {

    display: flex;

    align-items:
            center;

    justify-content:
            space-between;

}


.skill__number {

    color:
            var(--color-accent-light);

    font-size:
            0.75rem;

    letter-spacing:
            0.15em;

}


.skill__category {

    color:
            var(--color-text-muted);

    font-size:
            0.7rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.1em;

}


.skill__main {

    display: flex;

    align-items:
            center;

    justify-content:
            space-between;

    margin-top:
            4rem;

}


.skill__name {

    color:
            var(--color-text);

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

    line-height:
            1;

    letter-spacing:
            -0.04em;

    transition:
            color 0.4s ease;

}


.skill:hover
.skill__name {

    color:
            var(--color-accent-light);

}


.skill__arrow {

    color:
            var(--color-accent-light);

    font-size:
            1.8rem;

    transition:
            transform 0.4s ease;

}


.skill:hover
.skill__arrow {

    transform:
            translate(
                    5px,
                    -5px
            );

}


/* ==================================================
   SKILL DETAILS
================================================== */

.skill__details {

    margin-top:
            1.5rem;

    opacity:
            0;

    max-height:
            0;

    overflow:
            hidden;

    transform:
            translateY(10px);

    transition:
            opacity 0.4s ease,
            max-height 0.5s ease,
            transform 0.4s ease;

}


.skill:hover
.skill__details {

    opacity:
            1;

    max-height:
            180px;

    transform:
            translateY(0);

}


.skill__details p {

    margin-bottom:
            0.75rem;

    color:
            var(--color-text-muted);

    font-size:
            0.85rem;

    line-height:
            1.5;

}


.skill__learned {

    display:
            block;

    margin-bottom:
            0.8rem;

    color:
            var(--color-accent-light);

    font-size:
            0.7rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.1em;

}


.skill__technologies {

    display:
            flex;

    flex-wrap:
            wrap;

    gap:
            0.4rem;

}


.skill__technologies span {

    color:
            var(--color-text-muted);

    font-size:
            0.65rem;

}


/* ==================================================
   EXPERIENCE
================================================== */

.section--experience {

    background:
            var(--color-surface);

}


.timeline {

    position:
            relative;

    margin-top:
            7rem;

    padding-left:
            170px;

}


.timeline::before {

    content: "";

    position:
            absolute;

    top:
            0;

    bottom:
            0;

    left:
            135px;

    width:
            1px;

    background:
            var(--color-border);

}


.timeline__item {

    position:
            relative;

    display:
            grid;

    grid-template-columns:
        100px
        1fr;

    gap:
            2rem;

    padding-bottom:
            7rem;

    opacity:
            0;

    transform:
            translateY(50px);

    transition:
            opacity 0.8s ease,
            transform 0.8s ease;

}


.timeline__item:last-child {

    padding-bottom:
            0;

}


.timeline__item.visible {

    opacity:
            1;

    transform:
            translateY(0);

}


.timeline__dot {

    position:
            absolute;

    top:
            5px;

    left:
            -39px;

    width:
            11px;

    height:
            11px;

    border-radius:
            50%;

    background:
            var(--color-accent);

    box-shadow:
            0 0 0 6px
            var(--color-surface),

            0 0 20px
            rgba(
                    59,
                    130,
                    246,
                    0.7
            );

    transition:
            transform 0.4s ease,
            box-shadow 0.4s ease;

}


.timeline__item:hover
.timeline__dot {

    transform:
            scale(1.5);

}


.timeline__year {

    color:
            var(--color-accent-light);

    font-size:
            0.8rem;

    font-weight:
            600;

    letter-spacing:
            0.1em;

}


.timeline__content {

    max-width:
            650px;

}


.timeline__category {

    margin-bottom:
            0.75rem;

    color:
            var(--color-text-muted);

    font-size:
            0.7rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.15em;

}


.timeline__title {

    margin-bottom:
            0.5rem;

    color:
            var(--color-text);

    font-size:
            clamp(
                    2rem,
                    4vw,
                    4rem
            );

    line-height:
            1;

    letter-spacing:
            -0.04em;

    transition:
            color 0.4s ease;

}


.timeline__item:hover
.timeline__title {

    color:
            var(--color-accent-light);

}


.timeline__company {

    margin-bottom:
            1.5rem;

    color:
            var(--color-accent-light);

    font-size:
            0.9rem;

}


.timeline__description {

    max-width:
            600px;

    margin-bottom:
            1.5rem;

    color:
            var(--color-text-muted);

    font-size:
            0.95rem;

    line-height:
            1.7;

}


.timeline__technologies {

    display:
            flex;

    flex-wrap:
            wrap;

    gap:
            0.5rem;

}


.timeline__technologies span {

    padding:
            0.4rem
            0.7rem;

    border:
            1px solid
            var(--color-border);

    border-radius:
            999px;

    color:
            var(--color-text-muted);

    font-size:
            0.65rem;

    transition:
            border-color 0.3s ease,
            color 0.3s ease;

}


.timeline__item:hover
.timeline__technologies span {

    border-color:
            rgba(
                    59,
                    130,
                    246,
                    0.4
            );

    color:
            var(--color-accent-light);

}


/* ==================================================
   PROJECTS
================================================== */

.section--projects {

    background:
            var(--color-background);

}


.projects-list {

    margin-top:
            7rem;

}


.project {

    position:
            relative;

    display:
            grid;

    grid-template-columns:
        100px
        1fr
        45%;

    gap:
            3rem;

    align-items:
            center;

    padding:
            4rem 0;

    border-top:
            1px solid
            var(--color-border);

    opacity:
            0;

    transform:
            translateY(60px);

    transition:
            opacity 0.8s ease,
            transform 0.8s ease;

}


.project.visible {

    opacity:
            1;

    transform:
            translateY(0);

}


.project:last-child {

    border-bottom:
            1px solid
            var(--color-border);

}


.project__number {

    align-self:
            start;

    color:
            var(--color-accent-light);

    font-size:
            0.8rem;

    letter-spacing:
            0.15em;

}


.project__category {

    margin-bottom:
            1rem;

    color:
            var(--color-text-muted);

    font-size:
            0.75rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.15em;

}


.project__title {

    margin-bottom:
            1.5rem;

    color:
            var(--color-text);

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

    line-height:
            0.95;

    letter-spacing:
            -0.05em;

    transition:
            color 0.4s ease;

}


.project:hover
.project__title {

    color:
            var(--color-accent-light);

}


.project__description {

    max-width:
            500px;

    margin-bottom:
            2rem;

    color:
            var(--color-text-muted);

    line-height:
            1.7;

}


.project__technologies {

    display:
            flex;

    flex-wrap:
            wrap;

    gap:
            0.5rem;

    margin-bottom:
            2rem;

}


.project__technologies span {

    padding:
            0.4rem
            0.7rem;

    border:
            1px solid
            var(--color-border);

    border-radius:
            999px;

    color:
            var(--color-text-muted);

    font-size:
            0.7rem;

}


.project__link {

    display:
            inline-flex;

    align-items:
            center;

    gap:
            0.75rem;

    color:
            var(--color-text);

    font-size:
            0.8rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.1em;

    transition:
            color 0.3s ease;

}


.project__link:hover {

    color:
            var(--color-accent-light);

}


.project__link span {

    color:
            var(--color-accent-light);

    font-size:
            1.2rem;

    transition:
            transform 0.3s ease;

}


.project__link:hover
.project__link span {

    transform:
            translate(
                    4px,
                    -4px
            );

}


/* ==================================================
   PROJECT IMAGE
================================================== */

.project__image {

    position:
            relative;

    overflow:
            hidden;

    border-radius:
            var(--border-radius);

    background:
            var(--color-surface);

    line-height:
            0;

}

.project__image img {

    width:
            100%;

    height:
            auto;

    display:
            block;

}


.project__image-placeholder {

    width:
            100%;

    height:
            100%;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    background:
            radial-gradient(
                    circle at center,
                    rgba(
                            59,
                            130,
                            246,
                            0.2
                    ),
                    var(--color-surface)
            );

    color:
            var(--color-accent-light);

    font-size:
            5rem;

    font-weight:
            700;

    opacity:
            0.5;

    transition:
            transform 0.8s ease,
            opacity 0.4s ease;

}


.project:hover
.project__image-placeholder {

    transform:
            scale(1.05);

    opacity:
            0.8;

}


.project__image-overlay {

    position:
            absolute;

    inset:
            0;

    background:
            linear-gradient(
                    135deg,
                    rgba(
                            37,
                            99,
                            235,
                            0.25
                    ),
                    transparent 60%
            );

    opacity:
            0.5;

}


/* ==================================================
   ERRORS
================================================== */

.projects-error,
.skills-error,
.timeline-error {

    padding:
            2rem;

    color:
            var(--color-text-muted);

}


/* ==================================================
   CONTACT
================================================== */

.section--contact {

    min-height:
            80vh;

    text-align:
            center;

}


.section--contact
.section__content {

    margin-left:
            auto;

    margin-right:
            auto;

}


.section--contact .button {

    margin-top:
            2rem;

}
/* ==================================================
   CONTACT SECTION
================================================== */

.contact-section {

    padding-bottom:
            12rem;

}


.contact-section__header {

    max-width:
            1000px;

}


.contact-section__title {

    margin-bottom:
            2rem;

    font-size:
            clamp(
                    4rem,
                    10vw,
                    9rem
            );

    line-height:
            0.85;

    letter-spacing:
            -0.06em;

}


.contact-section__title span {

    display:
            block;

    color:
            var(--color-accent-light);

}


.contact-section__description {

    max-width:
            600px;

    color:
            var(--color-text-muted);

    font-size:
            1rem;

    line-height:
            1.8;

}


.contact-section__content {

    margin-top:
            6rem;

}


.contact-section__email {

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            2rem;

    padding:
            2rem 0;

    border-top:
            1px solid
            var(--color-border);

    border-bottom:
            1px solid
            var(--color-border);

    color:
            var(--color-text);

    font-size:
            clamp(
                    1.2rem,
                    3vw,
                    2.5rem
            );

    transition:
            color 0.3s ease;

}


.contact-section__email:hover {

    color:
            var(--color-accent-light);

}


.contact-section__arrow {

    font-size:
            2rem;

    transition:
            transform 0.3s ease;

}


.contact-section__email:hover
.contact-section__arrow {

    transform:
            translate(5px, -5px);

}


.contact-section__links {

    display:
            flex;

    flex-wrap:
            wrap;

    gap:
            1rem;

    margin-top:
            2rem;

}


.contact-section__links a {

    padding:
            0.8rem 1.2rem;

    border:
            1px solid
            var(--color-border);

    border-radius:
            999px;

    color:
            var(--color-text-muted);

    font-size:
            0.7rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.08em;

    transition:
            color 0.3s ease,
            border-color 0.3s ease,
            transform 0.3s ease;

}


.contact-section__links a:hover {

    border-color:
            var(--color-accent);

    color:
            var(--color-accent-light);

    transform:
            translateY(-3px);

}


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

@media (max-width: 600px) {

    .contact-section {

        padding-bottom:
                7rem;

    }


    .contact-section__title {

        font-size:
                clamp(
                        3.2rem,
                        15vw,
                        5rem
                );

    }


    .contact-section__content {

        margin-top:
                4rem;

    }


    .contact-section__email {

        align-items:
                flex-start;

        font-size:
                1rem;

    }


    .contact-section__links {

        flex-direction:
                column;

    }


    .contact-section__links a {

        text-align:
                center;

    }

}