/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}


body {

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

    color: #ffffff;

    background:
        radial-gradient(circle at 15% 10%,
            rgba(255, 45, 85, 0.12),
            transparent 30%),

        radial-gradient(circle at 85% 30%,
            rgba(124, 58, 237, 0.15),
            transparent 35%),

        linear-gradient(135deg,
            #030006 0%,
            #0a001a 50%,
            #16002d 100%);

    min-height: 100vh;

    overflow-x: hidden;

}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --red: #ff2d55;

    --red-dark: #d4143d;

    --purple: #7c3aed;

    --purple-light: #a855f7;

    --text: #ffffff;

    --muted: #b8b4c4;

    --border:
        rgba(255, 255, 255, 0.1);

    --card:
        rgba(15, 5, 30, 0.68);

    --transition:
        0.35s ease;

}


/* =========================================================
   SPIDER-VERSE BACKGROUND
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("spiderman-web-overlay.png");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    opacity: 0.18;

    animation:
        spiderVerseMove 25s ease-in-out infinite alternate;

    pointer-events: none;

    z-index: -1;

}


@keyframes spiderVerseMove {

    0% {

        background-position:
            45% 45%;

        transform:
            scale(1);

    }


    50% {

        background-position:
            55% 50%;

        transform:
            scale(1.04);

    }


    100% {

        background-position:
            45% 55%;

        transform:
            scale(1);

    }

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
nav,
button {

    font-family:
        "Bebas Neue",
        sans-serif;

    font-weight: 400;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


h1,
h2 {

    background:
        linear-gradient(90deg,
            #ff2d55,
            #ff4f70,
            #a855f7,
            #7c3aed);

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        gradientText 6s linear infinite;

}


@keyframes gradientText {

    to {

        background-position:
            200% center;

    }

}


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

nav {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0, 0, 0, 0.58);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

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

    z-index: 1000;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;

}


nav.scrolled {

    background:
        rgba(0, 0, 0, 0.88);

    box-shadow:
        0 5px 30px rgba(255, 45, 85, 0.18);

}


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

.logo {

    position: absolute;

    left: 25px;

    display: flex;

    align-items: center;

}


.logo img {

    height: 42px;

    width: auto;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;

}


.logo:hover img {

    transform:
        scale(1.08);

    filter:
        drop-shadow(0 0 10px var(--red));

}


/* =========================================================
   NAV LINKS
========================================================= */

.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-links a {

    position: relative;

    color: #ffffff;

    text-decoration: none;

    font-size: 0.85rem;

    letter-spacing: 1.5px;

    transition:
        color 0.3s ease;

}


.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background:
        linear-gradient(90deg,
            var(--red),
            var(--purple));

    box-shadow:
        0 0 10px rgba(255, 45, 85, 0.6);

    transition:
        width 0.3s ease;

}


.nav-links a:hover {

    color:
        var(--red);

}


.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;

}


.nav-links a.active {

    color:
        var(--red);

}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.scroll-progress {

    position: fixed;

    top: 0;
    left: 0;

    width: 0%;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--red),
            var(--purple-light),
            var(--purple));

    box-shadow:
        0 0 10px rgba(255, 45, 85, 0.7);

    z-index: 10000;

}


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

section {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding:
        110px 25px;

}


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

.hero {

    min-height:
        100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding-top:
        120px;

}


.hero-content {

    max-width:
        850px;

}


.hero-tag,
.section-label {

    display: inline-block;

    color:
        var(--red);

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.9rem;

    letter-spacing:
        4px;

    margin-bottom:
        18px;

}


.hero-tag {

    padding:
        8px 16px;

    border:
        1px solid rgba(255, 45, 85, 0.35);

    border-radius:
        999px;

    background:
        rgba(255, 45, 85, 0.06);

    box-shadow:
        0 0 25px rgba(255, 45, 85, 0.08);

}


