:root {
    --white: #ffffff;
    --muted: rgba(255, 255, 255, 0.72);
    --soft: rgba(255, 255, 255, 0.50);

    --purple: #a855f7;
    --light-purple: #d8b4fe;
    --pink: #ec4899;
    --green: #22c55e;
    --blue: #1d9bf0;
    --discord: #5865f2;
}


/* Reset */

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


html {
    color-scheme: dark;
}


body {
    min-height: 100vh;
    overflow: hidden;

    color: var(--white);

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

    background: #050509;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* Background Video */

.background-video {
    position: fixed;

    inset: -10px;

    z-index: -5;

    width: calc(100% + 20px);
    height: calc(100% + 20px);

    object-fit: cover;

    filter:
        brightness(0.34) saturate(1.08) contrast(1.05);

    transform: scale(1.055);

    animation:
        softTrainShake 1.5s ease-in-out infinite alternate;

    will-change: transform;
}


/* Background Overlay */

.background-overlay {
    position: fixed;

    inset: 0;

    z-index: -4;

    background:
        radial-gradient(circle at center,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.34) 54%,
            rgba(0, 0, 0, 0.83) 100%),
        linear-gradient(180deg,
            rgba(8, 2, 15, 0.14),
            rgba(0, 0, 0, 0.64));

    backdrop-filter:
        blur(1.5px);
}


/* Background Glow */

.background-glow {
    position: fixed;

    z-index: -3;

    border-radius: 50%;

    filter: blur(130px);

    opacity: 0.20;

    pointer-events: none;
}


.glow-one {
    top: 8%;
    left: 10%;

    width: 300px;
    height: 300px;

    background: var(--purple);

    animation:
        glowOne 9s ease-in-out infinite alternate;
}


.glow-two {
    right: 8%;
    bottom: 4%;

    width: 350px;
    height: 350px;

    background: var(--pink);

    animation:
        glowTwo 10s ease-in-out infinite alternate;
}


/* Main Content */

.main-content {
    min-height: 100vh;

    display: grid;

    place-items: center;
    align-content: center;

    gap: 16px;

    padding: 20px;

    animation:
        pageStart 0.8s ease both;
}


/* Sound Button */

.sound-button {
    position: fixed;

    top: 18px;
    left: 18px;

    z-index: 20;

    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

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

    border-radius: 15px;

    color: white;

    font-size: 1.05rem;

    cursor: pointer;

    background:
        rgba(9, 9, 16, 0.43);

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.28),

        inset 0 1px 0 rgba(255, 255, 255, 0.05);

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


.sound-button:hover {
    transform:
        translateY(-2px) scale(1.03);

    background:
        rgba(25, 15, 40, 0.66);

    border-color:
        rgba(168, 85, 247, 0.38);
}


/* Main Profile */

.profile-wrapper {
    width:
        min(92vw, 650px);

    padding:
        6px 15px;

    text-align: center;

    animation:
        compactMovement 5.5s ease-in-out infinite;
}


/* Profile Image */

.profile-image-wrap {
    position: relative;

    width: 92px;
    height: 92px;

    margin:
        0 auto 14px;

    padding: 3px;

    border-radius: 50%;

    cursor: pointer;

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

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.38),

        0 0 18px rgba(168, 85, 247, 0.12);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.profile-image-wrap:hover {
    transform:
        translateY(-4px) scale(1.07);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.45),

        0 0 22px rgba(168, 85, 247, 0.78),

        0 0 45px rgba(236, 72, 153, 0.30);
}


.profile-image {
    display: block;

    width: 100%;
    height: 100%;

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

    border-radius: 50%;

    object-fit: cover;
}


.profile-status {
    position: absolute;

    right: 3px;
    bottom: 6px;

    width: 15px;
    height: 15px;

    border:
        3px solid rgba(10, 9, 16, 0.96);

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 13px rgba(34, 197, 94, 0.72);
}


/* Creator Badge */

