/**
 * CM Hero Slideshow - Estilos del Plugin
 * 
 * Este archivo contiene SOLO los estilos que el plugin necesita
 * para funcionar. Los estilos base del carrusel están en el tema.
 * 
 * @package CM_Hero_Slideshow
 * @version 1.0.0
 * @author Caramba Moreno
 */

/* =========================================================================
   BARRA DE PROGRESO DEL SLIDESHOW
   =========================================================================
   
   Estructura HTML:
   <div class="cm--hero-slideshow-indicator">        ← Contenedor (ya existe en HTML)
       <div class="cm--hero-slideshow-indicator-bar"></div>  ← Barra interna (JS la crea)
   </div>
   
   La barra crece de 0% a 100% en 6 segundos, mostrando el tiempo
   restante antes de que el slide cambie automáticamente.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Contenedor de la barra de progreso
   ---------------------------------------------------------------------------
   Este elemento ya existe en tu HTML. Estos estilos aseguran que
   la barra interna se posicione correctamente dentro de él.
   --------------------------------------------------------------------------- */
.cm--hero-slideshow-indicator {
  /* Contexto de posicionamiento para la barra absoluta interior */
  position: relative;

  /* Asegurar que la barra no se desborde del contenedor */
  overflow: hidden;

  /* El contenedor ocupa todo el ancho disponible */
  width: 100%;

  /* Fondo transparente para que solo se vea la barra blanca */
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Barra de progreso (elemento interno)
   ---------------------------------------------------------------------------
   Este elemento es CREADO por JavaScript cuando el plugin se inicializa.
   No existe en el HTML original - el JS lo inserta dentro del contenedor.
   --------------------------------------------------------------------------- */
.cm--hero-slideshow-indicator-bar {
  /* Posicionamiento absoluto dentro del contenedor relativo */
  position: absolute;

  /* Anclar a la esquina superior izquierda */
  top: 0;
  left: 0;

  /* Altura completa del contenedor (2px según tu HTML) */
  height: 100%;

  /* Ancho inicial: 0% - JavaScript lo animará hasta 100% */
  width: 0%;

  /* Color de la barra - blanco semi-transparente para sutileza */
  background-color: rgba(255, 255, 255, 0.85);

  /* 
     * IMPORTANTE: NO usamos transition aquí
     * 
     * ¿Por qué? Porque JavaScript actualiza el ancho ~60 veces por segundo
     * usando requestAnimationFrame. Si tuviéramos una transición CSS,
     * cada actualización iniciaría una nueva transición, causando:
     * - Lag visual (la barra se "arrastra")
     * - Conflictos entre animaciones
     * - Alto consumo de CPU
     * 
     * En cambio, JavaScript maneja el timing directamente para
     * sincronización perfecta con el autoplay.
     */

  /* 
     * will-change optimiza el rendimiento indicando al navegador
     * que esta propiedad cambiará frecuentemente.
     * Úsalo con moderación - solo en elementos que realmente animas.
     */
  will-change: width;
}

/* ---------------------------------------------------------------------------
   Estado: Barra pausada
   ---------------------------------------------------------------------------
   Cuando el mouse entra al contenedor, JavaScript añade esta clase.
   Podríamos usar esto para efectos visuales adicionales si quisiéramos.
   Por ahora, solo documentamos que existe para futura referencia.
   --------------------------------------------------------------------------- */
.cm--hero-slideshow-indicator-bar.is-paused {
  /* 
     * Actualmente no cambiamos nada visualmente cuando está pausada.
     * La barra simplemente deja de crecer (controlado por JS).
     * 
     * Posibles mejoras futuras:
     * - Cambiar opacidad: opacity: 0.5;
     * - Cambiar color: background-color: rgba(255, 255, 255, 0.5);
     * - Añadir efecto pulsante con animation
     */
}

/* ---------------------------------------------------------------------------
   Estado: Reinicio de la barra
   ---------------------------------------------------------------------------
   Cuando el slide cambia, la barra debe volver instantáneamente a 0%.
   JavaScript maneja esto directamente cambiando width a 0%.
   
   Si quisiéramos una pequeña animación de "flash" al reiniciar,
   podríamos añadirla aquí con una clase temporal.
   --------------------------------------------------------------------------- */
.cm--hero-slideshow-indicator-bar.is-resetting {
  /* Reservado para posibles efectos futuros */
}