@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

:root {
    --radius: .5rem;
    --background: oklch(8% .02 240);
    --foreground: oklch(97% .02 80);
    --card: oklch(12% .03 240);
    --card-foreground: oklch(97% .02 80);
    --popover: oklch(12% .03 240);
    --popover-foreground: oklch(97% .02 80);
    --primary: oklch(75% .2 50);
    --primary-foreground: oklch(8% .02 240);
    --secondary: oklch(55% .18 200);
    --secondary-foreground: oklch(97% .02 80);
    --muted: oklch(18% .03 240);
    --muted-foreground: oklch(65% .05 200);
    --accent: oklch(70% .22 150);
    --accent-foreground: oklch(8% .02 240);
    --destructive: oklch(57.7% .245 27.325);
    --border: oklch(25% .05 240);
    --input: oklch(20% .04 240);
    --ring: oklch(75% .2 50);
    --chart-1: oklch(75% .2 50);
    --chart-2: oklch(55% .18 200);
    --chart-3: oklch(70% .22 150);
    --chart-4: oklch(65% .2 320);
    --chart-5: oklch(80% .15 90);
    --sidebar: oklch(10% .02 240);
    --sidebar-foreground: oklch(97% .02 80);
    --sidebar-primary: oklch(75% .2 50);
    --sidebar-primary-foreground: oklch(8% .02 240);
    --sidebar-accent: oklch(18% .03 240);
    --sidebar-accent-foreground: oklch(97% .02 80);
    --sidebar-border: oklch(25% .05 240);
    --sidebar-ring: oklch(75% .2 50);

    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-2xl: 1rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Permanent Marker", ui-sans-serif, system-ui, sans-serif;
    --default-mono-font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-border: var(--border);

    --tw-border-style {
        syntax: "*";
        inherits: false;
        initial-value: solid;
    }
}

body {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

.rrr-primary-color {
    color: var(--primary);
}

.rrr-primary-background {
    background-color: var(--primary);
}

.rrr-primary-border {
    border-color: var(--primary);
}

.rrr-background-dark {
    background-color: var(--background);
}

.rrr-background-muted {
    background-color: var(--muted);
}

.rrr-rounded-lg {
    border-radius: var(--radius);
}

.rrr-text-foreground {
    color: var(--foreground);
}

.w-2 {
    width: calc(var(--spacing) * 2) !important;
}

.h-2 {
    height: calc(var(--spacing) * 2) !important;
}

.top-section-background {
    background: url('../images/top-section-bg.jpg');
}

.top-section {
    background: linear-gradient(oklch(0.04 0.04 260) 0%, oklch(0.12 0.08 220) 40%, oklch(0.25 0.12 200) 100%);
}

.bg-gradient {
    background-image: linear-gradient(to bottom in oklab,
            transparent 0%,
            transparent 50%,
            var(--background) 100%);
}

.h1-top {
    font-family: "Bebas Neue", serif;
    letter-spacing: .05em;
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 400;
    line-height: 1;
}

.describe p {
    font-family: system-ui;
    line-height: 1;
}

.text-muted-foreground {
    color: var(--muted-foreground);
}

.font-sans {
    font-family: Permanent Marker, ui-sans-serif, system-ui, sans-serif;
}

.button-play {
    background: var(--primary);
    color: oklch(0.08 0.02 240);
    transform: none;
    text-wrap: nowrap;
    transition: all 0.25s ease;
}

.button-play:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.25);
}

.rounded-full {
    border-radius: 100px;
}

.radio-player {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#status {
    letter-spacing: 0.05em;
}

.player {
    border-color: var(--border)
}

/* *************** WAVE DOT EFFECT *************** */
.stream-dot {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
}

.stream-dot.live::before,
.stream-dot.live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--primary);
    animation: radioWave 4s infinite;
}

.stream-dot.live::after {
    animation-delay: 2s;
}

