/*
  loader-saya.css — Pantalla de carga Método Saya
  Velo negro vidriado + 4 cuadrados girando. Fuente única para la web pública
  (.sg-loader) y para el área de usuario (.home-updating, nombres heredados).

  La animación es 100% CSS y se mide en porcentajes del propio icono, así que
  el velo y los cuadrados aparecen juntos en el primer pintado y escalan solos
  en cualquier viewport sin depender de JavaScript.
*/

:root {
  /* ~96px en móvil (el tamaño histórico del icono) y escala hasta escritorio. */
  --sg-loader-size: clamp(72px, 24vmin, 140px);
  --sg-loader-cell: 24%;
  --sg-loader-radius: 12%;
  /* Separación de cada cuadrado respecto al centro, en % de su propio lado. */
  --sg-loader-dx: 64%;
  --sg-loader-veil: rgba(0, 0, 0, 0.62);
  --sg-loader-blur: 22px;
  --sg-loader-spin: 2400ms;
  --sg-loader-in: 240ms;
  --sg-loader-out: 320ms;
  --sg-loader-z: 30000;
}

.sg-loader,
.home-updating {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--sg-loader-z);
  width: auto;
  height: auto;
  /*
    100lvh (no dvh): un elemento fixed en iOS se ancla al viewport grande, así
    que con dvh quedaría una franja sin cubrir al ocultarse las barras.
  */
  min-height: 100%;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
}

.sg-loader[hidden],
.home-updating[hidden] {
  display: none !important;
}

.sg-loader__layer,
.home-updating__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 100%;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vmin, 20px);
  box-sizing: border-box;
  padding:
    max(env(safe-area-inset-top), 0px)
    max(env(safe-area-inset-right), 0px)
    max(env(safe-area-inset-bottom), 0px)
    max(env(safe-area-inset-left), 0px);
  background: var(--sg-loader-veil);
  -webkit-backdrop-filter: blur(var(--sg-loader-blur)) saturate(1.2);
  backdrop-filter: blur(var(--sg-loader-blur)) saturate(1.2);
}

/* Sin backdrop-filter (Firefox antiguo, modo ahorro) el velo se opaca más. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .sg-loader__layer,
  .home-updating__layer {
    background: rgba(0, 0, 0, 0.88);
  }
}

.sg-loader__txt,
.home-updating__txt {
  margin: 0;
  max-width: min(30ch, 84vw);
  color: #fff;
  font-family: "Dosis", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.sg-loader__txt:empty,
.home-updating__txt:empty {
  display: none;
}

/* Pantallas muy bajas (móvil en horizontal): solo icono, sin texto. */
@media (max-height: 420px) and (orientation: landscape) {
  .sg-loader__txt,
  .home-updating__txt {
    display: none;
  }
}

/* ====== Icono: 4 cuadrados ====== */

.sg-loader__icon,
.bh-grid-entry-loading {
  position: relative;
  flex: 0 0 auto;
  width: var(--sg-loader-size);
  height: var(--sg-loader-size);
}

.sg-loader__spin,
.bh-grid-entry-loading__spin {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: sgLoaderSpin var(--sg-loader-spin) linear infinite;
  will-change: transform;
}

.sg-loader__cell,
.bh-grid-entry-loading__cell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sg-loader-cell);
  height: var(--sg-loader-cell);
  border-radius: var(--sg-loader-radius);
  background-color: #fff;
  transform: translate(-50%, -50%);
  animation: sgLoaderCellTL var(--sg-loader-spin) ease-in-out infinite;
  will-change: transform;
}

.sg-loader__cell:nth-child(2),
.bh-grid-entry-loading__cell:nth-child(2) {
  animation-name: sgLoaderCellTR;
}

.sg-loader__cell:nth-child(3),
.bh-grid-entry-loading__cell:nth-child(3) {
  animation-name: sgLoaderCellBL;
}

.sg-loader__cell:nth-child(4),
.bh-grid-entry-loading__cell:nth-child(4) {
  animation-name: sgLoaderCellBR;
}

