/* ============================================================
   CLÍNICA NEREA — animations.css
   Movimiento contenido y con propósito: aparición al hacer scroll,
   acordeón, menú móvil y transición del tratamiento activo.
   Todo respeta prefers-reduced-motion.
   ============================================================ */

/* ---------- Aparición suave al hacer scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Acordeón de tratamientos (panel visual) ---------- */
.treatments-art-fade {
  transition: opacity 220ms var(--ease);
}
.treatments-art-fade.is-swapping {
  opacity: 0;
}

/* ---------- Acordeón de preguntas frecuentes ---------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 360ms var(--ease), opacity 280ms var(--ease);
}
.faq-answer.is-open {
  opacity: 1;
}

/* ---------- Menú móvil ---------- */
.mobile-menu-backdrop {
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.mobile-menu-backdrop.is-open { opacity: 1; }

.mobile-menu__inner {
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease);
}
.mobile-menu.is-open .mobile-menu__inner {
  transform: translateX(0);
}

/* ---------- Confirmación de formulario ---------- */
.form-note {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.form-note.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Cursor ---------- */
.cursor-dot, .cursor-ring {
  transition: opacity var(--dur-fast) var(--ease);
}

/* ---------- Accesibilidad: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .faq-answer,
  .mobile-menu-backdrop,
  .mobile-menu__inner,
  .form-note,
  .treatment-trigger,
  .treatment-arrow,
  .main-nav a::after,
  .site-header {
    transition-duration: 1ms !important;
  }
  .cursor-dot, .cursor-ring { display: none !important; }
}