/* =========================
   BASE
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #ffffff;

    background:
        radial-gradient(
            circle at top,
            #202020,
            #0b0b0b 55%
        );
}


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

.page {
    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        28px auto;

    overflow: hidden;

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

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

    border-radius:
        24px;

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 100px
        rgba(
            0,
            0,
            0,
            0.45
        );
}


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

.navbar {
    height: 72px;

    display: flex;

    align-items: center;

    gap: 50px;

    padding:
        0 32px;

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


.navbar-logo {
    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        800;

    text-decoration:
        none;
}


.navbar-links {
    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}


.navbar-links a {
    position:
        relative;

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

    font-size:
        14px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .2s;
}


.navbar-links a:hover {
    color:
        #ffffff;
}


.navbar-links a.active {
    color:
        #ffffff;
}


.navbar-links a.active::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -25px;

    height:
        2px;

    border-radius:
        10px;

    background:
        #ffffff;
}


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

.profile {
    position:
        relative;

    min-height:
        565px;

    display:
        grid;

    grid-template-columns:
        300px 1fr;

    align-items:
        center;

    gap:
        70px;

    padding:
        65px;
}


/* =========================
   AVATAR
========================= */

.avatar-wrapper {
    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    padding:
        5px;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.25
            ),
            rgba(
                255,
                255,
                255,
                0.025
            )
        );

    box-shadow:
        0 20px 55px
        rgba(
            0,
            0,
            0,
            0.38
        );
}


.avatar {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #505050,
            #242424
        );
}


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

.profile-info {
    max-width:
        650px;
}


.profile-info h1 {
    margin:
        0;

    font-size:
        clamp(
            70px,
            8vw,
            110px
        );

    line-height:
        0.92;

    letter-spacing:
        -6px;

    font-weight:
        850;
}


.profile-subtitle {
    margin-top:
        24px;

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

    font-size:
        17px;

    font-weight:
        650;
}


/* =========================
   SOCIAL LINKS
========================= */

.social-links {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        20px;
}


.social-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 13px;

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

    font-size:
        12px;

    font-weight:
        600;

    text-decoration:
        none;

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

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

    border-radius:
        999px;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.social-link:hover {
    color:
        #ffffff;

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

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

    transform:
        translateY(-2px);
}


.social-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        16px;

    height:
        16px;

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

    font-size:
        10px;

    font-weight:
        800;

    transition:
        color .2s;
}


.social-link:hover
.social-icon {
    color:
        #ffffff;
}


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

.profile-description {
    margin-top:
        30px;

    max-width:
        640px;

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

    font-size:
        clamp(
            18px,
            2vw,
            24px
        );

    line-height:
        1.6;
}


/* =========================
   EASTER EGG
========================= */

.easter-egg {
    position:
        absolute;

    right:
        42px;

    top:
        185px;

    z-index:
        100;
}


.easter-dot {
    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        none;

    outline:
        none;

    border-radius:
        50%;

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

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

    font-size:
        22px;

    line-height:
        1;

    cursor:
        pointer;

    opacity:
        0.35;

    transition:
        opacity .2s,
        transform .2s,
        background .2s,
        color .2s;
}


.easter-dot:hover {
    opacity:
        1;

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

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

    transform:
        scale(1.15);
}


.thought-bubble {
    position:
        absolute;

    right:
        0;

    top:
        45px;

    width:
        290px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        16px 18px;

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

    font-size:
        14px;

    line-height:
        1.5;

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

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

    border-radius:
        18px;

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            0.45
        );

    backdrop-filter:
        blur(18px);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-6px)
        scale(0.96);

    transform-origin:
        top right;

    pointer-events:
        none;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


.thought-bubble::before {
    content:
        "";

    position:
        absolute;

    top:
        -7px;

    right:
        10px;

    width:
        13px;

    height:
        13px;

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

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

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

    transform:
        rotate(45deg);
}


.thought-icon {
    flex-shrink:
        0;
}


.easter-egg:hover
.thought-bubble,