.creator-badge {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 14px;

    padding:
        6px 12px;

    border:
        1px solid rgba(168, 85, 247, 0.29);

    border-radius: 999px;

    color:
        #dec4ff;

    background:
        rgba(126, 34, 206, 0.11);

    font-size: 0.60rem;
    font-weight: 700;

    letter-spacing: 0.15em;
}


.badge-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #c084fc;

    box-shadow:
        0 0 9px #c084fc;
}


/* Name */

.name-button {
    display: flex;

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

    gap: 9px;

    width: max-content;
    max-width: 100%;

    margin:
        0 auto 12px;

    padding:
        3px 6px;

    border: none;

    color: white;

    cursor: pointer;

    background:
        transparent;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


.name-button:hover {
    transform:
        translateY(-2px) scale(1.015);

    filter:
        drop-shadow(0 0 12px rgba(168, 85, 247, 0.28));
}


.profile-name {
    color: white;

    font-family:
        "Russo One",
        sans-serif;

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

    font-weight: 400;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;

    text-shadow:
        0 5px 16px rgba(0, 0, 0, 0.72);
}


.verified-badge {
    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(145deg,
            #2ca7f6,
            #147ed1);

    box-shadow:
        0 0 12px rgba(29, 155, 240, 0.45);
}


.verified-badge svg {
    width: 17px;
    height: 17px;

    fill:
        currentColor;
}


/* Text */

.tagline {
    margin-bottom: 8px;

    color:
        var(--muted);

    font-size:
        0.86rem;

    font-weight:
        500;
}


.tagline span {
    margin:
        0 6px;

    color:
        #c084fc;
}


.location {
    display: flex;

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

    gap: 6px;

    margin-bottom: 20px;

    color:
        var(--soft);

    font-size:
        0.78rem;
}


.location svg {
    width: 13px;

    fill:
        currentColor;
}


/* Social Buttons */

.social-links {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-bottom: 22px;
}


.social-button {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

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

    border-radius: 15px;

    color: white;

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

    backdrop-filter:
        blur(13px);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.23);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.social-button svg {
    width: 22px;
    height: 22px;

    fill:
        currentColor;
}


.social-button:hover {
    transform:
        translateY(-3px) scale(1.04);
}


.youtube:hover {
    background:
        #ff0000;
}


.instagram:hover {
    background:
        linear-gradient(135deg,
            #833ab4,
            #fd1d1d,
            #fcb045);
}


.discord:hover {
    background:
        var(--discord);
}


/* Info */

.info-row {
    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


.info-pill {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 140px;

    padding:
        11px 15px;

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

    border-radius: 15px;

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

    backdrop-filter:
        blur(13px);

    text-align: left;
}


.pill-icon {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 10px;

    color:
        var(--light-purple);

    background:
        rgba(168, 85, 247, 0.13);
}


.info-pill strong {
    display: block;

    font-size:
        0.78rem;
}


.info-pill small {
    display: block;

    margin-top: 2px;

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

    font-size:
        0.53rem;

    letter-spacing:
        0.13em;
}


.live-pulse {
    position: relative;

    width: 10px;
    height: 10px;

    margin:
        0 12px 0 8px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 14px rgba(34, 197, 94, 0.74);
}


.live-pulse::after {
    content: "";

    position: absolute;

    inset: -6px;

    border:
        1px solid rgba(34, 197, 94, 0.53);

    border-radius: 50%;

    animation:
        statusPulse 1.8s ease-out infinite;
}


/* Footer */

.footer-text {
    color:
        rgba(255, 255, 255, 0.25);

    font-size:
        0.60rem;

    letter-spacing:
        0.16em;
}


/* Professional About Modal */

.about-modal {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: grid;

    place-items: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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


.about-modal.open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.about-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(2, 1, 8, 0.78);

    backdrop-filter:
        blur(12px);
}


.about-card {
    position: relative;

    z-index: 2;

    width:
        min(94vw, 560px);

    max-height:
        91vh;

    padding:
        28px;

    overflow-y: auto;
    overflow-x: hidden;

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

    border-radius:
        28px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.018)),
        rgba(12, 9, 21, 0.94);

    backdrop-filter:
        blur(26px);

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.65),

        0 0 60px rgba(126, 34, 206, 0.18),

        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    transform:
        translateY(20px) scale(0.96);

    transition:
        transform 0.35s ease;
}


.about-modal.open .about-card {
    transform:
        translateY(0) scale(1);
}


.modal-glow {
    position: absolute;

    top: -150px;
    left: 50%;

    width: 330px;
    height: 260px;

    border-radius: 50%;

    background:
        rgba(168, 85, 247, 0.23);

    filter:
        blur(75px);

    transform:
        translateX(-50%);

    pointer-events:
        none;
}


.about-close-button {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 5;

    display: grid;

    place-items: center;

    width: 37px;
    height: 37px;

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

    border-radius: 12px;

    color: white;

    font-size: 1.45rem;

    cursor: pointer;

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

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.about-close-button:hover {
    transform:
        rotate(5deg) scale(1.05);

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


/* About Header */

.about-header {
    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    padding-right: 42px;

    margin-bottom: 22px;
}


.about-profile {
    position: relative;

    flex:
        0 0 auto;

    width: 88px;
    height: 88px;
}


.about-profile img {
    width: 100%;
    height: 100%;

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

    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.42),

        0 0 28px rgba(168, 85, 247, 0.25);
}


.about-online-dot {
    position: absolute;

    right: 3px;
    bottom: 7px;

    width: 16px;
    height: 16px;

    border:
        3px solid #100c19;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px rgba(34, 197, 94, 0.72);
}


.about-heading {
    text-align: left;
}


.about-eyebrow {
    margin-bottom: 7px;

    color:
        #cba7ff;

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;
}


.about-heading h2 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 5px;

    color: white;

    font-family:
        "Russo One",
        sans-serif;

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

    font-weight:
        400;

    letter-spacing:
        0.035em;
}


.about-tick {
    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(145deg,
            #2ca7f6,
            #147ed1);

    box-shadow:
        0 0 10px rgba(29, 155, 240, 0.42);
}


.about-tick svg {
    width: 14px;
    height: 14px;

    fill:
        currentColor;
}


.about-real-name {
    color:
        rgba(255, 255, 255, 0.52);

    font-size:
        0.78rem;

    font-weight:
        600;
}


/* Description */

.about-description {
    position: relative;

    margin-bottom: 22px;

    padding:
        17px 18px;

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

    border-radius:
        17px;

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

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

    font-size:
        0.87rem;

    line-height:
        1.75;
}


.about-description strong {
    color:
        white;
}


/* Details */

.about-details {
    display: grid;

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

    gap: 11px;

    margin-bottom:
        22px;
}


.detail-card {
    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        13px;

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

    border-radius:
        15px;

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

    text-align:
        left;

    transition:
        transform 0.22s ease,
        background 0.22s ease;
}


.detail-card:hover {
    transform:
        translateY(-2px);

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


.detail-icon {
    display: grid;

    place-items: center;

    flex:
        0 0 auto;

    width: 34px;
    height: 34px;

    border-radius:
        11px;

    color:
        #d7b8ff;

    background:
        rgba(168, 85, 247, 0.13);
}


.detail-card small {
    display: block;

    margin-bottom: 4px;

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;
}


.detail-card strong {
    display: block;

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

    font-size:
        0.72rem;

    line-height:
        1.35;
}


/* Skills */

.skills-section {
    margin-bottom:
        22px;
}


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

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

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;
}


.about-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.about-tags span {
    padding:
        7px 10px;

    border:
        1px solid rgba(168, 85, 247, 0.22);

    border-radius:
        999px;

    color:
        #decdf4;

    background:
        rgba(168, 85, 247, 0.075);

    font-size:
        0.65rem;

    font-weight:
        600;
}


/* About Social Buttons */

.about-links {
    display: grid;

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

    gap: 10px;
}


.about-link {
    display: flex;

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

    gap: 8px;

    padding:
        12px 9px;

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

    border-radius:
        14px;

    color: white;

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

    font-size:
        0.72rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}


.about-link svg {
    width: 17px;
    height: 17px;

    fill:
        currentColor;
}


.about-link:hover {
    transform:
        translateY(-2px);
}


.youtube-link:hover {
    background:
        rgba(255, 0, 0, 0.82);

    box-shadow:
        0 10px 25px rgba(255, 0, 0, 0.25);
}


.instagram-link:hover {
    background:
        linear-gradient(135deg,
            #833ab4,
            #fd1d1d,
            #fcb045);
}


.discord-link:hover {
    background:
        var(--discord);

    box-shadow:
        0 10px 25px rgba(88, 101, 242, 0.28);
}


/* Scrollbar */

.about-card::-webkit-scrollbar {
    width: 6px;
}


.about-card::-webkit-scrollbar-track {
    background:
        transparent;
}


.about-card::-webkit-scrollbar-thumb {
    border-radius:
        999px;

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


/* Animations */

@keyframes pageStart {

    from {
        opacity: 0;

        transform:
            translateY(12px) scale(0.99);
    }

    to {
        opacity: 1;

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

}


@keyframes softTrainShake {

    0% {
        transform:
            scale(1.055) translate(0, 0);
    }

    25% {
        transform:
            scale(1.055) translate(-0.22px, 0.22px);
    }

    50% {
        transform:
            scale(1.055) translate(0.22px, -0.22px);
    }

    100% {
        transform:
            scale(1.055) translate(0.22px, 0.22px);
    }

}


@keyframes compactMovement {

    0%,
    100% {
        transform:
            translateX(0) translateY(0);
    }

    50% {
        transform:
            translateX(0.5px) translateY(-0.5px);
    }

}


@keyframes statusPulse {

    0% {
        opacity: 0.9;

        transform:
            scale(0.6);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.9);
    }

}


@keyframes glowOne {

    from {
        transform:
            translate(-8px, -4px);
    }

    to {
        transform:
            translate(15px, 10px);
    }

}


@keyframes glowTwo {

    from {
        transform:
            translate(8px, 4px);
    }

    to {
        transform:
            translate(-15px, -9px);
    }

}


/* Mobile */

@media (max-width: 600px) {

    .main-content {
        padding:
            75px 15px 20px;
    }


    .sound-button {
        top: 15px;
        left: 15px;

        width: 45px;
        height: 45px;
    }


    .profile-image-wrap {
        width: 82px;
        height: 82px;
    }


    .profile-name {
        font-size:
            clamp(1.5rem, 7vw, 2.2rem);
    }


    .verified-badge {
        width: 20px;
        height: 20px;
    }


    .tagline {
        max-width: 290px;

        margin:
            0 auto 7px;

        font-size:
            0.78rem;
    }


    .social-button {
        width: 45px;
        height: 45px;
    }


    .info-row {
        width:
            min(100%, 310px);

        margin:
            auto;
    }


    .info-pill {
        flex: 1;

        min-width:
            130px;
    }


    .about-card {
        padding:
            25px 18px 20px;

        border-radius:
            23px;
    }


    .about-header {
        display: block;

        padding-right:
            35px;

        text-align:
            center;
    }


    .about-profile {
        width: 78px;
        height: 78px;

        margin:
            0 auto 13px;
    }


    .about-heading {
        text-align:
            center;
    }


    .about-heading h2 {
        justify-content:
            center;
    }


    .about-description {
        padding:
            15px;

        font-size:
            0.81rem;

        text-align:
            left;
    }


    .about-details {
        grid-template-columns:
            1fr;
    }


    .about-links {
        grid-template-columns:
            1fr;
    }

}