/* =========================================================
   UFY PHONE — PANTALLA DE CARGA
   Se ve desde el primer instante (perfil.html pone la clase
   ufy-phone-booting en <html> y #ufyPhoneBoot es lo primero del
   <body>), hasta que UFY Phone termina de dibujar el teléfono, la
   pantalla de entrar o un aviso (public/js/ufy-phone/boot-screen.js).
   Así nunca se ve la página a medio armar ("parpadeo").
   ========================================================= */

.ufy-phone-boot {
  position: fixed;
  inset: 0;
  z-index: 2147483000;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(121, 74, 206, 0.42),
      transparent 48%
    ),
    #020207;
}


html:not(.ufy-phone-booting) .ufy-phone-boot {
  display: none;
}


/* Por si boot-screen.js no llegara a descargarse (red mala): a los 20
   segundos la pantalla de carga se aparta sola y deja ver lo que haya.
   Si después se vuelve a mostrar, la cuenta empieza de nuevo. */
.ufy-phone-boot {
  animation: ufy-phone-boot-give-up 0s linear 20s forwards;
}


@keyframes ufy-phone-boot-give-up {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}


/* Mientras carga, no se puede desplazar la página de detrás. */
html.ufy-phone-booting,
html.ufy-phone-booting body {
  overflow: hidden;
}


.ufy-phone-boot-mark {
  width: 74px;
  height: 74px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(214, 191, 255, 0.52);
  border-radius: 23px;

  color: #e7d9ff;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 23px;
  font-weight: 780;
  letter-spacing: 1.5px;

  background:
    linear-gradient(
      145deg,
      rgba(143, 83, 241, 0.34),
      rgba(63, 35, 117, 0.22)
    );

  box-shadow:
    0 0 24px
    rgba(126, 72, 221, 0.34);

  animation: ufy-phone-boot-pulse 1.4s ease-in-out infinite;
}


@keyframes ufy-phone-boot-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {
  .ufy-phone-boot-mark {
    animation: none;
  }
}