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


html,
body,
a,
button,
.project-card,
.skill-item {
    cursor: none;
}


html {
    scroll-behavior: smooth;
}


body {
    background: #0a0a0a;
    color: #f4f4f4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


body.modal-open {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
}


.cursor {
    position: fixed;

    left: 0;
    top: 0;

    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    pointer-events: none;

    z-index: 10000;

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

    transition:
        width 0.25s ease,
        height 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;

    mix-blend-mode:
        difference;
}


.cursor-dot {
    position: fixed;

    left: 0;
    top: 0;

    width: 6px;
    height: 6px;

    background: white;

    border-radius: 50%;

    pointer-events: none;

    z-index: 10001;

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

    mix-blend-mode:
        difference;
}


.cursor.active {
    width: 58px;
    height: 58px;

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

    border-color: white;
}


.page-loader {
    position: fixed;

    inset: 0;

    display: flex;

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

    background: #0a0a0a;

    z-index: 9999;

    transition:
        transform
        1.1s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        );
}


.page-loader.loaded {
    transform:
        translateY(-100%);
}


.loader-text {
    font-size:
        clamp(
            60px,
            12vw,
            160px
        );

    font-weight: 900;

    letter-spacing: -0.08em;

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


.loader-text span {
    color: #555;
}


@keyframes loaderPulse {

    from {
        opacity: 0.4;

        transform:
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }

}


.navbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding: 28px 4vw;

    display: flex;

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

    z-index: 100;

    transition:
        background 0.5s ease,
        backdrop-filter 0.5s ease,
        padding 0.5s ease;
}


.navbar-scrolled {
    position: fixed;

    padding:
        20px 4vw;

    background:
        rgba(
            10,
            10,
            10,
            0.72
        );

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid #1e1e1e;
}


.nav-logo {
    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;
}


.nav-logo span {
    color: #666;
}


.nav-right {
    display: flex;

    gap: 25px;
}


.nav-right a {
    color: #888;

    font-size: 10px;

    letter-spacing: 1.5px;

    transition:
        color 0.3s ease;
}


.nav-right a:hover {
    color: white;
}


.hero {
    min-height: 100vh;

    padding:
        130px
        4vw
        50px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;
}


.hero-top {
    display: flex;

    align-items: center;

    justify-content:
        space-between;
}


.hero-tag {
    color: #777;

    font-size: 10px;

    letter-spacing: 2px;
}


.availability {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #777;

    font-size: 10px;

    letter-spacing: 1px;
}


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: white;

    animation:
        pulse
        2s
        infinite;
}


@keyframes pulse {

    0% {
        box-shadow:
            0
            0
            0
            0
            rgba(
                255,
                255,
                255,
                0.45
            );
    }

    70% {
        box-shadow:
            0
            0
            0
            9px
            rgba(
                255,
                255,
                255,
                0
            );
    }

    100% {
        box-shadow:
            0
            0
            0
            0
            rgba(
                255,
                255,
                255,
                0
            );
    }

}


.hero-content {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4vw;

    margin: 50px 0;
}


