/* =========================================
   DELUXE ROADWAYS
   VISUAL THEME
========================================= */


/* =========================================
   COLORS
========================================= */

:root {

    --cream: #f5ead4;

    --cream-soft: #e9dcc4;

    --dark: #17201c;

    --dark-soft: rgba(20, 28, 25, 0.86);

    --gold: #d1ad70;

    --green: #78927b;

    --white-soft: rgba(255, 255, 255, 0.72);

}



/* =========================================
   RESET
========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

}


body {

    font-family:
        "Space Grotesk",
        sans-serif;

    background:
        #101613;

    color:
        var(--cream);

    overflow:
        hidden;

}



/* =========================================
   SCENE
========================================= */

.scene {

    position: relative;

    width: 100vw;

    height: 100vh;

    background-image:
        url("assets/b12.png");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

}



/* =========================================
   CINEMATIC OVERLAY
========================================= */

.overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,

            rgba(12, 18, 16, 0.30)
            0%,

            rgba(12, 18, 16, 0.03)
            40%,

            rgba(12, 18, 16, 0.08)
            60%,

            rgba(12, 18, 16, 0.62)
            100%
        );

    pointer-events:
        none;

}



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

.topbar {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    padding:
        25px 30px;

    display:
        flex;

    align-items:
        center;

    z-index:
        20;

}



/* =========================================
   CLOCK
========================================= */

.time {
    

    font-size:
        14px;

    font-weight:
        500;

    color:
        var(--cream);

    opacity:
        0.9;
        

}



/* =========================================
   ONLINE
========================================= */

/* .online {

    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        12px;

    color:
        var(--cream);

    opacity:
        0.75;

} */


.online {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 6px 11px;

    border-radius: 20px;

    background: rgba(18, 27, 23, 0.55);

    border: 1px solid rgba(245, 234, 212, 0.12);

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

    font-size: 12px;

    font-weight: 500;

    color: #FFF3D8;

    opacity: 0.95;
}


/* .online-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #79c184;

    box-shadow:
        0 0 10px
        rgba(121, 193, 132, 0.55);

} */

.online-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #78C77F;

    box-shadow:
        0 0 8px rgba(120, 199, 127, 0.7);
}



/* =========================================
   TOP LINKS
========================================= */

.links {

    margin-left:
        auto;

    display:
        flex;

    gap:
        24px;

}


.links a {

    color:
        var(--cream);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        500;

    opacity:
        0.82;

    transition:
        all 0.2s ease;

}


.links a:hover {

    color:
        var(--gold);

    opacity:
        1;

}


.links a span {

    margin-left:
        3px;

    opacity:
        0.6;

}



/* =========================================
   TITLE
========================================= */

.hero {

    position:
        absolute;

    top:
        10%;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        90%;

    text-align:
        center;

    z-index:
        10;

    pointer-events:
        none;

}
.hero {
    position: absolute;

    top: 15%;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    text-align: center;

    z-index: 10;

    pointer-events: none;
}


/* Subtle dark area behind title */

.hero::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 600px;
    height: 350px;

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

    background:
        radial-gradient(
            ellipse,
            rgba(20, 18, 14, 0.22) 0%,
            rgba(20, 18, 14, 0.08) 45%,
            transparent 72%
        );

    z-index: -1;

    pointer-events: none;
}


/* Roadways title */

.roadways-title {
    margin: 0;
    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    font-family: "Amita", serif;

    font-weight: 1000;

    line-height: 1;

    letter-spacing: 5;

    color: #FFF3D8;

    text-shadow:
        2px 2px 0 #38291F,
        -2px 2px 0 #38291F,
        2px -2px 0 #38291F,
        -2px -2px 0 #38291F,
        0 8px 25px rgba(0, 0, 0, 0.35);
}



/* =========================================
   ROADWAYS TITLE
========================================= */

.roadways-title {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: "Amita", serif;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0;

    color: var(--cream);

    text-shadow:
        0 4px 10px rgba(0, 0, 0, 0.28),
        0 10px 30px rgba(0, 0, 0, 0.22);
}


.roadways-title .deluxe {
    font-size: clamp(75px, 9vw, 145px);

    transform: translateX(-8px);

    margin-bottom: 10px;
    /* text-shadow:
        2px 2px 0 #38291F,
        -2px 2px 0 #38291F,
        2px -2px 0 #38291F,
        -2px -2px 0 #38291F,
        0 8px 25px rgba(0, 0, 0, 0.35); */
}


.roadways-title .roadways {
    font-size: clamp(75px, 9vw, 145px);

/* text-shadow:
        2px 2px 0 #38291F,
        -2px 2px 0 #38291F,
        2px -2px 0 #38291F,
        -2px -2px 0 #38291F,
        0 8px 25px rgba(0, 0, 0, 0.35); */

}



/* =========================================
   PLAYER
========================================= */

