/* Fondo de pantalla completa (Opcional si usas el preloader) */
.preloader-overlay {
  position: fixed;
  inset: 0;
  background-color: #090a0d; /* Cambia a #F2F2EE si prefieres fondo claro */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.preloader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Tamaño del Loader */
.vinkla-loader {
  width: 90px;
  aspect-ratio: 1;
  display: inline-flex;
}

.vinkla-loader svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Colores de piezas y rastros */
.piece-left { fill: #F2F2EE; } /* Usa #090a0d si el fondo es claro */
.piece-right { fill: #FF4400; }

.trail-left, .trail-right {
  fill: none;
  stroke: #FF4400;
  stroke-width: 2.5;
  stroke-linejoin: round;
  opacity: 0;
  transform-box: view-box;
}

/* Ejes matemáticos exactos */
.vinkla-rotor {
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: vinklaRotate 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.unit-left {
  transform-box: view-box;
  animation: vinklaSplitLeft 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.unit-right {
  transform-box: view-box;
  animation: vinklaSplitRight 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.trail-left {
  transform-origin: 70.25px 87.5px;
  animation: vinklaTrailPulse 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.trail-right {
  transform-origin: 122.5px 100.5px;
  animation: vinklaTrailPulse 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframes */
@keyframes vinklaSplitLeft {
  0%, 12%, 88%, 100% { transform: translate(0, 0); }
  40%, 60% { transform: translate(-12px, -12px); }
}

@keyframes vinklaSplitRight {
  0%, 12%, 88%, 100% { transform: translate(0, 0); }
  40%, 60% { transform: translate(12px, 12px); }
}

@keyframes vinklaTrailPulse {
  0%, 18%, 85%, 100% { transform: scale(1); opacity: 0; }
  40%, 60% { transform: scale(1.22); opacity: 0.85; }
}

@keyframes vinklaRotate {
  0%, 42% { transform: rotate(0deg); }
  68%, 100% { transform: rotate(90deg); }
}