/* ============================================================
   CUSTOM CURSOR — FLWLESS 2.0
   Two-layer: small dot (instant) + large ring (lagged follow).
   Hides the native cursor on non-touch devices.
   ============================================================ */

@media (pointer: fine) {

  /* Hide native cursor globally */
  *, *::before, *::after {
    cursor: none !important;
  }

  /* ---- Dot ---- */
  .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px;
    height: 6px;
    background: var(--c-ink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 200ms ease, height 200ms ease,
                background 200ms ease, opacity 200ms ease;
    will-change: transform;
  }

  /* ---- Ring ---- */
  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(240, 237, 232, 0.45);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1),
                height 300ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 300ms ease,
                opacity 300ms ease;
    will-change: transform;
  }

  /* ---- Hover states ---- */

  /* Links, buttons, clickable things → expand ring, accent dot */
  body.cursor--hover .cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--c-accent);
  }

  body.cursor--hover .cursor-ring {
    width: 56px;
    height: 56px;
    border-color: rgba(200, 180, 154, 0.5);
  }

  /* Images / work items → bigger ring, dot shrinks */
  body.cursor--image .cursor-dot {
    width: 4px;
    height: 4px;
    background: var(--c-accent);
  }

  body.cursor--image .cursor-ring {
    width: 72px;
    height: 72px;
    border-color: rgba(200, 180, 154, 0.35);
  }

  /* Splat poster → ring becomes a "play" indicator */
  body.cursor--splat .cursor-dot {
    width: 0;
    height: 0;
    opacity: 0;
  }

  body.cursor--splat .cursor-ring {
    width: 80px;
    height: 80px;
    border-color: var(--c-accent);
    border-width: 1px;
  }

  /* Text / inputs → thin I-beam style: dot tall, ring small */
  body.cursor--text .cursor-dot {
    width: 2px;
    height: 20px;
    border-radius: 1px;
    background: var(--c-ink);
  }

  body.cursor--text .cursor-ring {
    width: 24px;
    height: 24px;
    opacity: 0.4;
  }

  /* Hidden when leaving window */
  body.cursor--out .cursor-dot,
  body.cursor--out .cursor-ring {
    opacity: 0;
  }

}