/* ==============================================
   MOSOLO COOP — Curseur personnalisé
   ============================================== */

/* Masquer le curseur natif sur tout le site */
*, *::before, *::after {
  cursor: none !important;
}

/* Anneau extérieur */
#mc-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 107, 0, 0.70);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition:
    width   0.30s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height  0.30s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.25s ease,
    background   0.25s ease,
    opacity 0.25s ease;
  will-change: transform;
  mix-blend-mode: normal;
}

/* Point intérieur */
#mc-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  background: #FF6B00;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  transition: width 0.20s ease, height 0.20s ease, background 0.20s ease, opacity 0.20s ease;
  will-change: transform;
}

/* ---- État HOVER (liens, boutons, images) ---- */
#mc-cursor-ring.mc-hover {
  width: 58px;
  height: 58px;
  border-color: rgba(255, 107, 0, 0.90);
  background: rgba(255, 107, 0, 0.08);
}

#mc-cursor-dot.mc-hover {
  width: 5px;
  height: 5px;
  background: #FF5000;
}

/* ---- État CLICK ---- */
#mc-cursor-ring.mc-click {
  width: 30px;
  height: 30px;
  background: rgba(255, 107, 0, 0.15);
  border-color: #FF5000;
  transition: width 0.10s ease, height 0.10s ease, background 0.10s ease;
}

/* ---- État TEXTE (inputs, textarea) ---- */
#mc-cursor-ring.mc-text {
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: rgba(255, 107, 0, 0.80);
  border-color: transparent;
}

#mc-cursor-dot.mc-text {
  opacity: 0;
}

/* ---- État masqué (quand souris quitte la fenêtre) ---- */
#mc-cursor-ring.mc-hidden,
#mc-cursor-dot.mc-hidden {
  opacity: 0;
}