:root {
  /* Tamaño del logo: 300px como máximo, escala con la pantalla */
  --is1: min(300px, 72vmin);
}

html {
  height: 100%;
}

.body {
  position: relative;
  height: 100vh;   /* respaldo */
  height: 100dvh;  /* alto visible real en móvil (sin la barra del navegador) */
  margin: 0;
  overflow: hidden;
  background-color: #23232c;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Fondo de metal líquido: degradados pintados UNA vez; solo se anima transform (GPU, sin repintado) */
.body::before {
  content: "";
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: -1;

  background:
    /* Brillo de superficie */
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    /* Ondas de interferencia */
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0px, transparent 1px, transparent 40px),
    /* Metal líquido */
    linear-gradient(225deg,
      #050505 0%,
      #1a1a1a 35%,
      #333333 50%,
      #1a1a1a 65%,
      #050505 100%
    );

  will-change: transform;
  animation: mercury-flow 25s ease-in-out infinite alternate;
}

/* Viñeta perimetral para resaltar el centro (estática) */
.body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at center, transparent 20%, rgba(0, 0, 0, 0.7) 100%);
}

/* Desplazamiento máx. 8% de la capa (= 12% del viewport) < margen del 25%: nunca deja bordes al aire */
@keyframes mercury-flow {
  0% {
    transform: translate3d(-8%, -6%, 0) scale(1.1) rotate(0deg);
  }
  50% {
    transform: translate3d(8%, 6%, 0) scale(1.2) rotate(1deg);
  }
  100% {
    transform: translate3d(-4%, 8%, 0) scale(1.1) rotate(-1deg);
  }
}

/* Logo de carga: desenfoque como filtro CSS del <svg> (GPU) en lugar de feGaussianBlur por fotograma */
.bochIc {
  width: var(--is1);
  height: var(--is1);
  /* σ = 8 unidades de un viewBox de 360 → proporcional al tamaño del logo */
  filter: blur(calc(var(--is1) * 8 / 360));
  will-change: filter;
}

/* Anula filter="url(#blur)" del SVG (el CSS gana al atributo de presentación) */
.bochIc > g {
  filter: none;
}

/* transform-origin = centro exacto de cada círculo (cx, cy del SVG) */
.loadA1 {
  transform-origin: 150px 100px;
  animation: girar 3s linear infinite;
}

.loadA2 {
  transform-origin: 106.7px 175px;
  animation: girar 3s linear infinite;
}

.loadA3 {
  transform-origin: 193.3px 175px;
  animation: girar 3s linear infinite;
}

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

/* Soporte para dispositivos con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .body::before,
  .loadA1,
  .loadA2,
  .loadA3 {
    animation: none;
  }
}

.form {
  display: flex;
  flex-direction: column;
  background-color: #fff2;
  padding: 1rem;
  border-radius: 1rem;
  gap: 0.5rem;
}