@font-face {
        font-family: 'Myfont2';
        src: url('./assets/Myfont2-Regular.otf') format('opentype');
        font-display: swap;
    }

    /* ==================== RESET & BASE STYLES ==================== */
    * {
        margin: 0;
        padding: 0;
        cursor: url('./assets/cursor01.svg') 5 5, auto;
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    body {
        background-color: #000000;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    /* ==================== MAIN LOGO STYLES ==================== */
    .logo-link {
        display: block;
        width: 50%;
        max-width: 400px;
        position: relative;
        z-index: 2;
        line-height: 0;
    }

    .logo-link:focus-visible {
        outline: 1px solid #ffffff;
        outline-offset: 8px;
    }

    .logo {
        width: 100%;
        height: auto;
        color: white;
        filter: brightness(1.2);
        transition: all 0.1s;
        position: relative;
        z-index: 2;
    }

    .logo.is-hover-letter {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .logo.shrink-transition {
        animation: shrink-transition 0.8s cubic-bezier(0.4, 0, 0.6, 1) !important;
    }

    .logo:hover:not(.shrink-transition) {
        animation: glitch 0.3s infinite;
    }

    /* ==================== GLITCH EFFECTS ==================== */
    body.glitch-bg {
        animation: none;
    }

    .glitch-effect {
        position: fixed;
        width: 100vw;
        height: 10px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: -1;
        opacity: 0;
        background-color: transparent;
    }

    body.glitch-bg .glitch-effect {
        animation: glitch-ray 0.2s infinite;
        opacity: 1;
    }

    @keyframes glitch-ray {
        0%, 100% { 
            background-color: rgba(0, 0, 0, 0);
            transform: translateY(-50%) translateX(0);
        }
        12% { 
            background-color: rgba(255, 0, 255, 0.9);
            transform: translateY(-50%) translateX(-60px);
        }
        25% { 
            background-color: rgba(0, 255, 255, 0.9);
            transform: translateY(-50%) translateX(40px);
        }
        37% { 
            background-color: rgba(0, 255, 0, 0.9);
            transform: translateY(-50%) translateX(-50px);
        }
        50% { 
            background-color: rgba(255, 0, 0, 0.9);
            transform: translateY(-50%) translateX(60px);
        }
        62% { 
            background-color: rgba(255, 255, 0, 0.9);
            transform: translateY(-50%) translateX(-40px);
        }
        75% { 
            background-color: rgba(0, 100, 255, 0.9);
            transform: translateY(-50%) translateX(50px);
        }
        87% { 
            background-color: rgba(255, 0, 100, 0.9);
            transform: translateY(-50%) translateX(-60px);
        }
    }

    /* ==================== KEYFRAME ANIMATIONS ==================== */
    @keyframes glitch {
        0% {
            transform: translate(0);
            filter: brightness(1.2);
        }
        20% {
            transform: translate(-2px, 2px);
            filter: brightness(1.5) hue-rotate(90deg);
        }
        40% {
            transform: translate(2px, -2px);
            filter: brightness(1.2);
        }
        60% {
            transform: translate(-2px, -2px);
            filter: brightness(1.5) hue-rotate(-90deg);
        }
        80% {
            transform: translate(2px, 2px);
            filter: brightness(1.2);
        }
        100% {
            transform: translate(0);
            filter: brightness(1.2);
        }
    }

    @keyframes menu-dot-glitch-color {
        0% {
            background-color: #ffffff;
        }
        14% {
            background-color: #ff00ff;
        }
        28% {
            background-color: #00ffff;
        }
        42% {
            background-color: #00ff00;
        }
        56% {
            background-color: #ff0000;
        }
        70% {
            background-color: #ffff00;
        }
        84% {
            background-color: #0064ff;
        }
        100% {
            background-color: #ff0064;
        }
    }

    @keyframes vermino-flicker {
        0%, 12%, 27%, 47%, 64%, 83%, 94%, 100% {
            opacity: 1;
        }
        13%, 26%, 48%, 63%, 84%, 92% {
            opacity: 0;
        }
        93% {
            opacity: 0.2;
        }
    }

    @keyframes vermino-color-shift {
        0% { filter: brightness(1.2) hue-rotate(0deg); }
        14% { filter: brightness(1.2) hue-rotate(50deg); }
        28% { filter: brightness(1.2) hue-rotate(100deg); }
        42% { filter: brightness(1.2) hue-rotate(150deg); }
        56% { filter: brightness(1.2) hue-rotate(200deg); }
        70% { filter: brightness(1.2) hue-rotate(250deg); }
        84% { filter: brightness(1.2) hue-rotate(300deg); }
        100% { filter: brightness(1.2) hue-rotate(360deg); }
    }

    @keyframes vermino-glitch {
        0%, 100% {
            transform: translate(0);
        }
        20% {
            transform: translate(-2px, 2px);
        }
        40% {
            transform: translate(2px, -2px);
        }
        60% {
            transform: translate(-2px, -2px);
        }
        80% {
            transform: translate(2px, 2px);
        }
    }

    @keyframes shrink-transition {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(0);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* ==================== OVERLAY ELEMENTS ==================== */
    .text-overlay {
        position: fixed;
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-out;
        text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    }

    .logo-overlay {
        position: fixed;
        width: 50px;
        height: 50px;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease-out;
        filter: brightness(1.2);
    }

    body.glitch-bg .logo-overlay {
        will-change: opacity, transform, filter;
    }

    .ambient-words {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    body.track-picker-active .ambient-words {
        z-index: 30;
    }

    body.track-picker-active .ambient-word:not(a[href]):not(.track-picker-title) {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.track-picker-active .ambient-word:is(a[href], .track-picker-title):not(.is-flickering):not(:focus-visible):not(:hover) {
        opacity: 0 !important;
    }

    .ambient-word {
        position: fixed;
        z-index: 0;
        color: #c8c8c8;
        font-family: 'Myfont2', sans-serif;
        font-size: clamp(18px, 1.6vw, 24px);
        line-height: 1;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: rotate(var(--word-rotation, 0deg));
        transition: opacity 0.25s ease, color 0.15s ease, transform 0.15s ease;
        text-decoration: none;
    }

    body:not(.track-picker-active) .ambient-word {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    a.ambient-word {
        cursor: pointer;
    }

    .ambient-word:hover,
    .ambient-word:focus-visible {
        color: #ff00ff;
        transform: rotate(var(--word-rotation, 0deg)) scale(1.12);
        animation: social-link-glitch-color 0.3s steps(1, end) infinite;
    }

    .ambient-word:focus-visible {
        opacity: 1 !important;
        pointer-events: auto;
        outline: 1px solid #ffffff;
        outline-offset: 4px;
    }

    .ambient-word.is-flickering {
        pointer-events: none !important;
        animation: ambient-word-flicker 1.4s steps(1, end);
    }

    body.track-picker-active .ambient-word[href].is-flickering {
        pointer-events: auto !important;
    }

    body.track-picker-active .ambient-word[href]:hover {
        opacity: 1 !important;
        pointer-events: auto !important;
        animation: social-link-glitch-color 0.15s steps(1, end) infinite;
    }

    @keyframes ambient-word-flicker {
        0%, 8%, 21%, 50%, 61% {
            opacity: 0;
        }
        9%, 19%, 62%, 88% {
            opacity: 0.85;
            color: #ff00ff;
        }
        22%, 48% {
            opacity: 1;
            color: #00ffff;
        }
        51%, 60% {
            opacity: 0.35;
            color: #00ff00;
        }
        100% {
            opacity: 0;
        }
    }

    body.glitch-bg .ambient-word {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .menu-hint-arrow {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 30;
        overflow: visible;
        opacity: 0;
        pointer-events: none;
    }

    .menu-hint-arrow.is-active {
        animation: menu-hint-fade 1.5s ease-out forwards;
    }

    .menu-hint-path {
        fill: none;
        stroke: #ffffff;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .menu-hint-arrow.is-active .menu-hint-path {
        animation: menu-hint-draw 1.3s ease-out forwards, menu-hint-color 0.3s steps(1, end) infinite;
    }

    body.glitch-bg .menu-hint-arrow {
        opacity: 0 !important;
    }

    body.menu-hint-active .ambient-word,
    body.menu-hint-active .logo-overlay {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.track-picker-active > :not(.ambient-words):not(.social-dots):not(.track-picker-toggle):not(.info-panel--track) {
        filter: blur(5px);
        opacity: 0.28;
        pointer-events: none !important;
    }

    .modal-close {
        position: fixed;
        top: max(14px, env(safe-area-inset-top));
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
        appearance: none;
        border: 0;
        padding: 8px 22px;
        background: transparent;
        color: #ffffff;
        font-family: 'Myfont2', sans-serif;
        font-size: 28px;
        cursor: pointer;
    }

    .modal-close[hidden] {
        display: none;
    }

    .modal-close:hover,
    .modal-close:focus-visible,
    .modal-close.is-flashing {
        animation: social-link-glitch-color 0.3s steps(1, end) infinite;
    }

    body.panel-modal-active > :not(.is-modal):not(.modal-close) {
        filter: blur(5px);
        opacity: 0.28;
        pointer-events: none !important;
    }

    body.track-picker-active::after,
    body.panel-modal-active::after {
        position: fixed;
        inset: 0;
        z-index: 20;
        background: rgba(0, 0, 0, 0.55);
        content: '';
        pointer-events: none;
    }

    @keyframes menu-hint-draw {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes menu-hint-fade {
        0%, 62% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes menu-hint-color {
        0% { stroke: #ffffff; }
        25% { stroke: #ff00ff; }
        50% { stroke: #00ffff; }
        75% { stroke: #00ff00; }
    }

    /* ==================== MENU DOTS (LEFT) ==================== */
    .menu-dots {
        position: fixed;
        top: calc(50% - 100px);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        gap: 26px;
        z-index: 10;
        opacity: 1;
    }

    @media (max-width: 640px) {
        .ambient-word {
            font-size: 16px;
        }

        .menu-dots {
            top: calc(50% - 130px);
            gap: 20px;
        }
    }

    .menu-dots.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .menu-dots.glitch-disappear {
        animation: dots-glitch-disappear 0.3s ease-in;
    }

    @keyframes dots-glitch-disappear {
        0% {
            opacity: 1;
            left: 50%;
            transform: scale(1);
            background-color: #ffffff;
            filter: brightness(1) hue-rotate(0deg);
        }
        15% {
            opacity: 0.8;
            left: calc(50% + 30px);
            transform: translateY(-5px) scale(1.2);
            background-color: #ff00ff;
            filter: brightness(1.5) hue-rotate(90deg);
        }
        30% {
            opacity: 0.5;
            left: calc(50% - 40px);
            transform: translateY(5px) scale(0.7);
            background-color: #00ffff;
            filter: brightness(2) hue-rotate(180deg);
        }
        45% {
            opacity: 0.4;
            left: calc(50% + 35px);
            transform: translateY(-3px) scale(1.3);
            background-color: #00ff00;
            filter: brightness(1.8) hue-rotate(270deg);
        }
        60% {
            opacity: 0.2;
            left: calc(50% - 45px);
            transform: translateY(8px) scale(0.5);
            background-color: #ff0000;
            filter: brightness(2.5) hue-rotate(0deg);
        }
        80% {
            opacity: 0.1;
            left: calc(50% + 25px);
            transform: translateY(-2px) scale(1.1);
            background-color: #ffff00;
            filter: brightness(1.2);
        }
        100% {
            opacity: 0;
            left: 50%;
            transform: scale(0);
            background-color: #ffffff;
            filter: brightness(0);
        }
    }

    .menu-dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #ffffff;
        cursor: url('./assets/cursor01.svg') 5 5, auto;
        transition: left 0.6s ease, top 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
        position: relative;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    a.menu-dot {
        text-decoration: none;
        color: inherit;
    }

    .menu-dot.glitch-active {
        animation: glitch 0.3s infinite, menu-dot-glitch-color 0.3s steps(1, end) infinite;
        box-shadow: none;
    }

    .menu-dot:hover {
        transform: scale(1.3);
        box-shadow: none;
    }

    .menu-dot-label {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 10px);
        transform: translateX(-50%);
        white-space: nowrap;
        color: #ffffff;
        font-family: 'Myfont2', sans-serif;
        font-size: 16px;
        line-height: 1;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .social-toggle .menu-dot-label {
        top: calc(100% + 10px);
        bottom: auto;
    }

    .menu-dot-label.is-collision-hidden {
        opacity: 0 !important;
    }

    .menu-dot:hover .menu-dot-label {
        opacity: 1;
    }

    .epk-toggle:hover .menu-dot-label,
    .epk-toggle:focus-visible .menu-dot-label {
        opacity: 1 !important;
    }

    .menu-dot:hover .menu-dot-label,
    .menu-dot-label.is-flashing {
        animation: social-link-glitch-color 0.3s steps(1, end) infinite;
    }

    .menu-dot-label.is-flashing {
        opacity: 1;
    }

    .social-dots {
        position: fixed;
        top: calc(50% + 50px);
        left: 50%;
        display: flex;
        align-items: center;
        gap: 26px;
        z-index: 10;
        transform: translateX(-50%);
        transition: opacity 0.3s ease;
    }

    body.track-picker-active .social-dots {
        z-index: 40;
    }

    body.track-picker-active .social-dots > :not(#trackPickerToggle) {
        display: none;
    }

    .social-dots.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .social-toggle,
    .epk-toggle,
    .bio-toggle {
        position: relative;
        z-index: 10;
    }

    .social-toggle {
        top: var(--social-dot-y, 0px);
        left: var(--social-dot-x, 0px);
    }

    .epk-toggle {
        top: var(--epk-dot-y, 0px);
        left: var(--epk-dot-x, 0px);
    }

    .bio-toggle {
        top: var(--bio-dot-y, 0px);
        left: var(--bio-dot-x, 0px);
    }

    .track-picker-toggle {
        position: fixed;
        top: calc(24px + var(--track-picker-dot-y, 0px));
        left: calc(50% + var(--track-picker-dot-x, 0px));
        z-index: 40;
        transform: translateX(-50%);
        transition: left 0.6s ease, top 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
    }

    .track-picker-toggle.hidden {
        opacity: 0;
        pointer-events: none;
    }

    button.menu-dot {
        appearance: none;
        border: 0;
        padding: 0;
    }

    .social-toggle:hover,
    .epk-toggle:hover,
    .bio-toggle:hover {
        transform: scale(1.3);
    }

    .track-picker-toggle:hover {
        transform: translateX(-50%) scale(1.3);
    }

    .track-picker-toggle:hover .menu-dot-label,
    .track-picker-toggle:focus-visible .menu-dot-label {
        opacity: 1 !important;
    }

    .social-links {
        position: fixed;
        bottom: 26px;
        left: clamp(18px, 6vw, 72px);
        width: min(300px, calc(50vw - 48px));
        box-sizing: border-box;
        padding: 18px 20px;
        color: #ffffff;
        font-family: 'Myfont2', sans-serif;
        text-align: center;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .social-links.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }

    .social-panel-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 12px;
    }

    .social-links p {
        font-size: 15px;
        line-height: 1.2;
    }

    .info-panel {
        position: fixed;
        bottom: 26px;
        width: min(300px, calc(50vw - 48px));
        box-sizing: border-box;
        padding: 18px 20px;
        color: #ffffff;
        font-family: 'Myfont2', sans-serif;
        text-align: center;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .info-panel.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }

    .info-panel.is-modal,
    .social-links.is-modal {
        inset: 0;
        margin: auto;
        height: fit-content;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 40;
        transform: none;
    }

    .info-panel.is-modal:not(.info-panel--bio),
    .social-links.is-modal {
        width: min(320px, calc(100vw - 32px));
    }

    body.glitch-bg .info-panel.is-open,
    body.glitch-bg .social-links.is-open {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .info-panel--contact {
        left: clamp(18px, 6vw, 72px);
    }

    .info-panel--tour {
        right: clamp(18px, 6vw, 72px);
    }

    .info-panel--tour a {
        color: #ffffff;
        text-decoration: none;
    }

    .info-panel--tour a:hover,
    .info-panel--tour a:focus-visible {
        animation: glitch 0.3s infinite, social-link-glitch-color 0.3s steps(1, end) infinite;
    }

    .info-panel--track {
        inset: 0;
        margin: auto;
        height: fit-content;
        width: min(320px, calc(100vw - 48px));
        z-index: 40;
    }

    body.glitch-bg .info-panel--track.is-open {
        opacity: 0;
    }

    .track-cover {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        margin-bottom: 14px;
    }

    .track-cover[hidden] {
        display: none;
    }

    .track-description {
        margin: 0 0 12px;
        font-size: 15px;
        line-height: 1.3;
    }

    .track-links {
        margin: 0;
        line-height: 1.6;
    }

    .info-panel--merch {
        left: clamp(18px, 6vw, 72px);
        max-height: min(60vh, 300px);
        overflow: visible;
    }

    .merch-fan {
        position: relative;
        width: min(248px, 100%);
        height: 140px;
        margin: 12px auto 0;
        perspective: 600px;
    }

    .merch-fan-card {
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        width: 76px;
        height: 104px;
        place-items: center;
        box-sizing: border-box;
        opacity: 0;
        transform: translate(-50%, -50%);
        animation: merch-fan-cycle 4.8s ease-in-out infinite;
        animation-delay: var(--fan-delay, 0s);
        animation-play-state: paused;
        will-change: opacity, transform;
    }

    .info-panel--merch.is-open .merch-fan-card {
        animation-play-state: running;
    }

    .merch-fan-card img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
        object-fit: contain;
    }

    @keyframes merch-fan-cycle {
        0%, 100% {
            opacity: 0;
            transform: translate(-50%, -50%) translateX(var(--fan-start-x, 0px)) rotate(0deg) scale(0.82);
        }
        12%, 56% {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(var(--fan-offset-x, 0px)) translateY(var(--fan-offset-y, 0px)) rotate(var(--fan-angle, 0deg)) scale(1);
        }
        78% {
            opacity: 0;
            transform: translate(-50%, -50%) translateX(var(--fan-end-x, 0px)) translateY(var(--fan-offset-y, 0px)) rotate(var(--fan-angle, 0deg)) scale(0.94);
        }
    }

    .info-panel--bio {
        width: min(400px, calc(100vw - 32px));
        max-height: min(76vh, 620px);
        overflow-y: auto;
    }

    .bio-copy p {
        margin: 0 0 14px;
        font-size: 14px;
        line-height: 1.35;
    }

    .bio-copy p:last-child {
        margin-bottom: 0;
    }

    .bio-artist {
        font-style: normal;
        animation: social-link-highlight 3s steps(1, end) infinite;
    }

    .bio-artist--one {
        --social-highlight-color: #ff00ff;
        animation-delay: 0s;
    }

    .bio-artist--two {
        --social-highlight-color: #00ffff;
        animation-delay: 0.6s;
    }

    .bio-artist--three {
        --social-highlight-color: #00ff00;
        animation-delay: 1.2s;
    }

    .bio-artist--four {
        --social-highlight-color: #ffff00;
        animation-delay: 1.8s;
    }

    .bio-artist--five {
        --social-highlight-color: #ff0064;
        animation-delay: 2.4s;
    }

    .info-panel-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 12px;
    }

    .info-panel h2,
    .social-links h2 {
        font-size: 20px;
        font-weight: normal;
    }

    .panel-title-button {
        appearance: none;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

    .info-panel h2:hover,
    .info-panel h2.is-flashing,
    .social-links h2:hover,
    .social-links h2.is-flashing,
    .contact-email:hover,
    .contact-email.is-flashing {
        animation: social-link-glitch-color 0.3s steps(1, end) infinite;
    }

    .info-panel a {
        color: #ffffff;
        font-size: 15px;
        text-decoration: none;
    }

    .contact-email {
        display: inline-block;
        margin-top: 8px;
    }

    .contact-service--mixing {
        color: #ff00ff;
    }

    .contact-service--mastering {
        color: #00ffff;
    }

    .contact-service--production {
        color: #00ff00;
    }

    .contact-service--graphics {
        color: #ffff00;
    }

    .contact-book-session {
        color: #ff0064;
        user-select: none;
    }

    .info-panel a:hover {
        color: #ff00ff;
    }

    @keyframes tour-instagram-glitch {
        0%, 80%, 100% {
            color: #ffffff;
        }
        82%, 90% {
            color: #ff00ff;
        }
        86%, 94% {
            color: #00ffff;
        }
    }

    .info-panel a.tour-instagram {
        animation: tour-instagram-glitch 2.4s steps(1, end) infinite;
    }

    .info-panel a.tour-instagram:hover,
    .info-panel a.tour-instagram:focus-visible {
        animation: social-link-glitch-color 0.3s steps(1, end) infinite;
    }

    .social-links a {
        color: #ffffff;
        font-size: 15px;
        line-height: 1.2;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    @keyframes social-link-highlight {
        0%, 7%, 27%, 100% {
            color: #ffffff;
        }
        8%, 26% {
            color: var(--social-highlight-color);
        }
    }

    .social-links.is-open a.social-link--instagram {
        --social-highlight-color: #ff00ff;
        animation: social-link-highlight 3s steps(1, end) infinite;
        animation-delay: 0s;
    }

    .social-links.is-open a.social-link--soundcloud {
        --social-highlight-color: #00ffff;
        animation: social-link-highlight 3s steps(1, end) infinite;
        animation-delay: 1s;
    }

    .social-links.is-open a.social-link--spotify {
        --social-highlight-color: #00ff00;
        animation: social-link-highlight 3s steps(1, end) infinite;
        animation-delay: 2s;
    }

    .social-links.is-open a.glitch-active,
    .social-links.is-open a:focus-visible {
        animation: glitch 0.3s infinite, social-link-glitch-color 0.3s steps(1, end) infinite;
    }

    @keyframes social-link-glitch-color {
        0% { color: #ffffff; }
        14% { color: #ff00ff; }
        28% { color: #00ffff; }
        42% { color: #00ff00; }
        56% { color: #ff0000; }
        70% { color: #ffff00; }
        84% { color: #0064ff; }
        100% { color: #ff0064; }
    }

    @media (max-width: 640px) {
        .social-dots {
            top: calc(50% + 38px);
            gap: 20px;
        }

        .social-links {
            width: min(300px, calc(100vw - 32px));
        }

        .social-links a {
            font-size: 13px;
        }

        .info-panel {
            width: min(300px, calc(100vw - 32px));
        }

        .info-panel--bio {
            width: min(400px, calc(100vw - 32px));
            max-height: min(70vh, 620px);
        }

    }

    @media (min-width: 641px) and (max-height: 600px) {
        .info-panel {
            bottom: 12px;
        }

    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation: none !important;
            scroll-behavior: auto !important;
            transition: none !important;
        }
    }