/* ==========================================================================
   GS01 — PANTALLA DE CARGA
   Valores ajustables en css/variables.css, sección 9.
   La animación la mueve js/loader.js; aquí solo el estado inicial, para que
   la pantalla esté pintada desde el primer fotograma.
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9000; /* por encima de la web, por debajo del panel de ajustes */
}

/* Capa de color que tapa el fondo real y se va haciendo transparente */
.loader-bg {
  position: absolute;
  inset: 0;
  background: var(--loader-bg);
}

/* Escena: el lienzo de 1920×1080 de los SVG, encajado en la pantalla */
.loader-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--loader-color);
  will-change: transform; /* se inclina con el ratón (loader.js) */
}

/* La escena entera escala sobre el centro de la pantalla (960, 540)… */
.loader-wheel {
  transform-box: view-box;
  transform-origin: 960px 540px;
  opacity: 0; /* aparece con loader.js */
}

/* …y cada forma sobre su propio centro */
.loader-bar,
.loader-cross,
.loader-cross2,
.loader-key {
  transform-box: fill-box;
  transform-origin: center;
}

.loader-hidden { opacity: 0; } /* llave y cruz del paso 2 hasta que aparecen */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}