/**
 * Custom cursor — dot + trailing ring (maquettes V2).
 * Active only when html.has-custom-cursor (fine pointer, no reduced motion).
 */

html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none !important;
}

.camomille-cursor {
  width: 8px;
  height: 8px;
  background: var(--color-dark);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.2s ease,
    height 0.2s ease,
    background 0.2s ease;
  opacity: 0;
}

.camomille-cursor-ring {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--color-dark);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease, border-color 0.2s ease;
}

html.has-custom-cursor .camomille-cursor.is-ready,
html.has-custom-cursor .camomille-cursor-ring.is-ready {
  opacity: 1;
}

html.has-custom-cursor .camomille-cursor-ring.is-ready {
  opacity: 0.28;
}

html.has-custom-cursor .camomille-cursor-ring.is-hover {
  opacity: 0.15;
  width: 40px;
  height: 40px;
}