/**
 * Soundcheck Backdrop Styles
 * Background thumbnail slider and blur effects
 */

/* Container for sliding backdrop */
.layer-backdrop {
    overflow: hidden;
}

/* Horizontal slider containing all thumbnails */
.backdrop-slider {
    display: flex;
    flex-direction: row;
    height: 100%;
    transition: transform var(--transition-slow);
    will-change: transform;
}

/* Individual thumbnail background */
.backdrop-slide {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Preload indicator for thumbnails */
.backdrop-slide.loading {
    background-color: #111;
}

/* Fallback for videos without valid thumbnails */
.backdrop-slide.no-thumbnail {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Blur overlay layer */
.layer-blur {
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    transition: backdrop-filter var(--transition-normal);
}

/* Dark scrim overlay */
.layer-scrim {
    background-color: rgba(0, 0, 0, var(--scrim-opacity));
    transition: background-color var(--transition-normal);
}

/* Animation for backdrop during swipe */
.backdrop-slider.swiping {
    transition: none;
}

/* Smooth entrance animation */
@keyframes backdrop-fade-in {
    from {
        opacity: 0;
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.backdrop-slide.entering {
    animation: backdrop-fade-in 0.8s ease-out;
}

/*
 * Transition backdrop for directional rating animations
 *
 * This element is dynamically created by main.js during rating transitions.
 * It displays the NEXT video's thumbnail and slides in from the appropriate
 * direction (left for thumbs-up, right for thumbs-down).
 *
 * Why we need this: The backdrop-slider naturally only moves left when advancing.
 * For thumbs-up (swipe right feel), we need content appearing from the left,
 * which is impossible with the slider alone. This clone provides that flexibility.
 *
 * After the animation completes, this element is removed and the real slider
 * is snapped to the correct position.
 */
.backdrop-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}