/* =========================================================
   FUSIÓN DIGITAL - Efectos visuales (reemplazo de Geroz)
   1. has_text_reveal_anim  -> reveal de línea completa
   2. text-split-up         -> texto que sube palabra por palabra
   3. Cursor custom dinámico
   ========================================================= */

/* ---------- 1 y 2. text-split-up / has_text_reveal_anim ---------- */
/* El JS envuelve el texto real (h1-h6, p, span) en un div .fd-anim-wrap
   y le va aplicando transform/opacity en cada scroll, de forma continua
   y reversible: si subes se esconde, si bajas vuelve a aparecer. */
.text-split-up,
.has_text_reveal_anim{
  overflow: hidden;
}
.fd-anim-wrap{
  display: block;
  will-change: transform, opacity;
}

/* ---------- 3. Cursor custom ---------- */
/* Solo se activa en dispositivos con mouse (pointer: fine), nunca en touch */
#fd-cursor-dot,
#fd-cursor-ring{
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
#fd-cursor-dot{
  width: 8px;
  height: 8px;
  background: var(--fd-accent, #FF6CAF);
  transition: opacity 0.2s ease;
}
#fd-cursor-ring{
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--fd-accent, #FF6CAF);
  transition: width 0.25s ease, height 0.25s ease,
              opacity 0.2s ease, border-color 0.25s ease,
              background-color 0.25s ease;
}

/* Estado "hover" sobre elementos interactivos: el anillo crece y se rellena */
body.fd-cursor-active #fd-cursor-ring.is-hovering{
  width: 60px;
  height: 60px;
  background-color: rgba(255, 108, 175, 0.12);
}

/* Oculta el cursor custom si el mouse sale de la ventana */
body.fd-cursor-hidden #fd-cursor-dot,
body.fd-cursor-hidden #fd-cursor-ring{
  opacity: 0;
}

/* Cuando el cursor custom está activo, ocultamos el cursor nativo del navegador
   (solo en desktop, nunca en mobile/touch) */
body.fd-cursor-active,
body.fd-cursor-active a,
body.fd-cursor-active button{
  cursor: none;
}

/* Respeta accesibilidad: si el usuario pide menos movimiento, desactivamos
   las animaciones de entrada y el cursor */
@media (prefers-reduced-motion: reduce){
  .fd-anim-wrap{
    transform: none !important;
    opacity: 1 !important;
  }
  #fd-cursor-dot,
  #fd-cursor-ring{
    display: none !important;
  }
}

/* En mobile no tiene sentido el cursor custom (no hay mouse) */
@media (max-width: 991px){
  #fd-cursor-dot,
  #fd-cursor-ring{
    display: none !important;
  }
  body.fd-cursor-active,
  body.fd-cursor-active a,
  body.fd-cursor-active button{
    cursor: auto;
  }
}