@keyframes sgLoaderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sgLoaderCellTL {
  0%, 26% { transform: translate(calc(-50% - var(--sg-loader-dx)), calc(-50% - var(--sg-loader-dx))); }
  48%, 58% { transform: translate(-50%, -50%); }
  80%, 100% { transform: translate(calc(-50% - var(--sg-loader-dx)), calc(-50% - var(--sg-loader-dx))); }
}

@keyframes sgLoaderCellTR {
  0%, 26% { transform: translate(calc(-50% + var(--sg-loader-dx)), calc(-50% - var(--sg-loader-dx))); }
  48%, 58% { transform: translate(-50%, -50%); }
  80%, 100% { transform: translate(calc(-50% + var(--sg-loader-dx)), calc(-50% - var(--sg-loader-dx))); }
}

@keyframes sgLoaderCellBL {
  0%, 26% { transform: translate(calc(-50% - var(--sg-loader-dx)), calc(-50% + var(--sg-loader-dx))); }
  48%, 58% { transform: translate(-50%, -50%); }
  80%, 100% { transform: translate(calc(-50% - var(--sg-loader-dx)), calc(-50% + var(--sg-loader-dx))); }
}

@keyframes sgLoaderCellBR {
  0%, 26% { transform: translate(calc(-50% + var(--sg-loader-dx)), calc(-50% + var(--sg-loader-dx))); }
  48%, 58% { transform: translate(-50%, -50%); }
  80%, 100% { transform: translate(calc(-50% + var(--sg-loader-dx)), calc(-50% + var(--sg-loader-dx))); }
}

/* ====== Entrada y salida del velo ====== */

.sg-loader.is-entering,
.home-updating.is-entering {
  animation: sgLoaderIn var(--sg-loader-in) ease-out both;
}

@keyframes sgLoaderIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sgLoaderOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/*
  Red de seguridad del arranque: si el JS no llega a ocultar el velo (error,
  bloqueo de scripts), se desvanece solo y deja la página usable.
*/
.sg-loader--boot {
  animation: sgLoaderFailsafe 12s linear forwards;
}

@keyframes sgLoaderFailsafe {
  0%, 92% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* Debe declararse después del failsafe para poder anularlo. */
.sg-loader.is-leaving,
.home-updating.is-leaving {
  animation: sgLoaderOut var(--sg-loader-out) ease-in both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sg-loader__spin,
  .bh-grid-entry-loading__spin {
    animation: none;
  }

  .sg-loader__cell,
  .bh-grid-entry-loading__cell,
  .sg-loader__cell:nth-child(2),
  .bh-grid-entry-loading__cell:nth-child(2),
  .sg-loader__cell:nth-child(3),
  .bh-grid-entry-loading__cell:nth-child(3),
  .sg-loader__cell:nth-child(4),
  .bh-grid-entry-loading__cell:nth-child(4) {
    animation: sgLoaderCellFade 1.6s ease-in-out infinite;
  }

  /* Sin movimiento los cuadrados quedan fijos en las 4 esquinas. */
  .sg-loader__cell:nth-child(1),
  .bh-grid-entry-loading__cell:nth-child(1) {
    transform: translate(calc(-50% - var(--sg-loader-dx)), calc(-50% - var(--sg-loader-dx)));
  }

  .sg-loader__cell:nth-child(2),
  .bh-grid-entry-loading__cell:nth-child(2) {
    transform: translate(calc(-50% + var(--sg-loader-dx)), calc(-50% - var(--sg-loader-dx)));
  }

  .sg-loader__cell:nth-child(3),
  .bh-grid-entry-loading__cell:nth-child(3) {
    transform: translate(calc(-50% - var(--sg-loader-dx)), calc(-50% + var(--sg-loader-dx)));
  }

  .sg-loader__cell:nth-child(4),
  .bh-grid-entry-loading__cell:nth-child(4) {
    transform: translate(calc(-50% + var(--sg-loader-dx)), calc(-50% + var(--sg-loader-dx)));
  }

  .sg-loader.is-entering,
  .home-updating.is-entering,
  .sg-loader.is-leaving,
  .home-updating.is-leaving {
    animation: none;
  }

  .sg-loader.is-leaving,
  .home-updating.is-leaving {
    opacity: 0;
  }
}

@keyframes sgLoaderCellFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}