/*
 * El arranque, sin esperar al bundle (28/08/2026; en fichero aparte desde el
 * 15/09/2026).
 *
 * El fondo de marca y el rayo que se enciende se pintan antes de que llegue el
 * JavaScript y se resuelvan la sesión y el espejo, que es justo el rato en el
 * que alguien decide si «va lento». React lo reemplaza al montar (`createRoot`
 * vacía `#root`). Los hex son los de `brand-guidelines.md`.
 *
 * Vivía dentro de un `<style>` en `index.html`, con su hash escrito en la CSP
 * (`servidor/cabeceras.ts`). Vite 8 minifica ese `<style>` al construir, así
 * que el hash del fuente ya no era el del HTML servido y en producción la CSP
 * lo bloqueaba: la pantalla volvía a ser un rectángulo blanco mudo, que es lo
 * que este bloque existe para evitar. Un fichero propio entra por
 * `style-src-elem 'self'` sin hash, y `public/` se copia tal cual —como
 * `tema.js`, que está aquí por el mismo motivo—. La hoja se enlaza en la
 * cabecera y bloquea el pintado hasta llegar, que es lo que se quiere: nunca
 * se pinta nada sin el fondo puesto.
 */
html {
  background: #0a0a0a;
}
html[data-tema='claro'] {
  background: #ffffff;
}
/*
 * El rayo que se enciende (19/09/2026, petición del usuario: «algo como un
 * rayo que se va iluminando, no solo un punto»). Sustituye al pulso gris.
 *
 * Es el rayo de la marca sin tocar un punto: la silueta sale de
 * `/favicon.svg` como máscara —la misma petición que el icono de la pestaña,
 * y entra por `img-src 'self'`—, así que aquí no se copia ninguna geometría.
 * Dos capas: `::before` es el rayo apagado, en el tono de los bordes, y
 * `::after` el mismo rayo en gris rayo, que se descubre de arriba abajo
 * —como cae un rayo—, destella a blanco y se apaga para volver a empezar.
 * Monocromo: blanco, gris rayo y borde, los tres de `brand-guidelines.md`.
 *
 * Aparece con 150 ms de retraso: si la carga es más rápida no se ve nada, que
 * es mejor que un destello de medio rayo.
 */
#arranque {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: arranque-entra 300ms cubic-bezier(0.23, 1, 0.32, 1) 150ms both;
}
#arranque::before,
#arranque::after {
  content: '';
  width: 29px;
  height: 48px;
  -webkit-mask: url('/favicon.svg?v=2') center / contain no-repeat;
  mask: url('/favicon.svg?v=2') center / contain no-repeat;
}
#arranque::before {
  background: #262626;
}
#arranque::after {
  /* Encima del apagado, en la misma caja. */
  margin-left: -29px;
  background: #c7c7c7;
  animation: arranque-rayo 1.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
html[data-tema='claro'] #arranque::before {
  background: #e4e4e4;
}
html[data-tema='claro'] #arranque::after {
  background: #6b6b6b;
  animation-name: arranque-rayo-claro;
}
@keyframes arranque-entra {
  from {
    opacity: 0;
  }
}
@keyframes arranque-rayo {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  45% {
    clip-path: inset(0 0 0 0);
    background: #c7c7c7;
  }
  55% {
    background: #ffffff;
    opacity: 1;
  }
  85%,
  100% {
    clip-path: inset(0 0 0 0);
    background: #ffffff;
    opacity: 0;
  }
}
@keyframes arranque-rayo-claro {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  45% {
    clip-path: inset(0 0 0 0);
    background: #6b6b6b;
  }
  55% {
    background: #0a0a0a;
    opacity: 1;
  }
  85%,
  100% {
    clip-path: inset(0 0 0 0);
    background: #0a0a0a;
    opacity: 0;
  }
}
/* Sin movimiento: el rayo entero, que se enciende y se apaga en su sitio. */
@media (prefers-reduced-motion: reduce) {
  #arranque::after {
    clip-path: none;
    animation: arranque-pulso 1.6s ease-in-out infinite;
  }
}
@keyframes arranque-pulso {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}