/* ================================================================
   FRAN96MC.ES — includes/precarga.css
   Pantalla de carga que SOLO llega a verse si las fotos grandes de
   la cabecera (la mascota y el fondo de .fm-banda) tardan de verdad.
   Nace en opacity:0 y pointer-events:none: si las fotos cargan al
   instante, includes/precarga.js nunca le añade la clase que la
   muestra, así que no hay ningún parpadeo en la carga normal. Y
   cada plataforma precarga esas mismas fotos con <link rel=preload>
   en el <head> (ver cada index.html), así que lo normal es que esta
   pantalla no llegue a encenderse nunca: es el plan B, no el plan A.

   El icono es un emoji propio de cada plataforma (lo pone el propio
   index.html dentro de .fm-precarga-emoji), para que la espera se
   sienta de esa plataforma y no de una genérica. El anillo que gira
   alrededor sí es común a las cinco, como hilo de familia. Los
   colores salen de --acento-pagina y --n-950 (includes/tokens.css),
   así que este fichero no necesita saber en qué sitio está.
   ================================================================ */
#fm-precarga{
  position:fixed;inset:0;z-index:999999;display:grid;place-items:center;gap:20px;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--acento-pagina) 16%,var(--n-950)) 0%,var(--n-950) 72%);
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
#fm-precarga.fm-precarga-on{opacity:1;pointer-events:auto}
#fm-precarga.fm-precarga-fuera{opacity:0!important;transition:opacity .45s ease}

#fm-precarga .fm-precarga-icono{position:relative;width:92px;height:92px;display:grid;place-items:center}
#fm-precarga .fm-precarga-anillo{
  position:absolute;inset:0;border-radius:50%;
  border:2.5px solid color-mix(in srgb,var(--acento-pagina) 55%,transparent);
  border-top-color:transparent;border-left-color:transparent;
  animation:fm-precarga-gira 1.15s linear infinite;
}
#fm-precarga .fm-precarga-emoji{
  display:block;font-size:2.6rem;line-height:1;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--acento-pagina) 70%,transparent));
  animation:fm-precarga-pulso 1.7s ease-in-out infinite;
}
#fm-precarga p{
  margin:0;color:color-mix(in srgb,var(--acento-pagina) 25%,#fff);
  font-family:var(--f-display,var(--f-cuerpo,system-ui));font-weight:700;font-size:.88rem;letter-spacing:.02em;
  opacity:.85;animation:fm-precarga-respira 1.8s ease-in-out infinite;
}
@keyframes fm-precarga-gira{to{transform:rotate(360deg)}}
@keyframes fm-precarga-pulso{0%,100%{transform:scale(.9) rotate(-4deg);opacity:.8}50%{transform:scale(1.08) rotate(4deg);opacity:1}}
@keyframes fm-precarga-respira{0%,100%{opacity:.55}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  #fm-precarga .fm-precarga-anillo,#fm-precarga .fm-precarga-emoji,#fm-precarga p{animation:none}
}