.hero h1 {

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

    line-height:
        0.9;

    margin-bottom:
        30px;

    text-shadow:
        0 0 30px rgba(255, 45, 85, 0.25);

}


.hero-subtitle {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        var(--muted);

    line-height:
        1.8;

    font-size:
        1.05rem;

}


.button-group {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top:
        35px;

}


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

.btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 25px;

    color:
        #ffffff;

    background:
        var(--red);

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

    border-radius:
        7px;

    text-decoration:
        none;

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.95rem;

    letter-spacing:
        1.5px;

    overflow:
        hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

}


.btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent);

    transform:
        skewX(-20deg);

    transition:
        left 0.6s ease;

}


.btn:hover::before {

    left: 150%;

}


.btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px rgba(255, 45, 85, 0.3),

        0 0 25px rgba(124, 58, 237, 0.2);

}


.btn-outline {

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

    border-color:
        rgba(255, 255, 255, 0.2);

}


.btn-outline:hover {

    background:
        rgba(124, 58, 237, 0.15);

    border-color:
        var(--purple-light);

}


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

.glass-card {

    background:
        var(--card);

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

    border-radius:
        20px;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),

        0 0 30px rgba(124, 58, 237, 0.06);

}


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

.about-card {

    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap:
        60px;

    align-items:
        center;

    padding:
        60px;

    animation:
        aboutPulse 6s ease-in-out infinite;

}


@keyframes aboutPulse {

    0%,
    100% {

        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.3),

            0 0 25px rgba(255, 45, 85, 0.05);

    }

    50% {

        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.3),

            0 0 40px rgba(124, 58, 237, 0.12);

    }

}


.about-text h2 {

    font-size:
        3.5rem;

    margin-bottom:
        25px;

}


.about-text p {

    color:
        var(--muted);

    line-height:
        1.8;

    margin-bottom:
        18px;

}


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

.skills {

    display: flex;

    flex-wrap: wrap;

    gap:
        10px;

    margin-top:
        30px;

}


.skill {

    padding:
        8px 13px;

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

    border-radius:
        999px;

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

    color:
        #ddd;

    font-size:
        0.8rem;

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

}


.skill:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--red);

    color:
        #ffffff;

}


/* =========================================================
   PROFILE
========================================================= */

.profile-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.profile-ring {

    position: absolute;

    width:
        290px;

    height:
        290px;

    border-radius:
        50%;

    border:
        2px solid rgba(255, 45, 85, 0.35);

    box-shadow:
        0 0 30px rgba(255, 45, 85, 0.15),

        inset 0 0 30px rgba(124, 58, 237, 0.1);

    animation:
        profileRotate 8s linear infinite;

}


@keyframes profileRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


.profile-photo {

    position: relative;

    width:
        250px;

    height:
        250px;

    object-fit:
        cover;

    border-radius:
        50%;

    border:
        4px solid var(--red);

    box-shadow:
        0 0 20px rgba(255, 45, 85, 0.5);

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

}


.profile-photo:hover {

    transform:
        scale(1.05);

    box-shadow:
        0 0 35px rgba(255, 45, 85, 0.7),

        0 0 60px rgba(124, 58, 237, 0.35);

}


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

#projects {

    text-align:
        center;

}


#projects h2 {

    font-size:
        3.5rem;

    margin-bottom:
        15px;

}


.section-description {

    color:
        var(--muted);

    max-width:
        650px;

    margin:
        0 auto;

    line-height:
        1.7;

}


.projects-grid {

    display:
        grid;

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

    gap:
        25px;

    margin-top:
        45px;

}


.project-card {

    overflow:
        hidden;

    padding:
        0;

    text-align:
        left;

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

}


.project-card:hover {

    transform:
        translateY(-10px) scale(1.015);

    border-color:
        rgba(255, 45, 85, 0.4);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.4),

        0 0 35px rgba(255, 45, 85, 0.12);

}


