/* ===========================================================
   Loading Page — Overlay de primera carga
   - Siempre visible al abrir
   - Entrada (fade+blur) y salida suaves
   - Logo + Texto entran con animación coordinada (stagger)
   - Logo con "respiración" más calmada al finalizar la entrada
   =========================================================== */

:root {
  --lp-bg: rgb(255, 255, 255);
  --lp-size: clamp(150px, 20vmin, 230px);

  /* Animaciones más suaves y lentas */
  --lp-fade-ms: 800ms; /* transición overlay */
  --lp-scale-ms: 1000ms; /* transición contenido base */
  --lp-ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out suave tipo expo */

  /* Glassmorphism más fuerte */
  --lp-blur: 60px; /* más intenso */
  --lp-saturate: 1.4;
  --lp-brightness: 1.05;
  --lp-border: rgba(255, 255, 255, 0.6);
  --lp-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) inset;
  --lp-noise: radial-gradient(transparent 70%, rgba(0, 0, 0, 0.02) 71%) 0 0/4px
    4px;

  /* Stagger (puedes ajustar) */
  --lp-in-delay-logo: 120ms;
  --lp-in-delay-text: 220ms;
}

.lp-no-scroll {
  overflow: hidden;
}

/* Estado base: oculto y ligeramente escalado para entrada suave */
.lp-overlay {
  position: fixed;
  inset: 0;
  background: var(--lp-bg);
  display: grid;
  place-items: center;

  /* blur base para entrada; se incrementa al mostrar */
  -webkit-backdrop-filter: blur(calc(var(--lp-blur) * 0.6))
    saturate(var(--lp-saturate)) brightness(var(--lp-brightness));
  backdrop-filter: blur(calc(var(--lp-blur) * 0.6)) saturate(var(--lp-saturate))
    brightness(var(--lp-brightness));

  box-shadow: var(--lp-shadow);
  outline: 1px solid var(--lp-border);
  background-image: var(--lp-noise);

  opacity: 0;
  transform: scale(1.01);
  transition: opacity var(--lp-fade-ms) var(--lp-ease),
    transform var(--lp-fade-ms) var(--lp-ease),
    visibility 0s linear var(--lp-fade-ms);
  visibility: hidden;
}

/* Entrada suave del overlay */
.lp-overlay.lp-show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  -webkit-backdrop-filter: blur(var(--lp-blur)) saturate(var(--lp-saturate))
    brightness(var(--lp-brightness));
  backdrop-filter: blur(var(--lp-blur)) saturate(var(--lp-saturate))
    brightness(var(--lp-brightness));
}

/* Salida suave del overlay */
.lp-overlay.lp-hide {
  opacity: 0;
  transform: scale(0.995);
  visibility: hidden;
}

/* Contenedor del contenido (box) */
.lp-box {
  display: grid;
  place-items: center;
  gap: 16px;

  /* Contenido base: leve desplazamiento + zoom */
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transition: opacity var(--lp-scale-ms) var(--lp-ease),
    transform var(--lp-scale-ms) var(--lp-ease);
}

/* Cuando el overlay está visible, el box entra */
.lp-show .lp-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================
   Entrada coordinada (stagger)
   Estructura creada por JS:
   .lp-box > section (wrapper)
     > div (container)
       > img (logo)
       > section (texto) -> h2 -> spans/b
   ============================ */

/* El wrapper entra con fade-up leve (por si Tailwind no está presente) */
.lp-box > section {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity var(--lp-scale-ms) var(--lp-ease),
    transform var(--lp-scale-ms) var(--lp-ease);
}
.lp-show .lp-box > section {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Logo: entra primero y luego “respira” */
.lp-box img.h-\[70px\] {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.lp-show .lp-box img.h-\[70px\] {
  animation: lp-in 900ms var(--lp-ease) var(--lp-in-delay-logo) both,
    lp-breath 3s ease-in-out infinite 1000ms; /* respira después de entrar */
}

/* Bloque de texto: entra un poco después que el logo */
.lp-box h2 {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}
.lp-show .lp-box h2 {
  animation: lp-in 1000ms var(--lp-ease) var(--lp-in-delay-text) both;
}

/* Si quisieras enfatizar línea a línea:
.lp-box h2 > span:first-child,
.lp-box h2 > b,
.lp-box h2 > span:last-child { opacity: 0; transform: translateY(12px); }
.lp-show .lp-box h2 > span:first-child { animation: lp-in 900ms var(--lp-ease) 200ms both; }
.lp-show .lp-box h2 > b               { animation: lp-in 900ms var(--lp-ease) 320ms both; }
.lp-show .lp-box h2 > span:last-child { animation: lp-in 900ms var(--lp-ease) 440ms both; }
*/

/* Spinner de reserva si falla la imagen (se mantiene) */
.lp-spinner {
  width: calc(var(--lp-size) * 0.5);
  height: calc(var(--lp-size) * 0.5);
  border: 4px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  animation: lp-spin 900ms linear infinite;
}

/* ============================
   Animaciones clave
   ============================ */
@keyframes lp-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lp-breath {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.07);
    opacity: 0.94;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes lp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respeto a accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .lp-overlay {
    transition: opacity var(--lp-fade-ms) ease, transform var(--lp-fade-ms) ease;
  }
  .lp-box,
  .lp-box > section,
  .lp-box img.h-\[70px\],
  .lp-box h2 {
    transition: opacity var(--lp-fade-ms) ease, transform var(--lp-fade-ms) ease;
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  .lp-overlay {
    outline: 2px solid #000;
  }
}

/* Evita interacciones dentro del overlay */
.lp-overlay * {
  pointer-events: none;
}