/* ═══════════════════════════════════════════════════════════════════
   WIU WIU WIU · la pantalla de carga que abre Las 3 Fugas
   Es lo que quedó del juego de la ambulancia de la revista. El juego
   completo sigue en Lead Magnet 3 Fugas/fuente-juego.
   ═══════════════════════════════════════════════════════════════════ */
#carga{
  --c-suave:cubic-bezier(.23,1,.32,1);
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;
  background:rgba(2,13,17,.12);color:#ECEFF0;font-family:'Unageo',system-ui,sans-serif;text-align:center;
  opacity:1;transition:opacity .55s var(--c-suave);
}
#carga[hidden]{display:none}
/* Red de seguridad: si el JS nunca corre, la carga se quita sola a los 7 s. */
#carga{animation:cargaSeguro 0s 7s forwards}
@keyframes cargaSeguro{to{visibility:hidden;opacity:0;pointer-events:none}}
#carga.se-va{opacity:0;pointer-events:none}
html.cargando,html.cargando body{overflow:hidden!important}

#carga .cielo{position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 24%,rgba(255,255,255,.6) 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 46% 12%,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(2px 2px at 78% 78%,rgba(94,199,206,.62) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 18%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 88%,rgba(94,199,206,.45) 50%,transparent 51%);
  background-size:640px 640px;}

#carga .caja{position:relative;width:100%;max-width:34rem;}
#carga .wiu{display:flex;flex-direction:column;gap:.1em;align-items:center;
  font-weight:900;line-height:1;letter-spacing:.18em;font-size:clamp(30px,7vw,58px);margin-bottom:clamp(22px,4vw,34px);}
#carga .wiu span{opacity:0;color:#FF3B4E;text-shadow:0 0 22px rgba(255,59,78,.5)}
#carga .wiu span:nth-child(2){color:#ECEFF0;text-shadow:0 0 22px rgba(255,255,255,.35)}
#carga .wiu span:nth-child(3){color:#5EC7CE;text-shadow:0 0 22px rgba(94,199,206,.5)}
#carga .wiu span{animation:cargaWiu 1.5s var(--c-suave) infinite}
#carga .wiu span:nth-child(2){animation-delay:.18s}
#carga .wiu span:nth-child(3){animation-delay:.36s}
@keyframes cargaWiu{0%{opacity:0;transform:translateY(6px)}18%{opacity:1;transform:none}70%{opacity:.15}100%{opacity:0}}

#carga .carga-texto{color:#A9BABD;font-size:clamp(14px,2vw,16px);letter-spacing:.1em;margin-bottom:1.4em;}
/* El relleno se revela con clip-path: el degradado no se estira. --avance lo mueve el JS. */
#carga .barra-carga{width:min(19rem,72vw);height:5px;margin:0 auto;border-radius:999px;background:rgba(236,239,240,.12);overflow:hidden;}
#carga .barra-carga i{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,#1F7A80,#5EC7CE);box-shadow:0 0 14px rgba(94,199,206,.7);
  clip-path:inset(0 calc(100% - var(--avance,0%)) 0 0);transition:clip-path .3s var(--c-suave);}

@media (prefers-reduced-motion:reduce){
  #carga .wiu span{animation:none;opacity:.9}
  #carga .barra-carga i{transition:none}
}

/* La misma lluvia atraviesa la carga y la puerta. La máscara atenúa el
   centro del formulario sin añadir sombras sobre la tinta cosmos. */
#lluvia{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(0,0,0,.12) 0,rgba(0,0,0,.45) 48%,#000 100%);
  mask-image:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(0,0,0,.12) 0,rgba(0,0,0,.45) 48%,#000 100%);}
/* La carga es translúcida para que se vea la lluvia, así que la puerta espera
   detrás. Si la salida de seguridad de la carga actúa, el mismo reloj la libera. */
html.cargando #puerta{visibility:hidden;animation:puertaSeguro 0s 7s forwards;}
@keyframes puertaSeguro{to{visibility:visible;}}