.project-image {

    height:
        190px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(135deg,
            rgba(255, 45, 85, 0.15),
            rgba(124, 58, 237, 0.2));

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

}


.project-image span {

    font-size:
        3.5rem;

    filter:
        drop-shadow(0 0 15px rgba(255, 45, 85, 0.5));

    transition:
        transform 0.4s ease;

}


.project-card:hover .project-image span {

    transform:
        scale(1.15) rotate(-5deg);

}


.project-content {

    padding:
        25px;

}


.project-number {

    color:
        var(--red);

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.8rem;

    letter-spacing:
        2px;

}


.project-content h3 {

    font-size:
        1.5rem;

    margin:
        10px 0;

}


.project-content p {

    color:
        var(--muted);

    font-size:
        0.9rem;

    line-height:
        1.7;

}


.project-links {

    display:
        flex;

    gap:
        18px;

    margin-top:
        20px;

}


.project-links a {

    color:
        #ffffff;

    text-decoration:
        none;

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.85rem;

    letter-spacing:
        1px;

    transition:
        color 0.3s ease;

}


.project-links a:hover {

    color:
        var(--red);

}


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

#contact {

    text-align:
        center;

}


.contact-card {

    padding:
        70px 30px;

}


.contact-card h2 {

    font-size:
        3.5rem;

    margin-bottom:
        20px;

}


.contact-card p {

    max-width:
        600px;

    margin:
        0 auto;

    color:
        var(--muted);

    line-height:
        1.8;

}


.contact-links {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        30px;

}


/* =========================================================
   SPIDER-MAN
========================================================= */

.spiderman {

    position:
        fixed;

    top:
        0;

    right:
        30px;

    width:
        220px;

    z-index:
        20;

    transform-origin:
        top center;

    animation:
        spiderSwing 5s ease-in-out infinite;

    pointer-events:
        none;

}


.spider-web {

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        2px;

    height:
        180px;

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

    transform:
        translateX(-50%);

    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.5),

        0 0 12px rgba(255, 45, 85, 0.25);

}


.spiderman img {

    width:
        100%;

    display:
        block;

}


@keyframes spiderSwing {

    0%,
    100% {

        transform:
            rotate(2deg);

    }

    50% {

        transform:
            rotate(-2deg);

    }

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(50px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.2,
            0.65,
            0.3,
            1);

}


.reveal.active {

    opacity:
        1;

    transform:
        translateY(0);

}


/* Project stagger */

.projects-grid .project-card:nth-child(1) {

    transition-delay:
        0.1s;

}


.projects-grid .project-card:nth-child(2) {

    transition-delay:
        0.2s;

}


.projects-grid .project-card:nth-child(3) {

    transition-delay:
        0.3s;

}


/* =========================================================
   MOUSE GLOW
========================================================= */

.mouse-glow {

    position:
        fixed;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    background:
        radial-gradient(circle,
            rgba(124, 58, 237, 0.1),
            transparent 70%);

    transform:
        translate(-50%, -50%);

    pointer-events:
        none;

    z-index:
        1;

    mix-blend-mode:
        screen;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 45, 85, 0.4);

    border-radius:
        50%;

    background:
        rgba(10, 0, 20, 0.8);

    color:
        #ffffff;

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

    font-size:
        1.2rem;

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(20px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;

    z-index:
        1000;

}


.back-to-top.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.back-to-top:hover {

    box-shadow:
        0 0 20px rgba(255, 45, 85, 0.35);

    border-color:
        var(--red);

}


/* =========================================================
   PAGE LOADER
========================================================= */

.page-loader {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        #050008;

    z-index:
        99999;

    opacity:
        1;

    visibility:
        visible;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;

}


.page-loader.hidden {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

}


.loader-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    animation:
        loaderPulse 1.2s ease-in-out infinite alternate;
}

