/*
 * Splash de entrada (~1s): el logo aparece con un halo y una línea de carga degradada,
 * luego el panel se recoge hacia arriba y revela la página.
 * Solo se muestra con JS activo y una vez por sesión (ver header-v2.php y js/v2/core.js).
 */
.xg-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  background: var(--xg-surface-cont-1);
  clip-path: inset(0 0 0 0);
  transition: clip-path 600ms var(--xg-ease-in-out);
  /* Red de seguridad: si el JS nunca la quita, desaparece sola */
  animation: xg-splash-failsafe 0s linear 3s forwards;
}

.xg-js:not(.xg-no-splash) .xg-splash {
  display: grid;
}

.xg-splash.is-done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

@keyframes xg-splash-failsafe {
  to { visibility: hidden; opacity: 0; }
}

.xg-splash__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  transition: opacity 300ms var(--xg-ease-out), transform 600ms var(--xg-ease-in-out);
}

.xg-splash.is-done .xg-splash__content {
  opacity: 0;
  transform: translateY(-40px);
}

.xg-splash__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  margin: -150px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 235, 231, 0.28), rgba(255, 178, 184, 0.08) 45%, transparent 70%);
  filter: blur(10px);
  animation: xg-splash-glow 1s var(--xg-ease-out) both;
}

.xg-splash__logo {
  position: relative;
  width: 72px;
  height: auto;
  animation: xg-splash-logo 800ms var(--xg-ease-out) both;
}

.xg-splash__bar {
  position: relative;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: var(--xg-outline-variant);
  overflow: hidden;
}

.xg-splash__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--xg-primary), var(--xg-secondary));
  transform: scaleX(0);
  transform-origin: left center;
  animation: xg-splash-bar 900ms var(--xg-ease-in-out) 100ms both;
}

@keyframes xg-splash-logo {
  from { opacity: 0; transform: scale(0.7) rotate(-12deg); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes xg-splash-glow {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes xg-splash-bar {
  to { transform: scaleX(1); }
}

html.xg-splash-active,
html.xg-splash-active body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .xg-splash {
    display: none !important;
  }
}