/* Text Carousel Styles v1.2.0 */
/* Estilos del Carrusel de Texto v1.2.0 */

/* Contenedor principal del carrusel */
.text-carousel-container {
  display: inline-block; /* Se adapta al flujo del texto */
  /* La fuente se aplica aquí si se define google_font en el PHP */
  overflow: visible; /* Permitir que el wrapper controle el overflow */
  vertical-align: middle; /* Alineación vertical */
  line-height: inherit; /* Asegura que la altura de línea sea consistente con el entorno */
}

/* Texto estático */
.text-carousel-static {
  /* Estilos para el texto estático si son necesarios */
  padding-right: 0.2em; /* Pequeño espacio antes del texto dinámico */
}

/* Wrapper para los textos dinámicos */
/* Necesario para controlar overflow en animación 'slide' */
.text-carousel-dynamic-wrapper {
    display: inline-block; /* Para que esté en línea con el estático */
    position: relative; /* Necesario para posicionar absoluto el span dinámico */
    vertical-align: middle; /* Alinear con el texto estático */
    overflow: hidden; /* CLAVE: Oculta el texto que se desliza fuera en 'slide' */
    /* Ajustar altura si es necesario, pero 'auto' o heredar suele funcionar */
    /* height: 1.2em; */ /* Ejemplo: si la línea de altura causa problemas */
    min-width: 50px; /* Un ancho mínimo para evitar colapso inicial */
}

/* Contenedor interno para ARIA live region */
.text-carousel-dynamic-container {
  display: inline-block; /* Ocupa el espacio necesario */
  /* No necesita posicionamiento especial aquí */
}

/* El span que realmente muestra el texto dinámico */
.text-carousel-dynamic {
  display: inline-block; /* Para que se comporte como texto */
  white-space: nowrap; /* Evita que el texto se divida en líneas durante la animación */
  opacity: 1; /* Visible por defecto */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transiciones para ambas animaciones */
  transform: translateX(0); /* Estado inicial (centrado/visible) */
  will-change: transform, opacity; /* Optimización para el navegador */
}

/* --- Animación Fade (data-animation="fade") --- */
/* Clase aplicada por JS para iniciar el desvanecimiento de salida */
.text-carousel-container[data-animation="fade"] .text-carousel-dynamic.animate-out {
  opacity: 0; /* Hacer invisible */
}
/* Clase aplicada por JS para iniciar el desvanecimiento de entrada (opcional si el estado base es opacity:1) */
.text-carousel-container[data-animation="fade"] .text-carousel-dynamic.animate-in {
  opacity: 1; /* Hacer visible */
}

/* --- Animación Slide Horizontal (data-animation="slide") --- */
/* Para slide, posicionamos absolutamente dentro del wrapper */
.text-carousel-container[data-animation="slide"] .text-carousel-dynamic {
    position: absolute; /* Permite moverlo libremente dentro del wrapper */
    left: 0;
    top: 0;
    width: 100%; /* Ocupa el ancho del wrapper para alineación */
}

/* Estado de preparación antes de entrar (viene de la derecha, invisible) */
/* Clase aplicada brevemente por JS antes de la entrada */
.text-carousel-container[data-animation="slide"] .text-carousel-dynamic.prepare-in {
    opacity: 0; /* Invisible */
    transform: translateX(100%); /* Posicionado a la derecha, fuera de vista */
    transition: none; /* Sin transición al preparar, el cambio debe ser instantáneo */
}

/* Estado de salida (se va hacia la izquierda) */
/* Clase aplicada por JS para iniciar la salida */
.text-carousel-container[data-animation="slide"] .text-carousel-dynamic.animate-out {
  opacity: 0; /* Invisible al final */
  transform: translateX(-100%); /* Mover a la izquierda, fuera de vista */
}

/* Estado de entrada (viene desde la derecha al centro) */
/* Clase aplicada por JS para iniciar la entrada */
.text-carousel-container[data-animation="slide"] .text-carousel-dynamic.animate-in {
  opacity: 1; /* Visible */
  transform: translateX(0); /* Mover a la posición original (centro) */
}


/* Consideraciones de accesibilidad y responsividad: */
/* - El color y contraste dependerán del tema. Asegúrate de que sean adecuados. */
/* - La fuente se puede personalizar vía opciones/shortcode. */
/* - Las animaciones son suaves. Considerar 'prefers-reduced-motion' en el futuro. */
/* - 'inline-block' y 'overflow: hidden' ayudan a la responsividad. */