.loader-logo img {
    width: 50px;
    height: auto;
    object-fit: contain;

    filter:
        drop-shadow(0 0 8px rgba(255, 45, 85, 0.7)) drop-shadow(0 0 20px rgba(124, 58, 237, 0.5));
}

.loader-line {

    width:
        0;

    height:
        2px;

    margin-top:
        15px;

    background:
        linear-gradient(90deg,
            var(--red),
            var(--purple));

    box-shadow:
        0 0 10px var(--red),

        0 0 20px var(--purple);

    animation:
        loaderProgress 1.3s ease forwards;

}


.page-loader p {

    margin-top:
        12px;

    color:
        rgba(255, 255, 255, 0.6);

    font-size:
        0.7rem;

    letter-spacing:
        4px;

}


@keyframes loaderProgress {

    from {
        width:
            0;
    }

    to {
        width:
            180px;
    }

}


@keyframes loaderPulse {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.08);
    }

}


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

footer {

    padding:
        30px 20px;

    text-align:
        center;

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

    color:
        #777;

    font-size:
        0.8rem;

}


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

@media (max-width: 850px) {

    .about-card {

        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            40px 25px;

    }


    .skills {

        justify-content:
            center;

    }


    .projects-grid {

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

    }


    .profile-wrapper {

        margin-top:
            20px;

    }

}


@media (max-width: 600px) {
    /* Experience mobile */

    .experience-timeline::before {
        left: 10px;
    }

    .experience-item {
        padding-left: 40px;
    }

    .experience-dot {
        left: 0;
        width: 20px;
        height: 20px;
    }

    .experience-card {
        padding: 25px 20px;
    }

    .experience-top {
        flex-direction: column;
        gap: 10px;
    }

    .experience-card h3 {
        font-size: 1.6rem;
    }

    .experience-responsibilities {
        grid-template-columns: 1fr;
    }

    nav {

        height:
            60px;

        padding:
            0 15px;

    }


    .logo {

        left:
            15px;

    }


    .logo img {

        height:
            34px;

    }


    .nav-links {

        gap:
            12px;

    }


    .nav-links a {

        font-size:
            0.65rem;

    }


    section {

        padding:
            85px 15px;

    }


    .hero {

        padding-top:
            100px;

    }


    .hero h1 {

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

    }


    .hero-subtitle {

        font-size:
            0.9rem;

    }


    .button-group {

        flex-direction:
            column;

        align-items:
            center;

    }


    .button-group .btn {

        width:
            100%;

        max-width:
            280px;

    }


    .about-text h2,
    #projects h2,
    .contact-card h2 {

        font-size:
            2.8rem;

    }


    .profile-photo {

        width:
            220px;

        height:
            220px;

    }


    .profile-ring {

        width:
            250px;

        height:
            250px;

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .spiderman {

        width:
            110px;

        right:
            -5px;

    }


    .spider-web {

        height:
            120px;

    }


    .contact-card {

        padding:
            50px 20px;

    }

}


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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}

/* =========================================================
   EDUCATION
========================================================= */

#education {
    text-align: center;
}


.education-header {
    margin-bottom: 55px;
}


.education-header h2 {
    font-size: 3.5rem;
    margin-bottom: 15px;
}


/* =========================================================
   EDUCATION TIMELINE
========================================================= */

.education-timeline {

    position: relative;

    max-width: 850px;

    margin: 0 auto;

    text-align: left;

}


/* Vertical timeline */

.education-timeline::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 18px;

    width: 2px;

    background:
        linear-gradient(to bottom,
            var(--red),
            var(--purple),
            transparent);

    box-shadow:
        0 0 10px rgba(255, 45, 85, 0.4);

}


/* =========================================================
   EDUCATION ITEM
========================================================= */

.education-item {

    position: relative;

    padding-left: 65px;

    margin-bottom: 35px;

}


/* Timeline dot */

