/* ==========================================================
   CRIPTOSK RADIO V7
   FINAL DESIGN POLISH
   ========================================================== */


/* ----------------------------------------------------------
   BACKGROUND / CONTRAST
---------------------------------------------------------- */

body::before {
    background-image:
        linear-gradient(
            90deg,
            rgba(3,4,7,.93) 0%,
            rgba(4,5,8,.76) 28%,
            rgba(4,5,8,.56) 52%,
            rgba(4,5,8,.76) 77%,
            rgba(3,4,7,.90) 100%
        ),
        url('/assets/bg.jpg') !important;

    filter:
        contrast(1.04)
        saturate(.86);
}


/* slightly softer technical grid */

body::after {
    opacity: .22 !important;
}


/* ----------------------------------------------------------
   HERO
---------------------------------------------------------- */

.brand {
    position: relative;
}


/* subtle technical baseline */

.brand::after {
    content: "FREQUENCY / CULTURE / TRANSMISSION";

    display: block;

    width: fit-content;

    margin-top: 27px;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(255,255,255,.11);

    color:
        rgba(255,255,255,.25);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.1px;

    text-transform: uppercase;
}


.hero-title {
    text-shadow:
        0 12px 35px
        rgba(0,0,0,.42);
}


.hero-title span {
    background:
        linear-gradient(
            180deg,
            #d7d8db,
            #909298
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;
}


.hero-copy {
    max-width: 535px !important;

    color:
        rgba(255,255,255,.58) !important;
}


/* genre buttons */

.genre {
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.genre:hover {
    transform:
        translateY(-1px);

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

    border-color:
        rgba(255,255,255,.20);

    color:
        rgba(255,255,255,.95);
}


/* ----------------------------------------------------------
   RADIO PANEL
---------------------------------------------------------- */

.radio-panel {
    background:
        linear-gradient(
            145deg,
            rgba(10,11,15,.92),
            rgba(18,18,23,.94)
        ) !important;

    box-shadow:
        0 35px 110px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.035)
        !important;
}


/* slightly cleaner image compartment */

.visual {
    background:
        radial-gradient(
            circle at center,
            #14151a 0%,
            #090a0d 68%
        ) !important;
}


/* ----------------------------------------------------------
   VINYL
---------------------------------------------------------- */

.vinyl {
    box-shadow:
        0 25px 60px rgba(0,0,0,.70),
        inset 0 0 25px rgba(255,255,255,.012)
        !important;
}


.record-center {
    background:
        radial-gradient(
            circle at 35% 30%,
            #22242a,
            #101116 56%,
            #07080b
        ) !important;
}


/* ----------------------------------------------------------
   NOW PLAYING
---------------------------------------------------------- */

.now-playing-label {
    letter-spacing:
        2.4px !important;

    color:
        rgba(255,255,255,.23) !important;
}


.track-title {
    font-weight:
        760 !important;

    letter-spacing:
        -.45px !important;

    color:
        rgba(255,255,255,.94);

    text-wrap:
        balance;
}


.track-subtitle {
    color:
        rgba(255,255,255,.35) !important;
}


/* stats */

.live-stats {
    border-bottom:
        1px solid
        rgba(255,255,255,.045)
        !important;

    border-top:
        1px solid
        rgba(255,255,255,.045)
        !important;
}


.stat-value {
    color:
        rgba(255,255,255,.56) !important;
}


/* ----------------------------------------------------------
   PLAYER
---------------------------------------------------------- */

.custom-player {
    background:
        linear-gradient(
            145deg,
            rgba(5,6,9,.84),
            rgba(10,11,15,.65)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.085)
        !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
}


/* chrome play button */

.play-button {
    background:
        linear-gradient(
            145deg,
            #fafafa,
            #b9bbc0
        ) !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.8);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.play-button:hover {
    transform:
        scale(1.06);

    box-shadow:
        0 8px 25px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.9);
}


/* thinner / cleaner waveform */

.wave {
    gap:
        2px !important;
}


.wave span {
    width:
        2px !important;

    max-width:
        3px !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.16) !important;
}


.wave.active span {
    background:
        rgba(255,255,255,.52)
        !important;
}


/* volume */

.volume-slider {
    opacity:
        .70;

    transition:
        opacity .2s ease;
}


.volume-control:hover .volume-slider {
    opacity:
        1;
}


/* ----------------------------------------------------------
   HEADER / FOOTER
---------------------------------------------------------- */

.panel-brand span {
    color:
        rgba(255,255,255,.58)
        !important;
}


.stream-id {
    color:
        rgba(255,255,255,.22)
        !important;
}


.panel-footer {
    color:
        rgba(255,255,255,.19)
        !important;
}


/* ----------------------------------------------------------
   LIVE PULSE
---------------------------------------------------------- */

.live-dot,
.mini-live-dot {
    background:
        #ff5945 !important;
}


body[data-stream-status="online"] .mini-live-dot {
    box-shadow:
        0 0 8px rgba(255,89,69,.5);
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 900px) {

    .brand::after {
        margin-left: auto;
        margin-right: auto;
    }

}


@media (max-width: 500px) {

    .brand::after {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

}