/* =====================================================================
   LOADER — esqueleto de carga + transiciones de entrada de página
   Aplica a desktop y responsive.
   ===================================================================== */

/* ── Overlay del esqueleto ── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #040a28 0%, #0a1a52 100%);
  opacity: 1;
  transition: opacity 600ms ease, visibility 600ms ease;
  /* Fallback sin JS: se desvanece solo a los 4s */
  animation: page-loader-autohide 0.6s ease 4s forwards;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes page-loader-autohide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ── Logo animado: isotipo → letras ──
   El logo completo (viewBox 290×49) lleva el isotipo "p" en su 12%
   izquierdo. Fase 1: solo el isotipo visible (clip-path), centrado,
   entrando con fade + escala. Fase 2: las letras se revelan con un
   barrido mientras el conjunto se desliza a su posición final. */
.page-loader-logo {
  width: min(240px, 62vw);
  height: auto;
  animation:
    page-loader-iso-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both,
    page-loader-letters-in 750ms cubic-bezier(0.22, 1, 0.36, 1) 800ms both;
}

/* Fase 1 — el isotipo aparece, limpio */
@keyframes page-loader-iso-in {
  from {
    opacity: 0;
    scale: 0.78;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* Fase 2 — barrido que revela las letras (el clip inicial deja solo
   el isotipo; translate 44% lo mantiene centrado hasta que abren) */
@keyframes page-loader-letters-in {
  from {
    clip-path: inset(0 88.2% 0 0);
    translate: 44% 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    translate: 0 0;
  }
}

/* ── Entrada del contenido ──
   template.jsx se re-monta en cada navegación: fade suave siempre,
   tanto en la primera carga como al cambiar de página.
   Solo opacity: no rompe position:fixed ni los absolutos. */
.page-transition {
  animation: page-enter 520ms ease-out both;
}

@keyframes page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Reveal global: entrada sutil de imágenes y componentes ──
   `translate` (no transform) para no chocar con transforms de JS.
   Las clases se retiran al terminar, devolviendo las transiciones
   originales de cada elemento (hovers intactos). */
.gr {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--gr-d, 0ms),
    translate 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--gr-d, 0ms);
  will-change: opacity, translate;
}

.gr.gr-in {
  opacity: 1;
  translate: 0 0;
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .page-loader {
    animation-delay: 0.8s; /* fallback más corto */
  }

  .page-loader-logo {
    animation: none;
  }

  .page-transition {
    animation: none;
  }
}