/* ============================================================
   @file        animations.css
   @project     Cuestionario Interactivo de Rebranding — WIQOL
   @description Transiciones y animaciones del sistema: cambio de diapositiva, aparición de elementos y estados de interacción. Herramienta legítima de recopilación de datos contextuales con fines de marketing; código limpio, sin ofuscación, sin evaluación dinámica y sin rastreo.
   @version     1.0
   @author      DEEPS (para PAUL)
   @last-change 2026-11-10
   @changes     v1.0 — Creación inicial: transición de diapositiva, fade-in y estados suaves.
   @license     Uso interno del proyecto.
   ============================================================ */

/* ===== INICIO: TRANSICIÓN DE DIAPOSITIVA ===== */

/* Entrada de diapositiva: aparición con desplazamiento vertical leve. */
@keyframes slide-enter {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Salida de diapositiva: desvanecimiento con desplazamiento inverso. */
@keyframes slide-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

/* Aplicación de la animación de entrada. */
.slide.is-entering {
  animation: slide-enter 0.35s ease-out forwards;
}

/* Aplicación de la animación de salida. */
.slide.is-exiting {
  animation: slide-exit 0.25s ease-in forwards;
}

/* ===== FIN: TRANSICIÓN DE DIAPOSITIVA ===== */

/* ===== INICIO: APARICIÓN DE ELEMENTOS ===== */

/* Aparición suave por opacidad. */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Aplicación del fade-in a cualquier elemento. */
.fade-in {
  animation: fade-in 0.4s ease-out forwards;
}

/* ===== FIN: APARICIÓN DE ELEMENTOS ===== */

/* ===== INICIO: ESTADOS DE INTERACCIÓN ===== */

/* Transición suave en botones. */
.btn {
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Transición suave en opciones seleccionables. */
.option {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Transición del panel de menú. */
.menu-panel {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ===== FIN: ESTADOS DE INTERACCIÓN ===== */

/* ===== INICIO: RESPETO A PREFERENCIAS DEL USUARIO ===== */

/* Desactiva animaciones para usuarios que lo soliciten en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .slide.is-entering,
  .slide.is-exiting,
  .fade-in {
    animation: none;
  }
  .btn,
  .option,
  .menu-panel {
    transition: none;
  }
}

/* ===== FIN: RESPETO A PREFERENCIAS DEL USUARIO ===== */