.easter-egg.open
.thought-bubble {
    opacity:
        1;

    visibility:
        visible;

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


/* =========================
   PODIUM SECTION
========================= */

.podium-section {
    padding:
        50px 55px 65px;

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


.section-header {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        20px;

    margin-bottom:
        50px;
}


.section-small {
    margin-bottom:
        6px;

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

    font-size:
        13px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;
}


.section-header h2 {
    margin:
        0;

    font-size:
        38px;

    letter-spacing:
        -1.5px;
}


.all-projects-button {
    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

    text-decoration:
        none;

    transition:
        color .2s,
        transform .2s;
}


.all-projects-button:hover {
    color:
        #ffffff;

    transform:
        translateX(4px);
}


/* =========================
   PODIUM
========================= */

.podium {
    display:
        grid;

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

    align-items:
        end;

    gap:
        22px;

    max-width:
        1000px;

    margin:
        0 auto;
}


/* =========================
   PODIUM ITEM
========================= */

.podium-item {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    transition:
        transform .25s ease;
}


.podium-item:hover {
    transform:
        translateY(-5px);
}


.podium-item.place-1 {
    transform:
        translateY(-38px);
}


.podium-item.place-1:hover {
    transform:
        translateY(-46px);
}


/* =========================
   MEDAL
========================= */

.podium-medal {
    position:
        absolute;

    top:
        -18px;

    left:
        50%;

    transform:
        translateX(-50%);

    z-index:
        5;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        #151515;

    font-size:
        20px;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            0,
            0,
            0.35
        );
}


/* =========================
   PODIUM PROJECT
========================= */

.podium-project {
    display:
        block;

    overflow:
        hidden;

    color:
        #ffffff;

    text-decoration:
        none;

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

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

    border-radius:
        22px 22px 0 0;

    transition:
        border-color .25s,
        background .25s;
}


.podium-project:hover {
    border-color:
        rgba(
            255,
            255,
            255,
            0.17
        );

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


/* =========================
   PODIUM BANNER
========================= */

.podium-banner {
    width:
        100%;

    aspect-ratio:
        2.6 / 1;

    overflow:
        hidden;

    background:
        #111111;
}


.podium-banner img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .3s ease;
}


.podium-project:hover
.podium-banner img {
    transform:
        scale(1.03);
}


/* =========================
   PODIUM BODY
========================= */

.podium-project-body {
    position:
        relative;

    min-height:
        145px;

    padding:
        18px 18px 20px 94px;
}


.podium-icon {
    position:
        absolute;

    left:
        16px;

    top:
        -34px;

    width:
        68px;

    height:
        68px;

    object-fit:
        cover;

    border-radius:
        50%;

    background:
        #151515;

    border:
        5px solid
        #171717;
}


.podium-project-name {
    font-size:
        21px;

    font-weight:
        750;

    line-height:
        1.15;
}


.podium-project-description {
    margin-top:
        8px;

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

    font-size:
        12px;

    line-height:
        1.45;
}


.podium-project-arrow {
    margin-top:
        14px;

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

    font-size:
        14px;
}


/* =========================
   PODIUM BASE
========================= */

.podium-base {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        850;

    letter-spacing:
        -2px;

    background:
        linear-gradient(
            to bottom,
            rgba(
                255,
                255,
                255,
                0.055
            ),
            rgba(
                255,
                255,
                255,
                0.025
            )
        );

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

    border-top:
        none;

    border-radius:
        0 0 20px 20px;
}


.place-1
.podium-base {
    height:
        120px;

    font-size:
        58px;
}


.place-2
.podium-base {
    height:
        85px;

    font-size:
        44px;
}


.place-3
.podium-base {
    height:
        65px;

    font-size:
        38px;
}


/* =========================
   CAPTION
========================= */

.podium-caption {
    margin-top:
        50px;

    text-align:
        center;
}


.podium-caption-main {
    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size:
        18px;

    font-weight:
        600;
}


.podium-caption-small {
    margin-top:
        8px;

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

    font-size:
        12px;
}


/* =========================
   TABLET
========================= */

@media
(max-width: 950px) {

    .profile {
        grid-template-columns:
            240px 1fr;

        gap:
            45px;

        padding:
            55px 45px;
    }


    .avatar-wrapper {
        width:
            240px;

        height:
            240px;
    }


    .podium {
        gap:
            14px;
    }


    .podium-project-body {
        padding:
            52px 16px 18px;
    }


    .podium-icon {
        left:
            16px;

        top:
            -32px;
    }

}


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

@media
(max-width: 750px) {

    .page {
        width:
            calc(
                100% - 20px
            );

        margin:
            10px auto;

        border-radius:
            18px;
    }


    .navbar {
        padding:
            0 20px;

        gap:
            30px;

        overflow-x:
            auto;
    }


    .profile {
        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            55px 25px 95px;

        gap:
            35px;
    }


    .avatar-wrapper {
        width:
            210px;

        height:
            210px;

        margin:
            auto;
    }


    .profile-info {
        margin:
            auto;
    }


    .profile-info h1 {
        letter-spacing:
            -3px;
    }


    .social-links {
        justify-content:
            center;
    }


    .profile-description {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .easter-egg {
        top:
            auto;

        right:
            20px;

        bottom:
            18px;
    }


    .podium-section {
        padding:
            42px 22px 55px;
    }


    .section-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .podium {
        grid-template-columns:
            1fr;

        gap:
            24px;

        max-width:
            390px;
    }


    .podium-item.place-1 {
        order:
            1;

        transform:
            none;
    }


    .podium-item.place-2 {
        order:
            2;
    }


    .podium-item.place-3 {
        order:
            3;
    }


    .podium-item.place-1:hover,
    .podium-item:hover {
        transform:
            translateY(-4px);
    }


    .podium-base {
        height:
            65px !important;

        font-size:
            34px !important;
    }

}


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

@media
(max-width: 520px) {

    .navbar-logo {
        display:
            none;
    }


    .navbar {
        justify-content:
            center;
    }


    .navbar-links {
        gap:
            22px;
    }


    .social-link {
        padding:
            8px 11px;

        font-size:
            11px;
    }

}