.profile-wrapper {
    width:
        clamp(
            100px,
            13vw,
            180px
        );

    aspect-ratio: 1;

    overflow: hidden;

    border-radius: 50%;

    border:
        1px solid #333;

    transition:
        transform
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.profile-wrapper:hover {
    transform:
        scale(1.06)
        rotate(3deg);
}


.profile-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.profile-wrapper:hover
.profile-image {
    transform:
        scale(1.08);
}


.hero-title {
    display: flex;

    flex-direction: column;

    align-items:
        flex-start;
}


.hero-title h1 {
    font-size:
        clamp(
            80px,
            15vw,
            240px
        );

    font-weight: 900;

    line-height: 0.75;

    letter-spacing: -0.08em;
}


.outlined-text {
    color: transparent;

    -webkit-text-stroke:
        1px #f4f4f4;
}


.hero-bottom {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;
}


.hero-description {
    max-width: 360px;

    color: #888;

    font-size: 14px;

    line-height: 1.7;
}


.scroll-button {
    display: flex;

    flex-direction: column;

    align-items:
        flex-end;

    gap: 10px;

    color: #777;

    font-size: 10px;

    letter-spacing: 1px;
}


.arrow {
    color: white;

    font-size: 25px;

    transition:
        transform
        0.5s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.scroll-button:hover
.arrow {
    transform:
        translateY(9px);
}


.banner-section {
    padding: 0 4vw;
}


.banner-wrapper {
    position: relative;

    height: 70vh;

    min-height: 400px;

    overflow: hidden;

    border:
        1px solid #222;
}


.banner-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(0.55);

    transition:
        transform
        1.5s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.banner-wrapper:hover
.banner-image {
    transform:
        scale(1.06);
}


.banner-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content:
        flex-end;

    padding: 4vw;
}


.banner-overlay p {
    margin-bottom: 15px;

    color: #aaa;

    font-size: 10px;

    letter-spacing: 2px;
}


.banner-overlay h2 {
    font-size:
        clamp(
            40px,
            7vw,
            100px
        );

    line-height: 0.9;

    letter-spacing: -0.05em;
}


.section-number {
    color: #666;

    font-size: 11px;
}


.section-label {
    margin-bottom: 25px;

    color: #777;

    font-size: 10px;

    letter-spacing: 2px;
}


.about-section {
    padding: 150px 4vw;

    display: grid;

    grid-template-columns:
        120px
        1fr;

    gap: 40px;
}


.about-content h2 {
    max-width: 1000px;

    font-size:
        clamp(
            50px,
            8vw,
            130px
        );

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.about-content h2 span {
    color: #555;
}


.about-description {
    max-width: 600px;

    margin-top: 40px;

    color: #888;

    font-size: 15px;

    line-height: 1.8;
}


.skills-section {
    padding: 120px 4vw;
}


.skills-header {
    margin-bottom: 60px;
}


.skills-header h2 {
    font-size:
        clamp(
            55px,
            10vw,
            150px
        );

    letter-spacing: -0.07em;
}


.skills-list {
    border-top:
        1px solid #222;
}


.skill-item {
    display: grid;

    grid-template-columns:
        50px
        1fr
        auto;

    align-items: center;

    gap: 20px;

    padding: 35px 0;

    border-bottom:
        1px solid #222;

    transition:
        padding
        0.5s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        background
        0.4s
        ease;
}


.skill-item:hover {
    padding-left: 20px;

    background:
        #0d0d0d;
}


.skill-number {
    color: #666;

    font-size: 10px;
}


.skill-item h3 {
    font-size:
        clamp(
            25px,
            4vw,
            65px
        );

    letter-spacing: -0.04em;
}


.skill-arrow {
    color: #555;

    font-size: 28px;

    transition:
        transform
        0.5s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        color
        0.35s
        ease;
}


.skill-item:hover
.skill-arrow {
    transform:
        translate(
            8px,
            -8px
        );

    color: white;
}


.projects-section {
    padding: 120px 4vw;
}


.projects-header {
    margin-bottom: 60px;
}


.projects-header h2 {
    font-size:
        clamp(
            60px,
            10vw,
            160px
        );

    letter-spacing: -0.07em;
}


.projects-grid {
    display: grid;

    grid-template-columns:
        minmax(
            280px,
            700px
        );
}


.project-card {
    padding-top: 15px;

    border-top:
        1px solid #333;
}


.project-number {
    margin-bottom: 15px;

    color: #666;

    font-size: 10px;
}


.project-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #111;

    border:
        1px solid #222;
}


.project-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.project-hover {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content:
        center;

    gap: 12px;

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

    opacity: 0;

    font-size: 11px;

    letter-spacing: 2px;

    transition:
        opacity
        0.45s
        ease;
}


.project-card:hover
.project-image img {
    transform:
        scale(1.09);
}


.project-card:hover
.project-hover {
    opacity: 1;
}


.project-info {
    padding-top: 20px;
}


.project-info h3 {
    font-size: 25px;

    letter-spacing: -0.03em;
}


.contact-section {
    padding: 160px 4vw;
}


.contact-intro {
    margin-bottom: 100px;
}


.contact-section h2 {
    display: flex;

    flex-direction: column;

    font-size:
        clamp(
            70px,
            13vw,
            200px
        );

    line-height: 0.8;

    letter-spacing: -0.08em;
}


.contact-section h2 span {
    color: transparent;

    -webkit-text-stroke:
        1px #f4f4f4;
}


.contact-links {
    border-top:
        1px solid #222;
}


.contact-link {
    width: 100%;

    padding: 35px 0;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    background: transparent;

    color: inherit;

    border:
        none;

    border-bottom:
        1px solid #222;

    text-align: left;

    cursor: none;

    font-family: inherit;

    transition:
        padding
        0.5s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        background
        0.4s
        ease;
}


.contact-link:hover {
    padding-left: 20px;

    background: #0e0e0e;
}


.contact-number {
    display: block;

    margin-bottom: 10px;

    color: #666;

    font-size: 10px;
}


.contact-link h3 {
    font-size:
        clamp(
            25px,
            4vw,
            60px
        );

    letter-spacing: -0.04em;
}


.contact-handle {
    display: flex;

    align-items: center;

    gap: 15px;

    color: #888;

    font-size: 12px;
}


.contact-handle span {
    color: white;
}


footer {
    display: flex;

    justify-content:
        space-between;

    padding: 30px 4vw;

    border-top:
        1px solid #222;

    color: #666;

    font-size: 10px;

    letter-spacing: 1px;
}


.portfolio-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content:
        center;

    padding: 40px;

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

    opacity: 0;

    visibility: hidden;

    transition:
        opacity
        0.5s
        ease,
        visibility
        0.5s
        ease;
}


