/* ============================================================
   Waw Cursor — Frontend Animated CSS Cursor
   Cercle + point uniquement
   ============================================================ */

:root {
  --wc-color:        #1a1a2e;
  --wc-accent:       #4f8ef7;
  --wc-size:         40px;
  --wc-dot:          6px;
  --wc-blend:        normal;
  --wc-hide-default: none;
  --wc-speed:        0.12;
}

/* ── Hide native cursor ──────────────────────────────────────── */
html.wc-active,
html.wc-active * {
  cursor: var(--wc-hide-default) !important;
}

/* ── Outer ring ──────────────────────────────────────────────── */
#wc-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483647;
  mix-blend-mode: var(--wc-blend);
  will-change: transform;

  width:  var(--wc-size);
  height: var(--wc-size);
  border-radius: 50%;

  border: 1.5px solid var(--wc-color);
  background: transparent;

  transform: translate(-50%, -50%);
  transition:
    width  0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.2s ease,
    opacity 0.2s ease;

  opacity: 0;
}

/* ── Inner dot ───────────────────────────────────────────────── */
#wc-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483647;
  will-change: transform;
  mix-blend-mode: var(--wc-blend);

  width:  var(--wc-dot);
  height: var(--wc-dot);
  border-radius: 50%;
  background: var(--wc-accent);
  transform: translate(-50%, -50%);

  transition:
    width  0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease,
    opacity 0.2s ease;

  opacity: 0;
}

/* ── Hover state on links & buttons ──────────────────────────── */
html.wc-active.wc-hover #wc-ring {
  width:  calc(var(--wc-size) * 1.4);
  height: calc(var(--wc-size) * 1.4);
  border-color: var(--wc-accent);
  border-width: 2px;
}

html.wc-active.wc-hover #wc-dot {
  width:  calc(var(--wc-dot) * 1.5);
  height: calc(var(--wc-dot) * 1.5);
  background: var(--wc-accent);
}

/* ── Click state ─────────────────────────────────────────────── */
html.wc-active.wc-clicking #wc-ring {
  width:  calc(var(--wc-size) * 0.8);
  height: calc(var(--wc-size) * 0.8);
  border-color: var(--wc-accent);
}

html.wc-active.wc-clicking #wc-dot {
  width:  calc(var(--wc-dot) * 2);
  height: calc(var(--wc-dot) * 2);
}

/* ── Visible state ───────────────────────────────────────────── */
#wc-ring.is-visible,
#wc-dot.is-visible {
  opacity: 1;
}

/* ── Pulse animation ─────────────────────────────────────────── */
@keyframes wc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 142, 247, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(79, 142, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 142, 247, 0); }
}

#wc-dot.is-visible {
  animation: wc-pulse 2.5s infinite;
}

/* ── Mobile: disable if needed ───────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .wc-no-mobile #wc-ring,
  .wc-no-mobile #wc-dot {
    display: none !important;
  }
}