/* Default light theme variables */
:root {
    --background-color: oklch(1 0 0);
    --text-color: oklch(0 0 0);
    --link-color: oklch(0.57 0.2 263); /* Modern blue */
    --link-visited-color: oklch(0.44 0.22 302); /* Modern purple */
    --accent-color: #4682b4;

    /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

    --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
    --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
    --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
    --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
    --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
    --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
    --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
    /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --grid-max-width: 77.5rem;
    --grid-gutter: var(--space-s-l, clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem));
    --grid-columns: 12;
}

.u-container {
    max-width: var(--grid-max-width);
    padding-inline: var(--grid-gutter);
    margin-inline: auto;
}

.u-grid {
    display: grid;
    gap: var(--grid-gutter);
}

/* System dark mode preference */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: oklch(0 0 0);
        --text-color: oklch(1 0 0);
        --link-color: oklch(
            0.85 0.02 263
        ); /* Light gray with slight blue tint */
        --link-visited-color: oklch(
            0.65 0.02 263
        ); /* Darker gray with slight blue tint */
        --accent-color: #6495ed;
    }
}

html {
    background-color: var(--background-color);
    font-family: "Source Code Pro", monospace;
    color: var(--text-color);
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease;
}

/* Only apply transitions when the theme-transitions class is present */
html.theme-transitions,
html.theme-transitions body {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

html.theme-transitions a {
    transition: color 0.3s ease;
}

body {
    font-family: "Source Code Pro", monospace;
    font-size: var(--step-0);
    color: var(--text-color);
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
}

pre {
    white-space: pre-wrap;
    margin: 0;
}

pre span {
    white-space: pre;
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited-color);
}

.header {
    display: flex;
    justify-content: center;
}

.content {
    /* display: flex; */
    justify-content: center;
}

/* Music Section */
.section {
    margin: 0 auto;
    max-width: 800px;
    padding: 1rem;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.section .header {
    font-size: var(--step-4);
    min-height: 2rem;
}

.section .sub-header {
    font-size: var(--step-3);
    padding-block: 1rem 0.75rem;
}

.section .music__content {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-block: 1rem;
}

.section .lyrics-container {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

.section .lyrics-text {
    width: 60%;
    text-align: left;
}

.section .media-container {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.section .media-container img {
    width: 100%;
    max-width: 18.75rem;
    height: auto;
}

.section .media-container audio {
    width: 100%;
    max-width: 18.75rem;
}

.section .lyrics-text {
    text-align: left;
    font-weight: 200;
}

.section .lyrics-refs {
    text-align: center;
    font-size: var(--step--1);
    font-weight: 100;
    width: min(50vw, 40rem);
    font-style: italic;
}

.highlight {
    background-color: oklch(0.5 0 0);
    display: block;
    padding: 0.125rem;
}

@keyframes glitch {
    0% {
        transform: skew(0deg, 0deg);
        text-shadow: none;
    }
    20% {
        transform: skew(3deg, -3deg);
        text-shadow: 1px 1px oklch(0.57 0.2 263); /* Blue */
    }
    40% {
        transform: skew(-3deg, 3deg);
        text-shadow: -1px -1px oklch(0.54 0.15 142); /* Green */
    }
    60% {
        transform: skew(3deg, -3deg);
        text-shadow: 1px 1px oklch(0.7 0.15 200); /* Cyan */
    }
    80% {
        transform: skew(-3deg, 3deg);
        text-shadow: -1px -1px oklch(0.57 0.2 263); /* Blue */
    }
    100% {
        transform: skew(0deg, 0deg);
        text-shadow: none;
    }
}

.pulse {
    animation: glitch 0.3s infinite;
}

@keyframes debug-flicker {
    0%,
    100% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    51% {
        opacity: 1;
    }
    89% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    91% {
        opacity: 1;
    }
}

.debug-flicker {
    display: inline-block;
    animation: debug-flicker 3s linear infinite;
}

@keyframes flicker {
    0%,
    100% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    51% {
        opacity: 1;
    }
    89% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    91% {
        opacity: 1;
    }
}

.flicker-word {
    display: inline-block;
    animation: flicker 8s linear infinite;
    animation-delay: var(--flicker-delay, 0s);
}

/* Mobile styles */
@media (max-width: 48rem) {
    /* 768px -> 48rem */
    .section .lyrics-container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 1.25rem;
    }

    .section .lyrics-text {
        width: 100%;
    }

    .section .media-container {
        width: 100%;
    }
}

/* Bandcamp - darken the blue */
a[href*="bandcamp"] {
    color: #629aa9;
    transition: color 0.2s ease;
}
a[href*="bandcamp"]:hover {
    color: #4a7885;
}

/* Spotify - slightly lighter green on hover */
a[href*="spotify"] {
    color: #1db954;
    transition: color 0.2s ease;
}
a[href*="spotify"]:hover {
    color: #1ed760;
}

/* Apple Music - darker red */
a[href*="music.apple"] {
    color: #ff0000;
    transition: color 0.2s ease;
}
a[href*="music.apple"]:hover {
    color: #cc0000;
}

/* Instagram - gradient text */
.instagram-gradient {
    background: linear-gradient(
        45deg,
        #405de6,
        #5851db,
        #833ab4,
        #c13584,
        #e1306c,
        #fd1d1d,
        #f56040,
        #f77737
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-decoration-line: underline;
    text-decoration-color: #833ab4;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}