* {
    box-sizing: border-box;
}

:root {
    --text: #ffffff;
    --muted: rgba(255,255,255,.66);
    --glass: rgba(255,255,255,.075);
    --glass-border: rgba(255,255,255,.16);
    --shadow: 0 22px 70px rgba(0,0,0,.34);
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #050505;
    color: var(--text);

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

    -webkit-text-size-adjust: 100%;
}

body {
    overflow: hidden;
}

.scene {
    position: relative;
    width: 100vw;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: #050505;

    /* Better mobile rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


/* =========================
   BACKGROUND VIDEO
========================= */

.bg-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    z-index: -5;

    /* Keep video rendering simple: expensive per-frame filters and
       transform promotion can cause stutter on weaker GPUs. */
    filter: brightness(.74);

    transform: none;
    -webkit-transform: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: auto;
}


/* =========================
   DARK OVERLAY
========================= */

.vignette {
    position: absolute;
    inset: 0;

    z-index: -4;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.24) 44%,
            rgba(0,0,0,.78) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.34) 0%,
            rgba(0,0,0,.08) 42%,
            rgba(0,0,0,.62) 100%
        );

    pointer-events: none;
}


/* =========================
   GRAIN
========================= */

.grain {
    position: absolute;
    inset: 0;

    z-index: 20;

    pointer-events: none;

    opacity: .045;

    /* Static grain: avoids repainting a full-screen SVG noise texture
       every 240ms while the video is decoding. */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.16) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 1px, transparent 1px),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,.10) 0 1px, transparent 1px);
    background-size: 7px 7px, 11px 11px, 13px 13px;
}


/* =========================
   AMBIENT LIGHT
========================= */

.ambient {
    position: absolute;

    width: 35vw;
    height: 35vw;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

    opacity: .14;

    z-index: -3;

    will-change: transform;
}

.ambient-one {
    background: #5f7cff;

    top: -18vw;
    left: -10vw;
}

.ambient-two {
    background: #ffffff;

    bottom: -24vw;
    right: -12vw;

    opacity: .06;
}


/* =========================
   TOP BAR
========================= */

.topbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding:
        max(22px, env(safe-area-inset-top))
        28px
        0;

    display: flex;

    justify-content: flex-end;

    z-index: 10;
}


/* =========================
   MUSIC BUTTON
========================= */

.icon-button {
    width: 46px;
    height: 46px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 50%;

    background:
        rgba(0,0,0,.22);

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

    color: #fff;

    cursor: pointer;

    display: grid;
    place-items: center;

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

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

    -webkit-tap-highlight-color: transparent;
}

.icon-button:hover {
    transform: scale(1.07);

    background:
        rgba(255,255,255,.1);

    border-color:
        rgba(255,255,255,.32);
}

.icon-button:active {
    transform: scale(.96);
}

.sound-bars {
    height: 15px;

    display: flex;

    align-items: center;

    gap: 2px;
}

.sound-bars i {
    width: 2px;
    height: 7px;

    background: #fff;

    border-radius: 2px;

    opacity: .82;
}

.sound-bars i:nth-child(2) {
    height: 13px;
}

.sound-bars i:nth-child(3) {
    height: 9px;
}

.sound-button.is-playing
.sound-bars i {
    animation:
        equalize .65s
        ease-in-out
        infinite alternate;
}

.sound-button.is-playing
.sound-bars i:nth-child(2) {
    animation-delay: -.3s;
}

.sound-button.is-playing
.sound-bars i:nth-child(3) {
    animation-delay: -.15s;
}


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

.profile {
    position: relative;

    z-index: 3;

    width: min(760px, 100%);

    min-height: 100svh;

    margin: 0 auto;

    padding:
        9.5svh
        22px
        8svh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* =========================
   INTRO
========================= */

.intro {
    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    animation:
        rise .9s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.avatar-wrap {
    position: relative;

    width:
        clamp(
            112px,
            15vw,
            154px
        );

    aspect-ratio: 1;

    margin-bottom: 18px;
}

.avatar {
    position: absolute;

    inset: 6px;

    width:
        calc(100% - 12px);

    height:
        calc(100% - 12px);

    object-fit: cover;

    object-position: center top;

    filter: grayscale(100%);

    border-radius: 50%;

    box-shadow:
        0 20px 55px rgba(0,0,0,.36);

    border:
        1px solid rgba(255,255,255,.25);
}

.avatar-ring {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.34);

    box-shadow:
        0 0 0 7px
        rgba(255,255,255,.035),

        0 0 45px
        rgba(255,255,255,.09);

    animation:
        pulse-ring 3.4s
        ease-in-out
        infinite;

    will-change: transform, opacity;
}


/* =========================
   IDENTITY
========================= */

.identity h1 {
    margin: 0;

    font-size:
        clamp(
            30px,
            5vw,
            48px
        );

    line-height: 1;

    letter-spacing: -.045em;

    font-weight: 800;

    text-shadow:
        0 8px 35px rgba(0,0,0,.4);
}

.handle {
    margin-top: 8px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.62);
}

