/* ============================================================
   EYUB' - carga.css
   Pantalla de entrada, transiciones entre páginas y
   animaciones de aparición.
   ============================================================ */


/* ============================================================
   1. PANTALLA DE ENTRADA
   ------------------------------------------------------------
   Los estilos imprescindibles van en línea dentro del <head>,
   para que la pantalla se pinte antes de que llegue esta hoja.
   Aquí vive el resto.
   ============================================================ */

.carga {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--fondo, #fff);
  transition: opacity .55s var(--ease-out, ease), visibility .55s;
}

/* Sale de escena sin dejar rastro ni bloquear clics */
.carga.se-va {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
   Salvavidas: si el JavaScript falla o nunca llega, la pantalla
   se aparta sola. Nadie debe quedarse encerrado en un loader.

   Va a 9 s con holgura: el ciclo normal (3 s de mínimo + hasta
   2,5 s de espera por imágenes + medio segundo de desvanecido)
   termina antes de 6,5 s. Si esto llega a dispararse, es que algo
   se rompió de verdad.
*/
.carga { animation: carga-rescate 0s linear 9s forwards; }
@keyframes carga-rescate { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.carga__caja {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}


/* ---------- El sello en su órbita ---------- */

.carga__orbita {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}

/* Anillo de fondo, quieto */
.carga__orbita::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 61, 145, .12);
}

/* Anillo que gira: solo un arco visible */
.carga__anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--azul-interactivo, #012E8C);
  border-right-color: rgba(1, 28, 89, .35);
  animation: carga-girar 1.15s linear infinite;
}

/* Segundo anillo, más lento y al revés: da sensación de sistema */
.carga__anillo--lento {
  inset: 13px;
  border-top-color: transparent;
  border-left-color: rgba(11, 61, 145, .30);
  animation: carga-girar 2.1s linear infinite reverse;
}

@keyframes carga-girar { to { transform: rotate(360deg); } }

.carga__sello {
  width: 74px;
  height: 74px;
  object-fit: contain;
  animation: carga-latir 2.4s var(--ease, ease) infinite;
}

@keyframes carga-latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}


/* ---------- Marca y progreso ---------- */

.carga__marca {
  width: min(158px, 46vw);
  height: auto;
  opacity: 0;
  animation: carga-marca .7s var(--ease-out, ease) .25s forwards;
}

@keyframes carga-marca {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.carga__lema {
  display: block;
  margin-top: -.4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-ter, #7C93B3);
  opacity: 0;
  animation: carga-marca .7s var(--ease-out, ease) .45s forwards;
}

.carga__barra {
  width: min(200px, 60vw);
  height: 3px;
  background: rgba(11, 61, 145, .12);
  border-radius: 999px;
  overflow: hidden;
}
.carga__barra span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-corporativo, #012E8C), var(--marca, #E01B24));
  transition: width .3s var(--ease-out, ease);
}

/* Modo oscuro */
[data-tema="oscuro"] .carga__orbita::before { border-color: rgba(255, 255, 255, .12); }
[data-tema="oscuro"] .carga__barra          { background: rgba(255, 255, 255, .14); }


/* ---------- Sin animación, para quien la desactivó ---------- */
@media (prefers-reduced-motion: reduce) {
  .carga__anillo, .carga__sello { animation: none; }
  .carga__anillo { border-color: rgba(1, 28, 89, .35); }
}


/* ============================================================
   2. ENTRADA Y SALIDA DE PÁGINA
   ------------------------------------------------------------
   Al pulsar un enlace la página se desvanece; la siguiente
   entra sola. Se siente continuo sin retrasar la navegación.
   ============================================================ */

/* La página que se va */
html.saliendo body {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease, ease), transform .2s var(--ease, ease);
}

/* La página que llega */
.entrada-pagina {
  animation: pagina-entra .55s var(--ease-out, ease) both;
}

@keyframes pagina-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.saliendo body { opacity: 1; transform: none; transition: none; }
  .entrada-pagina    { animation: none; }
}


/* ============================================================
   3. APARICIONES AL DESPLAZARSE
   ------------------------------------------------------------
   Variantes que se suman a .revelar de base.css.
   ============================================================ */

/* Emerge con un desenfoque muy leve: se siente más suave.
   Usa `translate` y no `transform`, para no anular el hover del
   elemento revelado. La razón larga está en base.css. */
.revelar--suave {
  opacity: 0;
  filter: blur(6px);
  translate: 0 20px;
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--retraso, 0ms);
}
.revelar--suave.visible { opacity: 1; filter: none; translate: none; }

/* La fotografía se descubre de abajo hacia arriba */
.revelar--cortina {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
  transition-delay: var(--retraso, 0ms);
}
.revelar--cortina.visible { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .revelar--suave, .revelar--cortina {
    opacity: 1 !important;
    filter: none !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/* ============================================================
   4. DETALLE: BRILLO QUE RECORRE LA BARRA DE PROGRESO
   ============================================================ */

.progreso { overflow: hidden; }
.progreso::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: progreso-brillo 2.4s var(--ease) infinite;
}
@keyframes progreso-brillo {
  from { transform: translateX(-100px); }
  to   { transform: translateX(calc(100vw + 100px)); }
}
@media (prefers-reduced-motion: reduce) {
  .progreso::after { animation: none; display: none; }
}