/*
 * Entrada de Gideon (≈1.6 s): el logo se "descubre" en la oscuridad con un haz de luz, un barrido
 * de brillo y anillos de energía sobre una rejilla en perspectiva; luego el telón se disuelve.
 * Sólo CSS (la CSP no permite scripts en línea) y se omite con "reducir movimiento".
 * theme-init.js agrega html.no-intro para no repetirla dentro de la misma sesión.
 */
#gk-intro {
  position: fixed;
  /* Sobra por arriba y por abajo: en iOS (modo app) el viewport a veces deja una franja sin cubrir */
  inset: -80px 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 900px;
  background-color: #05080c;
  background-image: radial-gradient(120% 90% at 50% 45%, #0e1620 0%, #05080c 72%);
  animation: gi-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) 1.25s forwards;
}

html.no-intro #gk-intro {
  display: none;
}

.gi-stage {
  position: relative;
  width: min(62vmin, 330px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

/* Resplandor de fondo que "enciende" la escena */
.gi-glow {
  position: absolute;
  inset: -45%;
  background: radial-gradient(circle, rgb(70 130 255 / 0.38), transparent 62%);
  opacity: 0;
  animation: gi-glow 1.2s ease-out 0.1s both;
}

/* Rejilla en perspectiva (el "suelo" de una escena 3D) */
.gi-grid {
  position: absolute;
  left: -60%;
  right: -60%;
  top: 52%;
  height: 90%;
  background-image:
    linear-gradient(rgb(120 170 255 / 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgb(120 170 255 / 0.2) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: rotateX(68deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
  opacity: 0;
  animation: gi-grid 1.15s ease-out both;
}

/* Haz horizontal que abre la escena */
.gi-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #b4d6ff 50%, transparent);
  box-shadow: 0 0 18px 2px rgb(120 180 255 / 0.7);
  animation: gi-beam 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.gi-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(140 190 255 / 0.6);
  box-shadow:
    0 0 26px rgb(90 150 255 / 0.4),
    inset 0 0 26px rgb(90 150 255 / 0.22);
  opacity: 0;
  animation: gi-ring 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

.gi-ring.r2 {
  animation-delay: 0.38s;
}

/* El logo: gira desde el costado, entra de la oscuridad y se enfoca */
.gi-logo {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Bordes suaves: el fondo del logo se funde con el de la escena */
  -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 99%);
  mask-image: radial-gradient(closest-side, #000 68%, transparent 99%);
  animation: gi-logo 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}

/* Barrido de luz sobre el logo: el contenedor fija el recorte, la banda se mueve dentro */
.gi-sweep {
  position: absolute;
  inset: -8%;
  overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

.gi-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgb(190 220 255 / 0) 41%,
    rgb(220 238 255 / 0.9) 50%,
    rgb(190 220 255 / 0) 59%,
    transparent 64%
  );
  transform: translateX(-125%);
  animation: gi-sweep 0.75s ease-in-out 0.5s both;
}

@keyframes gi-logo {
  0% {
    opacity: 0;
    transform: rotateY(-72deg) scale(0.7);
    filter: blur(22px) brightness(2.6) saturate(0);
    clip-path: inset(0 100% 0 0);
  }
  55% {
    opacity: 1;
    filter: blur(2px) brightness(1.45) saturate(0.8);
    clip-path: inset(0);
  }
  100% {
    opacity: 1;
    transform: rotateY(0) scale(1);
    filter: none;
    clip-path: inset(0);
  }
}

@keyframes gi-sweep {
  to {
    transform: translateX(125%);
  }
}

@keyframes gi-ring {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  25% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes gi-beam {
  0% {
    width: 0;
    opacity: 1;
  }
  60% {
    width: min(92vw, 760px);
    opacity: 1;
  }
  100% {
    width: min(92vw, 760px);
    opacity: 0;
  }
}

@keyframes gi-grid {
  0% {
    opacity: 0;
    transform: rotateX(68deg) translateY(30px);
  }
  40% {
    opacity: 0.85;
  }
  100% {
    opacity: 0.35;
    transform: rotateX(68deg) translateY(0);
  }
}

@keyframes gi-glow {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
}

@keyframes gi-out {
  to {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(8px);
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gk-intro {
    display: none;
  }
}

/*
 * Mientras dura la entrada TODO es negro: el fondo de la página, el del cuerpo y el esquema de color (así el
 * "lienzo" nativo de iOS, p. ej. la franja junto al indicador de inicio, también se oscurece aunque el celular
 * esté en modo claro). theme-init.js pone la clase gk-intro-on y la quita al terminar; entonces vuelve el tema elegido.
 */
html.gk-intro-on {
  background: #000 !important;
  color-scheme: dark !important;
}

html.gk-intro-on body {
  background: #000 !important;
}