/* =============================================================================
   cursor-cta.css — "MUEVE PARA EXPLORER" (réplica 1:1 del MouseMoveCta de OMEGA)
   -----------------------------------------------------------------------------
   Aro tenue + cruceta (4 chevrons + punto) que se van poniendo ROJOS por turnos
   (derecha → abajo → izquierda → arriba) y vuelven a gris. + texto a la derecha.
   Aparece cuando el ratón lleva ~2s cerca del CENTRO; se oculta al alejarse.
   Colores/medidas/timing tomados del código fuente (GSAP) de OMEGA.
   ========================================================================== */

.mmc{
  /* por defecto, fijo y centrado en la pantalla (como en OMEGA, bajo el texto) */
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;                          /* oculto hasta que el ratón está quieto en el centro */
  transition: opacity .5s ease, transform .5s ease;   /* icono + texto = UN pack: aparecen y desaparecen JUNTOS, como una sola pieza */
}
.mmc.show{ opacity: 1; transform: translate(-50%, -50%) translateY(0); }
/* la animacion interna del icono (aro + flechas) SOLO corre mientras el pack es visible -> 100% sincronizada con el texto */
.mmc-circle, .mmc-ch{ animation-play-state: paused; }
.mmc.show .mmc-circle, .mmc.show .mmc-ch{ animation-play-state: running; }

.mmc-icon{ width: 120px; height: 120px; overflow: visible; display: block; }

/* ---- el aro tenue con degradado (gira lento, como la clase "rotate" de OMEGA) ---- */
.mmc-circle{
  fill: none;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: mmc-rot 9s linear infinite;
}
@keyframes mmc-rot{ to{ transform: rotate(360deg); } }

/* ---- los 4 chevrons: gris #ADADAD -> rojo #C40D2E + empujón de 1.6px hacia fuera ---- */
.mmc-ch{
  stroke: #ADADAD;
  stroke-width: 1;
  transform-box: fill-box;
  /* cada uno corre el MISMO bucle de 6s, pero su "pulso" cae en su 1/4 del ciclo */
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.215,.61,.355,1); /* ≈ power3.out */
}
.mmc-right{ animation-name: mmc-right; }
.mmc-down { animation-name: mmc-down;  }
.mmc-left { animation-name: mmc-left;  }
.mmc-up   { animation-name: mmc-up;    }

/* derecha: pulso en 0–25% del ciclo (out a 12.5%, vuelve a 25%) */
@keyframes mmc-right{
  0%    { stroke:#ADADAD; transform: translate(0,0); }
  12.5% { stroke:#C40D2E; transform: translate(1.6px,0); }
  25%   { stroke:#ADADAD; transform: translate(0,0); }
  100%  { stroke:#ADADAD; transform: translate(0,0); }
}
/* abajo: pulso en 25–50% */
@keyframes mmc-down{
  0%,25% { stroke:#ADADAD; transform: translate(0,0); }
  37.5%  { stroke:#C40D2E; transform: translate(0,1.6px); }
  50%,100%{ stroke:#ADADAD; transform: translate(0,0); }
}
/* izquierda: pulso en 50–75% */
@keyframes mmc-left{
  0%,50% { stroke:#ADADAD; transform: translate(0,0); }
  62.5%  { stroke:#C40D2E; transform: translate(-1.6px,0); }
  75%,100%{ stroke:#ADADAD; transform: translate(0,0); }
}
/* arriba: pulso en 75–100% */
@keyframes mmc-up{
  0%,75% { stroke:#ADADAD; transform: translate(0,0); }
  87.5%  { stroke:#C40D2E; transform: translate(0,-1.6px); }
  100%   { stroke:#ADADAD; transform: translate(0,0); }
}

/* ---- texto ---- */
.mmc-text{
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #6a6a6a;
  white-space: nowrap;
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce){
  .mmc-circle, .mmc-ch{ animation: none; }
}