/* OIBA v2 · pantalla de carga: el ajolote oficial nada alrededor de una órbita.
   - El ajolote es ajolote-ivory.png (aprobado), cortado en bandas horizontales que ondulan
     con el mismo perfil que el portal del logotipo (cabeza quieta, amplitud creciente hacia la cola).
   - Solo transform y opacity. Sin JS (.no-js) no se muestra: el contenido ya está en el HTML.
   - Colores: tokens de base.css con respaldo, así funciona también fuera del sitio.
   - Tema: oscuro por defecto (es el de OIBA). [data-theme="light"] invierte los colores. */

.oiba-loader {
  --oiba-loader-img: url("../img/brand/ajolote-ivory.png");
  --oiba-loader-bg: var(--deep, #06111F);
  --oiba-loader-axo: var(--ivory, #F5F1E8);
  --oiba-loader-orbit: var(--gold, #C4A46B);
  --oiba-loader-glow: rgb(223 200 148 / 0.16);
  --oiba-loader-ring: rgb(196 164 107 / 0.24);
  --oiba-loader-text: var(--ivory, #F5F1E8);

  /* Diámetro de la órbita: 180 px por defecto, nunca más de lo que cabe en la pantalla */
  --s: min(var(--oiba-loader-size, 180px), 62vw, 46svh);
  --L: calc(var(--s) * 0.38);            /* largo del ajolote */
  --n: 24;                               /* bandas en que se corta */
  --W: calc(var(--L) * 0.7007);          /* ancho: proporción 796 × 1136 del PNG */
  --period: 7s;                          /* una vuelta */

  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--oiba-loader-bg);
  color: var(--oiba-loader-text);
}
.oiba-loader[data-theme="light"], [data-theme="light"] .oiba-loader {
  --oiba-loader-bg: var(--ivory, #F5F1E8);
  --oiba-loader-axo: var(--navy, #081A2D);
  --oiba-loader-orbit: var(--gold-deep, #7C6339);
  --oiba-loader-glow: rgb(124 99 57 / 0.09);
  --oiba-loader-ring: rgb(124 99 57 / 0.32);
  --oiba-loader-text: var(--navy, #081A2D);
}
/* Sin JavaScript no hay nada que esperar: el contenido ya está en el HTML */
.no-js .oiba-loader { display: none; }

/* El fondo cubre desde el primer instante (es el mismo azul de la página); la órbita y el texto
   aparecen tras 160 ms, así una carga rápida no deja ningún parpadeo. */
.oiba-loader__stage {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--s) * 0.14 + var(--W) / 2);   /* el ajolote sobresale del aro media anchura */
  padding: calc(var(--W) / 2);
  animation: oiba-loader-in 240ms cubic-bezier(0.23, 1, 0.32, 1) 160ms both;
}
.oiba-loader.is-leaving {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 280ms;
}
/* Al salir, la entrada del escenario se congela: si aún no había aparecido, no asoma durante el fundido */
.oiba-loader.is-leaving .oiba-loader__stage { animation-play-state: paused; }
/* Solo en el sitio estático: si un script falla, la página nunca queda tapada */
.oiba-loader[data-failsafe] { animation: oiba-loader-failsafe 0s linear 6s forwards; }

/* ---------- Órbita ---------- */
.oiba-loader__orbit {
  position: relative; width: var(--s); height: var(--s); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--oiba-loader-ring);
  animation: oiba-loader-orbit var(--period) linear infinite;
}
/* Estela: arco que se desvanece detrás del ajolote (gira con él) */
.oiba-loader__trail {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 220deg, var(--oiba-loader-orbit) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
/* El nadador vive en el punto más alto del aro y la órbita lo lleva en círculo */
.oiba-loader__swimmer { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.oiba-loader__glow {
  position: absolute; width: calc(var(--L) * 1.3); height: calc(var(--L) * 1.3);
  left: calc(var(--L) * -0.65); top: calc(var(--L) * -0.65);
  background: radial-gradient(closest-side, var(--oiba-loader-glow), transparent);
}
/* El PNG tiene la cabeza arriba: girado 90° la cabeza apunta en el sentido del giro */
.oiba-loader__axo {
  position: absolute; width: var(--W); height: var(--L);
  left: calc(var(--W) / -2); top: calc(var(--L) / -2);
  transform: rotate(90deg);
}
/* Bandas: --n cortes del mismo PNG. --q va de 0 (cabeza) a 1 (cola) */
.oiba-loader__axo > span {
  --q: calc((var(--i) + 0.5) / var(--n));
  --sf: calc(var(--q) - 0.5);
  --a: calc(var(--q) * var(--q) * var(--L) * 0.09);   /* amplitud: crece hacia la cola */
  position: absolute; left: 0; width: 100%;
  top: calc(var(--i) * var(--L) / var(--n));
  height: calc(var(--L) / var(--n) + 2px);             /* 2 px de traslape: sin costuras entre capas */
  background: var(--oiba-loader-img) 0 calc(var(--i) * var(--L) / var(--n) * -1) / var(--W) var(--L) no-repeat;
  /* El cuerpo sigue la curva del aro: los extremos se acercan al centro de la órbita */
  translate: calc(var(--sf) * var(--sf) * var(--L) * 0.42) 0;
  animation: oiba-loader-sway 0.7s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  animation-delay: calc(var(--q) * -0.9s);             /* la onda viaja de la cabeza a la cola */
}
/* Tema claro: la misma silueta teñida con la máscara del PNG */
.oiba-loader[data-theme="light"] .oiba-loader__axo > span,
[data-theme="light"] .oiba-loader .oiba-loader__axo > span {
  background: var(--oiba-loader-axo);
  -webkit-mask: var(--oiba-loader-img) 0 calc(var(--i) * var(--L) / var(--n) * -1) / var(--W) var(--L) no-repeat;
          mask: var(--oiba-loader-img) 0 calc(var(--i) * var(--L) / var(--n) * -1) / var(--W) var(--L) no-repeat;
}

/* ---------- Mensaje ---------- */
.oiba-loader__text {
  margin: 0; font-family: var(--font-body, "Exo 2", system-ui, sans-serif);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; white-space: pre; text-align: center;
}
.oiba-loader__text [aria-hidden] > span {
  display: inline-block;
  animation: oiba-loader-letter 1.8s ease-in-out infinite;
  animation-delay: calc(var(--k) * 90ms);
}
.oiba-loader__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@keyframes oiba-loader-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes oiba-loader-orbit { to { transform: rotate(360deg); } }
@keyframes oiba-loader-sway {
  from { transform: translateX(calc(var(--a) * -1)); }
  to   { transform: translateX(var(--a)); }
}
@keyframes oiba-loader-letter { 0%, 100% { opacity: 0.55; } 45% { opacity: 1; } }
@keyframes oiba-loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Movimiento reducido: el ajolote queda quieto en su órbita y el mensaje, fijo y legible.
   (base.css ya reduce todas las animaciones; aquí se declara para que valga también fuera del sitio.) */
@media (prefers-reduced-motion: reduce) {
  .oiba-loader__orbit, .oiba-loader__axo > span, .oiba-loader__text [aria-hidden] > span { animation: none; }
  .oiba-loader__stage { animation: oiba-loader-fade 200ms ease-out 160ms both; }
  @keyframes oiba-loader-fade { from { opacity: 0; } to { opacity: 1; } }
}