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

.hero{
    margin:40px 0;
}

.hero-card{

    display:grid;

    grid-template-columns:380px 1fr;

    align-items:center;

    gap:80px;

    padding:30px 0;

}
/*.hero-left::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(0,170,255,.18),
            rgba(0,170,255,0));

    filter:blur(35px);

    z-index:-1;

}
    */
.hero-left{
    position: relative;

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

    min-width: 360px;
    min-height: 360px;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hero-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.playing-label{

    margin-bottom:18px;

    color:#53b9ff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.28em;

    text-transform:uppercase;

}
.hero-right h1{

    margin:0;

    font-size:4.2rem;

    font-weight:800;

    line-height:1;

    white-space:nowrap;

    letter-spacing:-.03em;

}
.hero-right h2{

    margin:18px 0 42px;

    font-size:1.8rem;

    font-weight:300;

    color:#8ea7c2;

}

.stream-info{

    display:flex;

    gap:12px;

    margin-top:30px;

}

.stream-info span{

    padding:8px 16px;

    border-radius:999px;

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

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

    color:#8dc5ff;

    font-size:.82rem;

}

/* ==========================================
   VINYL
========================================== */

.vinyl{

    position:relative;

    width:360px;
    height:360px;

    border-radius:50%;

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

    overflow:hidden;

    background:
        radial-gradient(circle at center,
        #252525 0%,
        #101010 40%,
        #050505 100%);

    animation:spin 18s linear infinite;

    box-shadow:

        0 40px 120px rgba(0,0,0,.6),

        0 0 90px rgba(49,215,255,.18);

}
.vinyl::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

        repeating-radial-gradient(

            circle,

            transparent 0px,

            transparent 7px,

            rgba(255,255,255,.025) 8px,

            transparent 9px

        );

    opacity:.55;

}
.vinyl::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    box-shadow:

        0 0 90px rgba(40,170,255,.20);

}

.vinyl-ring{

    position:absolute;

    border-radius:50%;

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

}

.ring1{
    inset:16px;
}

.ring2{
    inset:36px;
}

.ring3{
    inset:56px;
}

.vinyl-label{

    width:110px;
    height:110px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,
        #56dfff,
        #2ea7ff 60%,
        #126eff);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 0 35px rgba(49,215,255,.45);

}

.vinyl-title{

    font-size:13px;

    font-weight:700;

    letter-spacing:.18em;

}

.vinyl-subtitle{

    margin-top:3px;

    font-size:10px;

    letter-spacing:.25em;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}