/* ==========================================================
   CRIPTOSK RADIO V6
   COMPACT / PREMIUM POLISH
   ========================================================== */


/* ----------------------------------------------------------
   GENERAL SCALE
---------------------------------------------------------- */

.layout {
    max-width: 1180px !important;
    gap: 58px !important;
}


/* ----------------------------------------------------------
   MAKE RIGHT PANEL SHORTER
---------------------------------------------------------- */

.radio-panel {
    max-width: 455px;
    width: 100%;
    justify-self: end;
}


/* smaller header */

.panel-header {
    height: 52px !important;
    padding-left: 19px !important;
    padding-right: 19px !important;
}


/* smaller vinyl area */

.visual {
    margin: 17px 17px 15px !important;
    aspect-ratio: 1.12 / 1 !important;
    min-height: 0 !important;
}


/* slightly smaller record */

.vinyl {
    width: 56% !important;
}


/* tighter info area */

.player-body {
    padding:
        0
        19px
        18px
        19px
        !important;
}


.live-label {
    margin-top: 0;
}


.now-playing-label {
    margin-top: 12px !important;
}


.track-title {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.08 !important;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


.track-subtitle {
    margin-top: 5px !important;
}


/* stats tighter */

.live-stats {
    margin-top: 12px !important;

    padding:
        9px
        8px
        !important;
}


/* custom player smaller */

.custom-player {
    margin-top: 14px !important;

    padding:
        10px
        !important;

    border-radius:
        14px
        !important;

    gap:
        11px
        !important;
}


.play-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
}


.wave {
    height: 23px !important;
}


.player-status {
    margin-top: 3px !important;
}


.panel-footer {
    margin-top: 12px !important;

    padding-top: 11px !important;
}


/* ==========================================================
   PLAYER VINYL GLOW
========================================================== */

.visual::after {
    content: "";

    position: absolute;

    width: 61%;
    aspect-ratio: 1;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.08);

    box-shadow:
        0 0 0 0
        rgba(255,255,255,0);

    opacity: 0;

    transition:
        opacity .35s ease;

    pointer-events: none;
}


.visual.audio-active::after {

    opacity: 1;

    animation:
        radioPulseRing
        2.2s
        ease-out
        infinite;
}


@keyframes radioPulseRing {

    0% {
        transform: scale(.93);

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

        box-shadow:
            0 0 0 0
            rgba(255,255,255,.07);
    }

    70% {
        transform: scale(1.08);

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

        box-shadow:
            0 0 0 18px
            rgba(255,255,255,0);
    }

    100% {
        transform: scale(1.08);

        opacity: 0;
    }

}


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

.live-label {
    transition:
        color .25s ease,
        opacity .25s ease;
}


body[data-stream-status="online"] .live-label {
    color:
        rgba(255,255,255,.78);
}


body[data-stream-status="offline"] .live-label {
    color:
        rgba(255,255,255,.30);
}


body[data-stream-status="offline"] .mini-live-dot {
    background:
        #555861 !important;

    box-shadow:
        none !important;
}


body[data-stream-status="offline"] .live-dot {
    background:
        #555861 !important;

    box-shadow:
        none !important;

    animation:
        none !important;
}


/* ==========================================================
   LIVE DATA TEXT
========================================================== */

.meta-sync {
    margin-left: auto;
}


body[data-stream-status="online"] .meta-sync {
    color:
        rgba(255,255,255,.45);
}


body[data-stream-status="offline"] .meta-sync {
    color:
        rgba(255,255,255,.22);
}


/* ==========================================================
   SUBTLE METAL LINE
========================================================== */

.radio-panel::after {

    content: "";

    position: absolute;

    top: 0;
    left: 18%;

    width: 64%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    opacity: .34;

    pointer-events: none;
}


/* ==========================================================
   HERO TIGHTER
========================================================== */

.hero-title {
    font-size:
        clamp(
            56px,
            7vw,
            94px
        ) !important;
}


.hero-copy {
    margin-top: 24px !important;
}


.genres {
    margin-top: 25px !important;
}


/* ==========================================================
   RESPONSIVE HEIGHT
========================================================== */

@media (min-width: 901px) and (max-height: 900px) {

    body {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .radio-panel {
        transform:
            scale(.94);

        transform-origin:
            center center;
    }

    .hero-title {
        font-size:
            clamp(
                54px,
                6.3vw,
                86px
            ) !important;
    }

}


@media (max-width: 900px) {

    .radio-panel {
        max-width: 480px;
        justify-self: center;
    }

    .visual {
        aspect-ratio: 1 / 1 !important;
    }

}


/* ==========================================================
   VERY SMALL SCREENS
========================================================== */

@media (max-width: 500px) {

    .track-title {
        font-size: 21px !important;
    }

    .visual {
        margin:
            12px
            12px
            14px
            !important;
    }

}