/* =============================================================================
 * catalog-reel-autoplay.css — Phase 95-02
 *
 * Visual chrome for ReelAutoplayController:
 *   - <video> overlay positioned over the .card-image-wrapper so the still poster
 *     remains visible underneath until first-frame decode (no flash of empty box).
 *   - .reel-autoplay-manual-btn — manual play button shown only in reduced-motion
 *     mode. Visual chrome lifted verbatim from .video-player__play-btn in
 *     card-detail-video.css so the affordance feels familiar.
 *   - .reel-duration-badge + .styles-count-badge — small overlays on every tile.
 *
 * CLS-safety (CATALOG-17): the <video> element is absolutely positioned and the
 * image wrapper retains its computed aspect-ratio, so injecting <video> on first
 * intent does not shift layout.
 * ========================================================================== */

.card-image-wrapper {
    /* Establish positioning context for the lazy <video> overlay + badges. */
    position: relative;
}

.reel-autoplay-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-in-out;
    background: transparent;
}

.reel-autoplay-video.is-playing {
    opacity: 1;
}

/* Manual play button (reduced-motion path). Mirrors .video-player__play-btn
 * chrome so the affordance is consistent with the existing card-detail player. */
.reel-autoplay-manual-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 60%);
    color: var(--color-cream);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
    padding: 0;
    line-height: 1;
    z-index: var(--z-elevated, 2);
}

.reel-autoplay-manual-btn:hover {
    background: rgb(0 0 0 / 80%);
}

.reel-autoplay-manual-btn:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 2px;
    background: rgb(0 0 0 / 80%);
}

.reel-autoplay-manual-btn svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Duration badge (bottom-left) + styles-count badge (bottom-right). Positioned
 * on the image wrapper so they overlay both the still poster and the autoplay
 * video, giving consistent affordance independent of mode. */
.reel-duration-badge,
.styles-count-badge {
    position: absolute;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 4px);
    background: rgb(0 0 0 / 70%);
    color: var(--color-cream);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    z-index: var(--z-elevated, 2);
}

.reel-duration-badge {
    left: 8px;
    min-width: 32px;
    text-align: center;
}

.reel-duration-badge:empty {
    display: none;
}

.styles-count-badge {
    right: 8px;
}

/* Reduced-motion: the video overlay never animates opacity. (Manual-mode users
 * also bypass the autoplay path entirely so this is belt-and-braces.) */
@media (prefers-reduced-motion: reduce) {
    .reel-autoplay-video {
        transition: none;
    }
}