.education-dot {

    position: absolute;

    left: 8px;

    top: 30px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background:
        var(--red);

    border:
        4px solid #0a001a;

    box-shadow:
        0 0 10px var(--red),

        0 0 25px rgba(255, 45, 85, 0.7);

    z-index: 2;

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

}


.education-item:hover .education-dot {

    transform:
        scale(1.25);

    box-shadow:
        0 0 15px var(--red),

        0 0 35px rgba(124, 58, 237, 0.8);

}


/* =========================================================
   EDUCATION CARD
========================================================= */

.education-card {

    padding: 30px;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.education-card:hover {

    transform:
        translateX(8px);

    border-color:
        rgba(255, 45, 85, 0.4);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),

        0 0 30px rgba(255, 45, 85, 0.1);

}


/* =========================================================
   EDUCATION TEXT
========================================================= */

.education-year {

    display: inline-block;

    margin-bottom: 12px;

    padding: 6px 12px;

    border:
        1px solid rgba(255, 45, 85, 0.3);

    border-radius: 999px;

    background:
        rgba(255, 45, 85, 0.07);

    color:
        var(--red);

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.8rem;

    letter-spacing:
        2px;

}


.education-card h3 {

    font-size:
        1.7rem;

    margin-bottom:
        8px;

}


.education-card h4 {

    color:
        var(--purple-light);

    font-size:
        0.95rem;

    margin-bottom:
        15px;

}


.education-card p {

    color:
        var(--muted);

    line-height:
        1.7;

    font-size:
        0.9rem;

}


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

.education-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        20px;

}


.education-tags span {

    padding:
        6px 10px;

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

    border-radius:
        999px;

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

    color:
        #c9c5d2;

    font-size:
        0.72rem;

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

}


.education-tags span:hover {

    color:
        #ffffff;

    border-color:
        var(--purple-light);

}

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

#experience {
    text-align: center;
}


.experience-header {
    margin-bottom: 55px;
}


.experience-header h2 {
    font-size: 3.5rem;
    margin-bottom: 15px;
}


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

.experience-timeline {

    position: relative;

    max-width: 950px;

    margin: 0 auto;

    text-align: left;

}


.experience-timeline::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 18px;

    width: 2px;

    background:
        linear-gradient(to bottom,
            var(--red),
            var(--purple),
            transparent);

    box-shadow:
        0 0 12px rgba(255, 45, 85, 0.4);

}


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

.experience-item {

    position: relative;

    padding-left: 65px;

}


/* Timeline dot */

.experience-dot {

    position: absolute;

    left: 8px;

    top: 35px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background:
        var(--red);

    border:
        4px solid #0a001a;

    box-shadow:
        0 0 10px var(--red),

        0 0 25px rgba(255, 45, 85, 0.7);

    z-index: 2;

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

}


.experience-item:hover .experience-dot {

    transform:
        scale(1.25);

    box-shadow:
        0 0 15px var(--red),

        0 0 35px rgba(124, 58, 237, 0.8);

}


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

.experience-card {

    padding:
        40px;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.experience-card:hover {

    transform:
        translateX(8px);

    border-color:
        rgba(255, 45, 85, 0.4);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.4),

        0 0 35px rgba(255, 45, 85, 0.12);

}


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

.experience-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        25px;

    margin-bottom:
        25px;

}


.experience-badge {

    display:
        inline-block;

    padding:
        6px 12px;

    margin-bottom:
        12px;

    border:
        1px solid rgba(255, 45, 85, 0.35);

    border-radius:
        999px;

    background:
        rgba(255, 45, 85, 0.08);

    color:
        var(--red);

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.75rem;

    letter-spacing:
        2px;

}


.experience-card h3 {

    font-size:
        2rem;

    margin-bottom:
        7px;

}


.experience-card h4 {

    color:
        var(--purple-light);

    font-size:
        1rem;

    font-weight:
        600;

}


