.radio-feed {
    overscroll-behavior: contain;
}

.radio-slide {
    background: #050505;
    contain: layout style;
    content-visibility: auto;
}

.radio-player {
    opacity: 0;
    background: #000;
    transition: opacity 220ms ease-out;
    will-change: opacity;
    contain: layout style paint;
    pointer-events: none;
}
.radio-player iframe,
.radio-lite-embed iframe {
    pointer-events: none;
}
/* On iOS, the YT iframe needs pointer-events so the user can interact
   with YouTube's native controls (user-gesture required for playback).
   The inline style.pointerEvents='auto' set by JS is the primary mechanism;
   this CSS is a fallback for any iframe that gets the attribute. */
.radio-slide.video-visible .radio-player iframe[playsinline] {
    pointer-events: auto;
}

.radio-lite-embed {
    display: block;
    max-width: none;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
    opacity: 1;
    pointer-events: none;
    transition: opacity 180ms ease-out;
    contain: layout style paint;
}

.radio-lite-embed > .lty-playbtn {
    display: none;
}

.radio-slide.video-visible .radio-lite-embed {
    opacity: 0;
    pointer-events: none;
}

.radio-slide.video-visible .radio-player {
    opacity: 1;
    pointer-events: auto;
}

/* When the video is visible, all overlays should allow taps to pass through
   to the proxy iframe (iOS needs direct user-gesture on YouTube's controls). */
.radio-slide.video-visible .radio-yt-cover {
    pointer-events: none;
}

.radio-thumb {
    transition: opacity 280ms ease-out 60ms !important;
    will-change: opacity;
}

/* Keep the thumbnail visible on video slides until the video is actually
   ready to show (video-visible class). This prevents the black screen flash
   that users see while YouTube iframes are loading (~3s).  */
.radio-slide .radio-thumb {
    opacity: 1;
}

.radio-slide.video-visible .radio-thumb {
    opacity: 0;
    pointer-events: none;
}

/* Loading spinner — shown on active slide while video is loading */
.radio-thumb-shimmer {
    position: absolute;
    bottom: 80px;
    left: 50%;
    z-index: 2;
    pointer-events: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 200ms ease;
    animation: radio-load-spin 0.7s linear infinite;
}

.radio-slide.radio-slide--loading .radio-thumb-shimmer {
    opacity: 1;
}

.radio-slide.video-visible .radio-thumb-shimmer,
.radio-slide.radio-slide--static .radio-thumb-shimmer {
    opacity: 0;
}

.radio-buffer-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    height: 3px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.14);
    transition: opacity 120ms ease;
}

.radio-buffer-bar span {
    display: block;
    width: 36%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 126, 73, 0.95), rgba(255, 255, 255, 0));
    transform: translateX(-120%);
}

.radio-slide.yt-buffering.video-visible .radio-buffer-bar {
    opacity: 1;
}

.radio-slide.yt-buffering.video-visible .radio-buffer-bar span {
    animation: radio-buffer-scan 1.1s linear infinite;
}

.radio-slide.yt-buffering::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

@keyframes radio-load-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes radio-buffer-scan {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}