/* ──────────────────────────────────────────────
 * CECA Animations — Sistema centralizado
 *
 * Animaciones de entrada reutilizables para todos
 * los widgets de ceca-elementor-widgets.
 *
 * Usa el atributo [data-ceca-animation] en el HTML
 * y el JS añade la clase .ceca-animated al entrar
 * en el viewport (IntersectionObserver).
 * ──────────────────────────────────────────── */

/* ── Estado inicial: oculto ── */
[data-ceca-animation] {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  will-change: opacity, transform;
}

/* ── Estado animado: visible ── */
[data-ceca-animation].ceca-animated {
  opacity: 1;
  transform: none;
}

/* ── Variantes de transformación inicial ── */
[data-ceca-animation="fadeIn"] {
  /* Solo opacity, sin transform */
}

[data-ceca-animation="fadeInUp"] {
  transform: translateY(30px);
}

[data-ceca-animation="fadeInLeft"] {
  transform: translateX(-30px);
}

[data-ceca-animation="fadeInRight"] {
  transform: translateX(30px);
}

[data-ceca-animation="slideInUp"] {
  transform: translateY(50px);
}

/* ── Soporte para delay escalonado (stagger) ──
 * Usar data-ceca-stagger en el contenedor padre.
 * Los hijos reciben .ceca-stagger-item al iniciar
 * y .ceca-stagger-item--visible cuando llega su turno.
 * ──────────────────────────────────────────── */

/* Estado inicial: oculto */
.ceca-stagger-item {
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  will-change: opacity, transform;
}

/* ── Prevención de animación hacia atrás al preparar el Stagger ── */
.ceca-stagger-prep {
  transition: none !important;
}

/* ── Prevención FOUC para Stagger ──
 * Oculta el contenedor hasta que el JS asigne el estado inicial a los hijos.
 * Tiene fallback de 1.5s para forzar visibilidad si el JS llegara a fallar.
 * ──────────────────────────────────────────── */
[data-ceca-stagger]:not(.ceca-stagger-initialized) {
  opacity: 0;
  animation: cecaStaggerFOUCFallback 0.1s 1.5s forwards;
}

@keyframes cecaStaggerFOUCFallback {
  to {
    opacity: 1;
  }
}

/* Variantes de transformación inicial según tipo */
.ceca-stagger-item[data-ceca-stagger-type="fadeIn"] {
  /* Solo opacity */
}

.ceca-stagger-item[data-ceca-stagger-type="fadeInUp"] {
  transform: translateY(24px);
}

.ceca-stagger-item[data-ceca-stagger-type="fadeInLeft"] {
  transform: translateX(-24px);
}

.ceca-stagger-item[data-ceca-stagger-type="fadeInRight"] {
  transform: translateX(24px);
}

.ceca-stagger-item[data-ceca-stagger-type="slideInUp"] {
  transform: translateY(40px);
}

/* Estado visible — especificidad alta para ganar a las variantes de tipo */
.ceca-stagger-item.ceca-stagger-item--visible {
  opacity: 1;
  transform: none;
}

/* ── Accesibilidad: respetar preferencias del usuario ── */
@media (prefers-reduced-motion: reduce) {
  [data-ceca-animation] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ceca-stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Elementor Editor: mostrar siempre en modo edición ── */
.elementor-editor-active [data-ceca-animation] {
  opacity: 1 !important;
  transform: none !important;
}

.elementor-editor-active .ceca-stagger-item {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Mensaje "no hay datos" ── */
.ceca-widget-no-data {
  padding: 40px;
  text-align: center;
  color: var(--ceca-gray, #797979);
}