.experience-date {

    flex-shrink:
        0;

    color:
        #aaa;

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.9rem;

    letter-spacing:
        1.5px;

    padding-top:
        5px;

}


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

.experience-description {

    color:
        var(--muted);

    line-height:
        1.8;

    max-width:
        800px;

    margin-bottom:
        30px;

}


/* =========================================================
   RESPONSIBILITIES
========================================================= */

.experience-responsibilities {

    display:
        grid;

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

    gap:
        15px;

}


.experience-point {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    padding:
        16px;

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

    border-radius:
        12px;

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

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

}


.experience-point:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255, 45, 85, 0.25);

    background:
        rgba(255, 45, 85, 0.035);

}


.experience-point span {

    flex-shrink:
        0;

    color:
        var(--red);

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size:
        0.8rem;

    letter-spacing:
        1px;

}


.experience-point p {

    color:
        #bbb;

    font-size:
        0.85rem;

    line-height:
        1.6;

}


/* =========================================================
   TECHNOLOGIES
========================================================= */

.experience-tech {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        30px;

    padding-top:
        25px;

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

}


.experience-tech span {

    padding:
        7px 12px;

    border:
        1px solid rgba(124, 58, 237, 0.25);

    border-radius:
        999px;

    background:
        rgba(124, 58, 237, 0.06);

    color:
        #cfc5e8;

    font-size:
        0.72rem;

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

}


.experience-tech span:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--purple-light);

    color:
        #ffffff;

}

/* =========================================================
   SPIDER-MAN SCROLL WEB
========================================================= */

.spider-scroll {

    position: fixed;

    top: 130px;
    right: 28px;

    width: 45px;

    height: calc(100vh - 170px);

    z-index: 999;

    pointer-events: none;

}


/* =========================================================
   MAIN WEB STRAND
========================================================= */

.spider-web-line {

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.15),
            rgba(255, 45, 85, 0.8),
            rgba(124, 58, 237, 0.7),
            rgba(255, 255, 255, 0.15));

    box-shadow:
        0 0 8px rgba(255, 45, 85, 0.35);

}


/* =========================================================
   WEB THREADS
========================================================= */

.web-thread {

    position: absolute;

    left: 50%;

    width: 32px;

    height: 18px;

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

    transform:
        translateX(-50%);

}


/* Individual web branches */

.thread-1 {
    top: 15%;
}

.thread-2 {
    top: 32%;
}

.thread-3 {
    top: 50%;
}

.thread-4 {
    top: 68%;
}

.thread-5 {
    top: 85%;
}


/* Alternate web direction */

.thread-1,
.thread-3,
.thread-5 {

    border-radius:
        50% 50% 0 0;

}


.thread-2,
.thread-4 {

    width: 25px;

    border-radius:
        0 0 50% 50%;

}


/* =========================================================
   SCROLL MARKER
========================================================= */

.spider-scroll-marker {

    position: absolute;

    top: 0;
    left: 50%;

    width: 18px;
    height: 18px;

    transform:
        translate(-50%, -50%);

    transition:
        top 0.15s linear;

}


/* =========================================================
   GLOWING SPIDER / WEB POINT
========================================================= */

.spider-dot {

    display: block;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        #ff2d55;

    border:
        2px solid #ffffff;

    box-shadow:

        0 0 8px #ff2d55,

        0 0 18px rgba(255, 45, 85, 0.8),

        0 0 30px rgba(255, 45, 85, 0.4);

    animation:
        spiderPulse 1.5s ease-in-out infinite;

}


@keyframes spiderPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.35);

    }

}


/* =========================================================
   LITTLE WEB GLOW
========================================================= */

.spider-scroll::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 20px;
    height: 20px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(255, 45, 85, 0.08);

    filter:
        blur(5px);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .spider-scroll {

        right: 10px;

        width: 30px;

    }

}


@media (max-width: 600px) {

    .spider-scroll {

        display: none;

    }

}