.identity p {
    margin: 11px 0 0;

    color:
        rgba(255,255,255,.78);

    font-size: 14px;

    line-height: 1.5;
}


/* =========================
   SOCIAL ICONS
========================= */

.socials {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 28px;

    max-width: 520px;

    animation:
        rise .9s
        .14s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.social {
    position: relative;

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    text-decoration: none;

    color: #fff;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 50%;

    background:
        rgba(255,255,255,.065);

    box-shadow:
        0 10px 28px rgba(0,0,0,.18);

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

    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;

    -webkit-tap-highlight-color: transparent;
}

.social:hover {
    transform:
        translateY(-5px)
        scale(1.08);

    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.34);

    box-shadow:
        0 16px 34px rgba(0,0,0,.28);
}

.social:active {
    transform: scale(.96);
}

.social-icon {
    width: 20px;
    height: 20px;

    display: grid;

    place-items: center;
}

.social-icon img {
    width: 100%;
    height: 100%;

    display: block;
}

.social-icon-dual {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: -.04em;
}

.social-icon-dual span {
    opacity: .56;

    margin-left: 1px;
}


/* =========================
   TOOLTIP
========================= */

.tooltip {
    position: absolute;

    bottom: calc(100% + 10px);

    left: 50%;

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

    padding:
        6px 9px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius: 8px;

    background:
        rgba(8,8,8,.74);

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

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.social:hover .tooltip {
    opacity: 1;

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


/* =========================
   FEATURED LINKS
========================= */

.featured {
    width:
        min(460px, 100%);

    display: grid;

    gap: 9px;

    margin-top: 23px;

    animation:
        rise .9s
        .24s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.featured-link {
    min-height: 57px;

    display: grid;

    grid-template-columns:
        84px
        1fr
        24px;

    align-items: center;

    gap: 13px;

    padding:
        9px 14px;

    text-decoration: none;

    color: #fff;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 18px;

    background:
        rgba(8,8,8,.27);

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

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

    -webkit-tap-highlight-color: transparent;
}

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

    background:
        rgba(255,255,255,.095);

    border-color:
        rgba(255,255,255,.25);
}

.featured-link:active {
    transform: scale(.99);
}

.featured-brand {
    font-size: 11px;

    font-weight: 800;

    letter-spacing: .1em;

    opacity: .92;
}

.featured-copy {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;
}

.featured-copy strong {
    font-size: 12px;

    font-weight: 700;
}

.featured-copy small {
    color:
        rgba(255,255,255,.53);

    font-size: 10px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.arrow {
    font-size: 17px;

    opacity: .62;

    text-align: right;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.featured-link:hover .arrow {
    transform:
        translate(2px,-2px);

    opacity: 1;
}


/* =========================
   ENTRY SCREEN
========================= */

.entry {
    position: fixed;

    inset: 0;

    z-index: 50;

    display: grid;

    place-items: center;

    background: #050505;

    cursor: pointer;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.entry.hidden {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.entry-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    animation:
        entry-pulse
        2.1s
        ease-in-out
        infinite;
}

.entry-mark {
    width: 66px;
    height: 66px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius: 50%;

    background:
        rgba(255,255,255,.06);

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

    font-size: 15px;

    font-weight: 800;

    letter-spacing: -.04em;
}

.entry-title {
    font-size: 14px;

    font-weight: 700;

    letter-spacing: .02em;
}

.entry-subtitle {
    font-size: 11px;

    color:
        rgba(255,255,255,.48);

    letter-spacing: .14em;

    text-transform: uppercase;
}


/* =========================
   MUSIC STATUS
========================= */

.music-status {
    position: fixed;

    right: 24px;

    bottom:
        max(
            58px,
            calc(
                env(safe-area-inset-bottom) + 58px
            )
        );

    z-index: 12;

    padding:
        7px 10px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 999px;

    background:
        rgba(0,0,0,.25);

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

    color:
        rgba(255,255,255,.42);

    font-size: 9px;

    letter-spacing: .08em;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(6px);

    transition:
        opacity .3s ease,
        transform .3s ease;

    pointer-events: none;
}

.music-status.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================
   GG FAMILY
========================= */

.gg-family {
    position: fixed;

    left: 50%;

    bottom:
        max(
            22px,
            env(safe-area-inset-bottom)
        );

    z-index: 15;

    transform:
        translateX(-50%);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .08em;

    color:
        rgba(255,255,255,.65);

    text-shadow:
        0 4px 18px rgba(0,0,0,.5);

    pointer-events: none;

    white-space: nowrap;

    animation:
        gg-family-in
        1s
        .8s
        ease
        both;
}


/* =========================
   ANIMATIONS
========================= */

@keyframes rise {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes pulse-ring {

    0%,
    100% {
        transform: scale(1);

        opacity: .75;
    }

    50% {
        transform:
            scale(1.035);

        opacity: 1;
    }
}


@keyframes equalize {

    from {
        transform:
            scaleY(.55);
    }

    to {
        transform:
            scaleY(1.35);
    }
}




@keyframes entry-pulse {

    0%,
    100% {
        transform: scale(1);

        opacity: .9;
    }

    50% {
        transform:
            scale(1.035);

        opacity: 1;
    }
}


@keyframes gg-family-in {

    from {
        opacity: 0;

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

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


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

@media (max-width: 600px) {

    /* -------------------------
       VIDEO PERFORMANCE
    -------------------------- */

    .bg-video {
        object-position: center center;

        filter:
            saturate(.92)
            contrast(1.02)
            brightness(.76);

        transform: none;

        -webkit-transform: none;

        will-change: auto;
    }


    /* Remove expensive grain animation */

    .grain {
        display: none;
    }


    /* Reduce ambient blur */

    .ambient {
        filter: blur(40px);

        opacity: .08;

        will-change: auto;
    }

    .ambient-one {
        top: -25vw;
        left: -18vw;
    }

    .ambient-two {
        bottom: -30vw;
        right: -18vw;

        opacity: .035;
    }


    /* -------------------------
       PROFILE
    -------------------------- */

    .profile {
        padding:
            8svh
            18px
            8svh;
    }


    .avatar-wrap {
        width: 118px;
    }


    .identity h1 {
        font-size: 34px;
    }


    .identity p {
        font-size: 13px;
    }


    /* -------------------------
       SOCIALS
    -------------------------- */

    .socials {
        gap: 9px;

        margin-top: 23px;

        max-width: 350px;
    }


    .social {
        width: 43px;
        height: 43px;

        /*
         * Remove expensive backdrop blur
         * from every icon on mobile.
         */

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        background:
            rgba(255,255,255,.075);

        box-shadow:
            0 8px 20px rgba(0,0,0,.18);
    }


    /* -------------------------
       FEATURED LINKS
    -------------------------- */

    .featured {
        margin-top: 18px;
    }


    .featured-link {
        min-height: 53px;

        border-radius: 16px;

        grid-template-columns:
            72px
            1fr
            20px;

        /*
         * Remove expensive blur
         * from featured cards.
         */

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        background:
            rgba(8,8,8,.38);
    }


    /* -------------------------
       TOP BAR
    -------------------------- */

    .topbar {
        padding-left: 18px;
        padding-right: 18px;
    }


    .icon-button {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        background:
            rgba(0,0,0,.32);
    }


    /* -------------------------
       MUSIC STATUS
    -------------------------- */

    .music-status {
        right: 18px;

        bottom:
            max(
                54px,
                calc(
                    env(safe-area-inset-bottom) + 54px
                )
            );

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    /* -------------------------
       GG FAMILY
    -------------------------- */

    .gg-family {
        left: 50%;

        bottom:
            max(
                18px,
                env(safe-area-inset-bottom)
            );

        font-size: 10px;

        transform:
            translateX(-50%);
    }


    /* -------------------------
       ENTRY SCREEN
    -------------------------- */

    .entry-mark {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        background:
            rgba(255,255,255,.07);
    }
}


/* =========================
   MOBILE TOUCH DEVICES
========================= */

@media (hover: none) and (pointer: coarse) {

    /*
     * No hover animations on touch devices.
     */

    .social:hover {
        transform: none;

        background:
            rgba(255,255,255,.075);

        border-color:
            rgba(255,255,255,.16);

        box-shadow:
            0 8px 20px rgba(0,0,0,.18);
    }


    .featured-link:hover {
        transform: none;

        background:
            rgba(8,8,8,.38);

        border-color:
            rgba(255,255,255,.12);
    }


    .icon-button:hover {
        transform: none;

        background:
            rgba(0,0,0,.32);

        border-color:
            rgba(255,255,255,.18);
    }


    /*
     * Tooltips don't make sense
     * on touch screens.
     */

    .tooltip {
        display: none;
    }
}


/* =========================
   VERY SMALL DEVICES
========================= */

@media (max-width: 380px) {

    .profile {
        padding-left: 14px;
        padding-right: 14px;
    }


    .avatar-wrap {
        width: 104px;
    }


    .identity h1 {
        font-size: 30px;
    }


    .identity p {
        font-size: 12px;
    }


    .socials {
        gap: 7px;
        max-width: 320px;
    }


    .social {
        width: 40px;
        height: 40px;
    }


    .featured-link {
        grid-template-columns:
            65px
            1fr
            18px;

        gap: 9px;

        padding-left: 11px;
        padding-right: 11px;
    }
}


/* =========================
   SMALL HEIGHT SCREENS
========================= */

@media (max-height: 720px) {

    .profile {
        padding-top: 5svh;

        padding-bottom: 4svh;
    }


    .avatar-wrap {
        width: 92px;

        margin-bottom: 12px;
    }


    .identity h1 {
        font-size: 30px;
    }


    .identity p {
        margin-top: 7px;
    }


    .socials {
        margin-top: 17px;
    }


    .featured {
        margin-top: 13px;
    }


    .featured-link {
        min-height: 48px;
    }
}


/* =========================
   REDUCED MOTION
========================= */

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

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

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }


    .grain {
        display: none;
    }
}