/**
 * FILM Frame Interpolation - Upload Interface CSS
 * Version: 2.0.0
 * Dark theme styled to match Realistec brand: violet gradient CTAs
 * (#8b5cf6 → #6366f1), cosmic dark surfaces.
 *
 * Supplementary styles only — the main upload-interface styles live
 * inline in upload-shortcode.php's <style> block. This file covers
 * shared animations, focus rings, reduced motion, and print.
 *
 * Brand fonts (Space Grotesk, Inter, JetBrains Mono) are loaded site-
 * wide via wp_enqueue_style() in the child theme's font-loading-snippet.php
 * Code Snippet — see style.css for the matching note. This file does NOT
 * @import them; it just references the theme's --rt-* tokens (with
 * hardcoded fallbacks).
 */

/* =============================================
   PROGRESS BAR SHIMMER
   ============================================= */

/* Animation for upload progress — shimmer sweeps left-to-right across
   the filled portion of the bar. Same keyframe shape as Immersity and
   Replicate so the three plugins' progress bars look identical. */
@keyframes realistec-multi-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.realistec-multi-progress-fill {
    position: relative;
    overflow: hidden;
}

.realistec-multi-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: realistec-multi-shimmer 1.5s infinite;
}

/* =============================================
   LOADING SPINNER
   ============================================= */
.realistec-multi-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Border base is a low-alpha violet wash; the rotating top-color is
       solid brand violet. Matches the Immersity spinner. */
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-top-color: var(--rt-violet, #8b5cf6);
    border-radius: 50%;
    animation: realistec-multi-spin 0.8s linear infinite;
}

@keyframes realistec-multi-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   FOCUS STATES (ACCESSIBILITY)
   ============================================= */

/* Keyboard focus rings use brand violet rather than the OS default. The
   base rules use :focus-within (for the dropzone, which contains the
   real focusable file input) and :focus for buttons. Both render as
   solid violet outlines so they survive the dark backdrop. */
.realistec-multi-upload-area:focus-within {
    outline: 2px solid var(--rt-violet, #8b5cf6);
    outline-offset: 2px;
}

.realistec-multi-btn:focus {
    outline: 2px solid var(--rt-violet, #8b5cf6);
    outline-offset: 2px;
}

/* =============================================
   VIDEO PLAYER
   ============================================= */

/* Native <video> controls panel — darken its gradient overlay so the
   controls bar reads against any preview frame underneath. */
.realistec-multi-preview-container video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

/* =============================================
   SMOOTH TRANSITIONS
   ============================================= */
.realistec-multi-upload-area,
.realistec-multi-video-preview,
.realistec-multi-upload-progress,
.realistec-multi-upload-status,
.realistec-multi-upload-errors {
    transition: all 0.3s ease;
}

/* =============================================
   PRINT
   ============================================= */
@media print {
    .realistec-multi-upload-interface {
        display: none;
    }
}

/* =============================================
   INDETERMINATE PROGRESS BAR
   =============================================
   Used when server processing time is unknown (e.g. divide frames) —
   a 40%-wide brand-gradient pip slides across the empty track. The
   shimmer ::after overlay is suppressed while this state is active to
   avoid stacking two competing animations. */
@keyframes realistec-multi-indeterminate {
    0%   { left: -40%; width: 40%; }
    60%  { left: 100%; width: 40%; }
    100% { left: 100%; width: 40%; }
}

.realistec-multi-progress-fill.realistec-multi-indeterminate {
    position: relative;
    width: 100% !important;
    background: transparent;
    transition: none;
}

.realistec-multi-progress-fill.realistec-multi-indeterminate::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    /* Same brand gradient as the determinate-state fill (declared in
       the inline <style> block in upload-shortcode.php). Hardcoded
       stops here mirror the theme's --rt-gradient fallback. */
    background: var(--rt-gradient, linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%));
    border-radius: 4px;
    animation: realistec-multi-indeterminate 1.4s ease-in-out infinite;
}

/* Suppress the shimmer overlay while indeterminate to avoid double-animation */
.realistec-multi-progress-fill.realistec-multi-indeterminate::after {
    display: none;
}

/* =============================================
   FRAME PLACEHOLDER
   =============================================
   Shown in the frames grid while a divided-frame preview is still
   loading from the server. Sits where the <img> will go, with a low-
   alpha violet wash that matches the brand without competing with the
   real frame thumbnails. */
.realistec-multi-frame-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 80px;
    font-size: 24px;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 4px;
}

/* =============================================
   REDUCED MOTION
   =============================================
   Honor users who prefer reduced motion (set in their OS — macOS,
   iOS, Windows all expose this preference). The shimmer, spinner,
   and indeterminate animations read as decorative motion that
   doesn't convey information beyond what the static state already
   shows, so they're safe candidates to disable. Mirrors the
   reduced-motion block in Immersity and Replicate. */
@media (prefers-reduced-motion: reduce) {
    .realistec-multi-progress-fill::after,
    .realistec-multi-progress-fill.realistec-multi-indeterminate::before,
    .realistec-multi-spinner {
        animation: none;
    }

    .realistec-multi-upload-area,
    .realistec-multi-video-preview,
    .realistec-multi-upload-progress,
    .realistec-multi-upload-status,
    .realistec-multi-upload-errors {
        transition: none;
    }
}