/* .player {

    position:
        absolute;

    left:
        50%;

    bottom:
        28px;

    transform:
        translateX(-50%);

    width:
        min(
            780px,
            calc(100vw - 40px)
        );

    min-height:
        94px;

    padding:
        10px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    z-index:
        30;

    border-radius:
        52px;

    background:

        rgba(
            21,
            30,
            26,
            0.88
        );

    border:
        1px solid
        rgba(
            245,
            234,
            212,
            0.13
        );

    backdrop-filter:
        blur(18px);

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

    box-shadow:

        0 22px 65px
        rgba(0, 0, 0, 0.52);

} */

.player {
    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    width: min(780px, calc(100vw - 40px));

    min-height: 94px;

    padding: 10px 18px;

    display: flex;
    align-items: center;

    gap: 17px;

    z-index: 30;

    border-radius: 52px;

    /* Transparent glass */
    /* background: rgba(20, 27, 24, 0);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); */

background: rgba(20, 27, 24, 0.48);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

    /* Subtle glass border */
    border: 1px solid rgba(245, 234, 212, 0.18);

    /* Blur whatever is behind the player */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.38);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}



/* =========================================
   ALBUM ART
========================================= */

.album-art {

    width:
        68px;

    height:
        68px;

    flex-shrink:
        0;

    overflow:
        hidden;

    border-radius:
        50%;

    border:
        1px solid
        rgba(
            245,
            234,
            212,
            0.16
        );

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.35);

}


.album-art img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}
/* =================================
   ROTATING RECORD
================================== */
#youtube-player {
    position: fixed;
    width: 200px;
    height: 200px;
    left: -250px;
    top: 0;
    opacity: 0;
    pointer-events: none;
}



/* =========================================
   TRACK INFO
========================================= */

.track-info {

    flex:
        1;

    min-width:
        0;

}



/* =========================================
   NOW PLAYING
========================================= */

.now-playing {

    margin-bottom:
        3px;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    color:
        var(--gold);

    opacity:
        0.9;

}



/* =========================================
   SONG
========================================= */

.song-name {

    font-size:
        15px;

    font-weight:
        600;

    color:
        var(--cream);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}



/* =========================================
   ARTIST
========================================= */

.artist {

    margin-top:
        3px;

    font-size:
        11px;

    color:
        var(--white-soft);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}



/* =========================================
   PROGRESS
========================================= */

.progress-container {

    margin-top:
        9px;

}


.progress-bar {

    width:
        100%;

    height:
        3px;

    background:
        rgba(
            245,
            234,
            212,
            0.18
        );

    border-radius:
        10px;

    cursor:
        pointer;

    overflow:
        hidden;

}


.progress {

    width:
        0%;

    height:
        100%;

    background:
        var(--gold);

    border-radius:
        10px;

}



/* =========================================
   TIME LABELS
========================================= */

.time-labels {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        4px;

    font-size:
        8px;

    color:
        rgba(
            245,
            234,
            212,
            0.42
        );

}



/* =========================================
   CONTROLS
========================================= */

.controls {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.controls button {

    border:
        none;

    background:
        transparent;

    color:
        var(--cream);

    cursor:
        pointer;

    font-family:
        "Space Grotesk",
        sans-serif;

}



/* =========================================
   PREVIOUS / NEXT
========================================= */

.side-button {

    width:
        26px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        12px;

    opacity:
        0.55;

    transition:
        all 0.2s ease;

}


.side-button:hover {

    color:
        var(--gold);

    opacity:
        1;

    transform:
        scale(1.08);

}



/* =========================================
   PLAY
========================================= */

.play-button {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--cream) !important;

    color:
        #18201c !important;

    font-size:
        16px;

    font-weight:
        600;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.25);

    transition:
        all 0.18s ease;

}


.play-button:hover {

    background:
        var(--gold) !important;

    transform:
        scale(1.06);

}


.play-button:active {

    transform:
        scale(0.94);

}



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

@media (max-width: 700px) {


    .topbar {

        padding:
            18px 20px;

    }


    .online {

        display:
            none;

    }


    .links {

        gap:
            14px;

    }


    .links a {

        font-size:
            11px;

    }



    /* TITLE */

    .hero {

        top:
            11%;

    }


    .roadways-title .deluxe {

        font-size:
            68px;

    }


    .roadways-title .roadways {

        font-size:
            68px;

    }



    /* PLAYER */

    .player {

        width:
            calc(100vw - 20px);

        bottom:
            14px;

        min-height:
            82px;

        padding:
            8px 11px;

        gap:
            11px;

        border-radius:
            44px;

    }


    .album-art {

        width:
            54px;

        height:
            54px;

    }


    .now-playing {

        font-size:
            7px;

    }


    .song-name {

        font-size:
            13px;

    }


    .artist {

        font-size:
            10px;

    }


    .controls {

        gap:
            5px;

    }


    .side-button {

        display:
            none;

    }


    .play-button {

        width:
            44px;

        height:
            44px;

        font-size:
            14px;

    }

}



/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 400px) {


    .roadways-title .deluxe {

        font-size:
            47px;

    }


    .roadways-title .roadways {

        font-size:
            59px;

    }


    .links a {

        font-size:
            10px;

    }


    .album-art {

        width:
            48px;

        height:
            48px;

    }


    .song-name {

        font-size:
            12px;

    }

}