/*
 * Loader de arranque: lo que pinta index.html antes de que Vite cargue el
 * bundle. Va acá, fuera de src/, porque en ese momento todavía no existe ni
 * Tailwind ni antd ni React.
 *
 * Es el mismo diseño que `src/components/Loader` (logo, costura, aguja,
 * etiqueta), escrito a mano. Las animaciones están duplicadas a propósito: en
 * la aplicación viven en el `@theme` de `src/index.css`, y ese archivo todavía
 * no se cargó cuando esto se muestra. **Si cambia uno, cambia el otro.**
 *
 * React reemplaza el contenido de #root al montar, así que esto desaparece solo.
 */

body {
  padding: 0;
  margin: 0;
  background-color: #f6f5f2;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pyr-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f5f2;
}

.pyr-boot__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  animation: pyrRise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.pyr-boot__logo {
  display: block;
  height: 44px;
  width: auto;
}

/* La costura: riel gris con la puntada naranja corriendo por dentro. */
.pyr-boot__seam {
  position: relative;
  width: 230px;
  height: 22px;
}

.pyr-boot__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 3px;
  border-radius: 2px;
  background: #e6e1d9;
  overflow: hidden;
}

/*
 * El ciclo cierra porque el desplazamiento (-24px, en pyrSeam) es exactamente
 * el período del gradiente: 13px de puntada + 11px de hueco. Si se toca uno hay
 * que tocar el otro, o la costura tironea en cada vuelta.
 */
.pyr-boot__stitch {
  position: absolute;
  inset: 0 -24px 0 0;
  background: repeating-linear-gradient(90deg, #ff5c00 0 13px, transparent 13px 24px);
  animation: pyrSeam 0.55s linear infinite;
}

/* La aguja: va y viene sobre el riel, con un rebote propio. */
.pyr-boot__needle {
  position: absolute;
  top: 2px;
  width: 0;
  animation: pyrNeedle 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.pyr-boot__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5c00;
  box-shadow: 0 0 0 5px rgba(255, 92, 0, 0.14);
  transform: translate(-50%, 0);
  animation: pyrBob 0.95s ease-in-out infinite;
}

.pyr-boot__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8c8c8c;
  animation: pyrDim 1.6s ease-in-out infinite;
}

@keyframes pyrRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes pyrSeam {
  to { transform: translateX(-24px); }
}
@keyframes pyrNeedle {
  0%, 100% { left: 0; }
  50% { left: 100%; }
}
@keyframes pyrBob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -4px); }
}
@keyframes pyrDim {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pyr-boot__stack,
  .pyr-boot__stitch,
  .pyr-boot__needle,
  .pyr-boot__dot,
  .pyr-boot__label {
    animation: none;
  }
}