/* =====================================================================
 * Royal Nature — Enhancements de UX
 * 1) Scrollbar ultra-fina que crece al hover
 * 2) Cursor minimalista (punto) solo en desktop con mouse
 * Sin dependencias. Safe para mobile: el cursor queda deshabilitado
 * en dispositivos táctiles mediante media query.
 * ===================================================================== */

/* ------ 1. SCROLLBAR ULTRA-FINA ------ */

/* Chrome, Edge, Safari, Opera */
html {
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  transition: width 0.2s ease;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(20, 138, 44, 0.15); /* verde marca muy tenue */
  border-radius: 10px;
  transition: background 0.2s ease;
}

/* Cuando el mouse está sobre la página, el scrollbar gana visibilidad */
html:hover ::-webkit-scrollbar-thumb {
  background: rgba(20, 138, 44, 0.35);
}

/* Hover directo sobre el thumb → verde sólido */
::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 138, 44, 0.75);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(20, 138, 44, 1);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 138, 44, 0.15) transparent;
}
*:hover {
  scrollbar-color: rgba(20, 138, 44, 0.35) transparent;
}


/* ------ 2. CURSOR MINIMALISTA (solo desktop con mouse) ------
 *
 * El cursor nativo NO se oculta — lo dejamos visible para accesibilidad
 * y para que nunca se pierda el puntero. Encima de él ponemos un
 * pequeño punto azul que sigue el movimiento con una transición suave.
 *
 * En dispositivos táctiles el punto queda oculto (no tiene sentido).
 */

/* Wrapper del cursor custom (inyectado por el JS) */
#rn-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #148a2c;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.18s ease,
              height 0.18s ease,
              background-color 0.18s ease,
              opacity 0.2s ease;
  opacity: 0;
  mix-blend-mode: normal;
  will-change: transform;
}

/* Visible ya cuando el JS arranca */
#rn-cursor-dot.is-active {
  opacity: 0.9;
}

/* Al pasar sobre algo clickeable → el punto crece y se vuelve semitransparente */
#rn-cursor-dot.is-hover {
  width: 28px;
  height: 28px;
  background: rgba(20, 138, 44, 0.25);
}

/* Ocultar completamente en pantallas táctiles / sin mouse preciso */
@media (hover: none), (pointer: coarse) {
  #rn-cursor-dot {
    display: none !important;
  }
}

/* Respetar preferencia del usuario de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  #rn-cursor-dot {
    transition: opacity 0.2s ease;
  }
}