@keyframes radioWave {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* *************** PLAYER CONTROLS ****************************** */
.progress-slider {
    pointer-events: none;
    cursor: default;
}

.player-controls {
    width: 100%;
}

.controls-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: black;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

.play-btn svg {
    width: 24px;
    height: 24px;
}

.play-btn:hover {
    transform: scale(1.05);
}

.progress-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            var(--primary) 0%,
            var(--primary) var(--progress, 0%),
            transparent var(--progress, 0%),
            transparent 100%);
    pointer-events: none;
}

/* **************** VOLUME CONTROL ***************************** */
.volume-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.volume-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
}

.volume-slider {
    flex: 1;
    height: 6px;

    -webkit-appearance: none;
    appearance: none;

    background: transparent;
    border: 1px solid var(--primary);
    border-radius: 999px;

    box-shadow:
        0 0 6px oklch(75% 0.2 50 / 0.35),
        inset 0 0 4px oklch(75% 0.2 50 / 0.15);
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 14px;
    height: 14px;

    border-radius: 50%;
    background: var(--primary);

    cursor: pointer;

    box-shadow:
        0 0 8px oklch(75% 0.2 50 / 0.6);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: none;
    border-radius: 50%;

    background: var(--primary);
    cursor: pointer;
}

/* ********************************************* */
.player-equalizer {
    align-self: baseline;
}

.equalizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 32px;
    opacity: 0;
    transition: opacity .3s;
}

.equalizer span {
    width: 4px;
    border-radius: 999px;
    background: var(--primary, #ff9800);

    animation: equalizer 1.2s ease-in-out infinite;

    box-shadow:
        0 0 6px rgba(255, 152, 0, .4),
        0 0 12px rgba(255, 152, 0, .2);
}

/* різні затримки */
.equalizer span:nth-child(1) {
    animation-delay: 0s;
}

.equalizer span:nth-child(2) {
    animation-delay: .1s;
}

.equalizer span:nth-child(3) {
    animation-delay: .2s;
}

.equalizer span:nth-child(4) {
    animation-delay: .3s;
}

.equalizer span:nth-child(5) {
    animation-delay: .4s;
}

.equalizer span:nth-child(6) {
    animation-delay: .5s;
}

.equalizer span:nth-child(7) {
    animation-delay: .4s;
}

.equalizer span:nth-child(8) {
    animation-delay: .3s;
}

.equalizer span:nth-child(9) {
    animation-delay: .2s;
}

.equalizer span:nth-child(10) {
    animation-delay: .1s;
}

.equalizer span:nth-child(11) {
    animation-delay: 0s;
}

.equalizer span:nth-child(12) {
    animation-delay: .15s;
}


.equalizer.playing {
    opacity: 1;
}

@keyframes equalizer {

    0%,
    100% {
        height: 8px;
    }

    50% {
        height: 28px;
    }
}

/* ******************* SONG TITLE ***************** */
.border-8 {
    border-style: solid;
    border-width: 8px;
}

.border-muted {
    border-color: var(--muted);
}

@media (min-width: 48rem) {
    .md\:w-80 {
        width: calc(var(--spacing) * 80);
    }
}

@media (min-width: 48rem) {
    .md\:h-80 {
        height: calc(var(--spacing) * 80);
    }
}

/* ******************** VINIL ***************************** */
.vinyl-disc {
    position: relative;
    overflow: hidden;
    background:
        conic-gradient(
            oklch(0.12 0.04 260),
            oklch(0.18 0.06 240),
            oklch(0.12 0.04 260),
            oklch(0.20 0.06 220),
            oklch(0.12 0.04 260)
        );

    animation: spin 20s linear infinite;
}

.album-art {
    width: 62%;
    height: 62%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 2;
}

.vinyl-center {
    position: absolute;

    width: 2rem;
    height: 2rem;

    border-radius: 50%;

    background: var(--primary);

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

    z-index: 3;
}

.vinyl-hole {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--background);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ********************* HISTORY SONGS LIST *************** */
.svg-wave {
    fill: var(--muted)
}

.history-list{
    padding: 80px 25px;
}

.max-w-4xl {
    max-width: var(--container-4xl);
}