/* ═══════════════════════════════════════════════════════════════════
   PAGE TRANSITION SYSTEM · Base CSS · v1.1
   ───────────────────────────────────────────────────────────────────
   Cambios respecto v1.0:
     · [CAMBIO 1] El panel ahora tiene sus estilos base completos aquí.
       En v1.0 eran solo una red de seguridad porque el JS creaba y
       gestionaba el elemento. Ahora el panel lo inyecta PHP desde el
       primer byte, así que el CSS base es su única fuente de estilos
       hasta que el JS arranque.

       IMPORTANTE: Este archivo se carga como hoja de estilos normal
       (enqueued). Para eliminar el flash de contenido hay que añadir
       también el bloque <style> crítico en wp_head (ver comentario en
       page-transition.js). Ese bloque inline tiene priority=1 y se
       garantiza antes que cualquier hoja de estilos externa, cubriendo
       la ventana entre el primer paint y la carga de este CSS.

   Cárgalo en WordPress junto con page-transition.js, después de
   scroll-system.css y carousel-system.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Panel de transición ─────────────────────────────────────────── */
/* El panel es inyectado por PHP (wp_body_open hook) y está presente
   desde el primer byte del HTML. El CSS crítico del wp_head garantiza
   que sea visible incluso antes de que esta hoja de estilos cargue.
   Estos estilos son la definición canónica del panel en estado normal. */
#page-transition-panel {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 1;          /* visible por defecto — el JS hace el fade out */
  pointer-events: none;
  /* Sin background-color aquí: lo pone el CSS crítico de wp_head como
     fallback, y el JS lo actualiza al color real de la primera sección
     en cuanto puede leer los estilos computados. */
}

/* ── Elementos de enlace ─────────────────────────────────────────── */
.page-transition-link {
  cursor: pointer;
}

/* ── Modo editor de Elementor ────────────────────────────────────── */
html.scroll-system-editor-mode #page-transition-panel {
  display: none !important;
}

.fade-panel {
	pointer-events: none;
}