@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {

    --bg: #08090d;
    --surface: #11131a;
    --surface-2: #171923;

    --text: #f5f7fb;
    --muted: #969baa;

    --accent: #ff365e;
    --accent-2: #ff7a45;

    --border: rgba(255,255,255,.08);

}

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: Inter, sans-serif;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(255,54,94,.15),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);

    line-height: 1.6;

}

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

.container {

    width: min(1120px, 92%);

    margin: auto;

}


/* NAVBAR */

.navbar {

    position: sticky;

    top: 0;

    z-index: 100;

    backdrop-filter: blur(18px);

    background: rgba(8,9,13,.75);

    border-bottom:
        1px solid var(--border);

}

.nav-inner {

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}

.brand-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-2)
        );

    font-weight: 800;

}

.brand strong {

    display: block;

    font-size: 15px;

}

.brand span {

    display: block;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: .08em;

}

nav {

    display: flex;

    gap: 28px;

}

nav a {

    color: var(--muted);

    font-size: 14px;

    transition: .2s;

}

nav a:hover {

    color: white;

}


/* HERO */

.hero {

    min-height: 680px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

}

.hero-grid {

    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap: 80px;

    align-items: center;

}

.live-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 14px;

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

    background:
        rgba(255,54,94,.08);

    border-radius: 999px;

    color: #ff8ba2;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .12em;

}

.live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 14px var(--accent);

}

.hero h1 {

    margin-top: 28px;

    font-size:
        clamp(55px, 8vw, 105px);

    line-height: .9;

    letter-spacing: -.07em;

}

.hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #fff,
            #ff5578
        );

    -webkit-background-clip: text;

    color: transparent;

}

.hero-description {

    margin-top: 28px;

    max-width: 560px;

    color: var(--muted);

    font-size: 17px;

}


/* PLAYER */

.player-card {

    margin-top: 36px;

    display: flex;

    align-items: center;

    gap: 20px;

}

.play-button {

    border: 0;

    cursor: pointer;

    padding: 15px 24px;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-2)
        );

    font-weight: 700;

    display: flex;

    gap: 10px;

    align-items: center;

    box-shadow:
        0 15px 40px
        rgba(255,54,94,.2);

    transition: .25s;

}

.play-button:hover {

    transform: translateY(-2px);

}

.player-info {

    display: flex;

    flex-direction: column;

}

.small-label {

    color: var(--muted);

    font-size: 9px;

    letter-spacing: .12em;

}

.player-info strong {

    font-size: 13px;

}


/* VINYL */

.visual-card {

    min-height: 450px;

    display: grid;

    place-items: center;

    position: relative;

}

.vinyl {

    width: min(360px, 75vw);

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            #171820 0 2px,
            #090a0d 3px 6px
        );

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.7);

    position: relative;

    animation:
        spin 10s linear infinite;

    animation-play-state: paused;

}

.vinyl.playing {

    animation-play-state: running;

}

.vinyl::after {

    content: "";

    position: absolute;

    inset: 48%;

    border-radius: 50%;

    background: #050505;

}

.vinyl-center {

    position: absolute;

    width: 115px;
    height: 115px;

    border-radius: 50%;

    inset: 0;

    margin: auto;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-2)
        );

    font-weight: 800;

    z-index: 2;

}

@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


/* NOW PLAYING */

.now-playing {

    padding: 100px 0;

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

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

}

.section-label {

    color: #ff607f;

    font-size: 10px;

    letter-spacing: .18em;

    font-weight: 800;

    margin-bottom: 18px;

}

.track-card {

    padding: 22px;

    display: flex;

    align-items: center;

    gap: 22px;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 22px;

}

.album-art {

    width: 90px;
    height: 90px;

    flex-shrink: 0;

    border-radius: 15px;

    display: grid;

    place-items: center;

    font-size: 36px;

    background:
        linear-gradient(
            135deg,
            #ff365e,
            #ff8b45
        );

}

.track-details {

    flex: 1;

}

.track-status {

    font-size: 9px;

    color: var(--muted);

    letter-spacing: .15em;

}

.track-details h2 {

    margin-top: 5px;

    font-size: 22px;

}

.track-details p {

    color: var(--muted);

}

.listener-box {

    text-align: right;

}

.listener-box span {

    display: block;

    font-size: 9px;

    color: var(--muted);

    letter-spacing: .12em;

}

.listener-box strong {

    font-size: 30px;

}


/* ABOUT */

.about {

    padding: 120px 0;

}

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

}

.about h2 {

    font-size: 48px;

    line-height: 1;

    letter-spacing: -.04em;

}

.about h2 span {

    color: var(--accent);

}

.about p {

    color: var(--muted);

    margin-bottom: 18px;

}


/* FOOTER */

footer {

    border-top:
        1px solid var(--border);

    padding: 35px 0;

    color: var(--muted);

}

.footer-inner {

    display: flex;

    justify-content: space-between;

    gap: 20px;

}

footer strong {

    color: white;

}

footer p {

    font-size: 13px;

}


/* MOBILE */

@media (max-width: 800px) {

    nav {
        display: none;
    }

    .hero {

        padding:
            80px 0;

    }

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .visual-card {

        min-height: 320px;

    }

    .track-card {

        align-items: flex-start;

        flex-wrap: wrap;

    }

    .listener-box {

        width: 100%;

        text-align: left;

    }

    .about-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .about h2 {

        font-size: 40px;

    }

    .footer-inner {

        flex-direction: column;

    }

}