.portfolio-modal.active {
    opacity: 1;

    visibility: visible;
}


.modal-content {
    width: 100%;

    max-width: 1400px;

    opacity: 0;

    transform:
        scale(0.94)
        translateY(25px);

    transition:
        transform
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        opacity
        0.45s
        ease;
}


.portfolio-modal.active
.modal-content {
    opacity: 1;

    transform:
        scale(1)
        translateY(0);
}


.modal-top {
    display: flex;

    justify-content:
        space-between;

    margin-bottom: 20px;

    color: #777;

    font-size: 10px;

    letter-spacing: 2px;
}


.modal-content img {
    width: 100%;

    max-height: 80vh;

    object-fit: contain;
}


.modal-close {
    position: absolute;

    top: 25px;
    right: 35px;

    background: none;

    color: white;

    border: none;

    font-size: 45px;

    font-weight: 200;

    cursor: none;

    transition:
        transform
        0.4s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.modal-close:hover {
    transform:
        rotate(90deg)
        scale(1.1);
}


.reveal {
    opacity: 0;

    transform:
        translateY(55px)
        scale(0.98);

    transition:
        opacity
        1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        transform
        1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change:
        opacity,
        transform;
}


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.music-button {
    position: fixed;

    bottom: 28px;
    right: 4vw;

    z-index: 500;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    background:
        rgba(
            15,
            15,
            15,
            0.8
        );

    color: #ffffff;

    border:
        1px solid #333;

    backdrop-filter:
        blur(15px);

    font-family: inherit;

    font-size: 10px;

    letter-spacing: 1.5px;

    cursor: none;

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


.music-button:hover {
    background: #ffffff;

    color: #000000;

    border-color: #ffffff;
}


.music-icon {
    font-size: 16px;

    line-height: 1;
}


.music-button.playing
.music-icon {
    animation:
        musicPulse
        1s
        ease-in-out
        infinite
        alternate;
}


@keyframes musicPulse {

    from {
        transform:
            translateY(0)
            scale(1);
    }

    to {
        transform:
            translateY(-2px)
            scale(1.15);
    }

}


@media (hover: none) {

    html,
    body,
    a,
    button,
    .project-card,
    .skill-item,
    .contact-link,
    .modal-close {
        cursor: auto;
    }


    .cursor,
    .cursor-dot {
        display: none;
    }

}


@media (max-width: 800px) {

    .hero {
        min-height: 90vh;
    }


    .hero-top {
        flex-direction: column;

        align-items:
            flex-start;

        gap: 15px;
    }


    .hero-content {
        flex-direction: column;

        align-items:
            flex-start;

        gap: 40px;
    }


    .hero-title h1 {
        font-size:
            clamp(
                80px,
                23vw,
                150px
            );
    }


    .hero-bottom {
        flex-direction: column;

        align-items:
            flex-start;

        gap: 40px;
    }


    .scroll-button {
        align-items:
            flex-start;
    }


    .banner-wrapper {
        height: 50vh;
    }


    .about-section {
        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .skill-item {
        grid-template-columns:
            30px
            1fr
            auto;
    }


    .contact-link {
        align-items:
            flex-start;

        gap: 25px;
    }


    .contact-handle {
        flex-direction:
            column;

        align-items:
            flex-end;
    }


    .portfolio-modal {
        padding: 20px;
    }


    .modal-close {
        top: 10px;
        right: 20px;

        font-size: 38px;
    }


    .music-button {
        bottom: 20px;
        right: 20px;
    }


    footer {
        flex-direction:
            column;

        gap: 15px;
    }

}