/* ==========================================================================
   DIVLAB CURSOR — the dot that detaches from the logo
   --------------------------------------------------------------------------
   Pairs with dvl-cursor.js. Standalone; it shares nothing with the preloader
   but a custom event name, so either can be removed without the other.

   DESKTOP ONLY. The element is never created on a coarse pointer — see the
   gate in the script — and this stylesheet hides it as a second guard, so a
   device that reports a fine pointer and then turns out to be a touchscreen
   still cannot end up with a dot stranded in a corner.
   ========================================================================== */

.dvl-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;          /* under the preloader sheet, over everything else */

  /* 8px, and it must match CONFIG.size in dvl-cursor.js — the script
     scales the element during the flight and settles it at 1, so a
     mismatch reads as the dot jumping size the moment it attaches. */
  width: var(--dvl-cursor-size, 8px);
  height: var(--dvl-cursor-size, 8px);

  /* Half the size, negative, so the element's CENTRE lands on the pointer
     coordinates the script writes. Without it the dot hangs below and to
     the right of the cursor by four pixels. */
  margin: calc(var(--dvl-cursor-size, 8px) / -2) 0 0
          calc(var(--dvl-cursor-size, 8px) / -2);

  /* SQUARE, because the mark's dot is square.

     Thresholding the logo artwork gives the dot as 5925 filled pixels in a
     77x77 bounding box - 99.93% of the box. A circle fills pi/4, about
     78.5%. So the dot over the "i" is a square, and a round cursor was
     never a match for it. */
  border-radius: 0;
  background: var(--dvl-cursor-ink, #433e34);

  /* It must never intercept a click, a hover or a text selection. The whole
     page has to behave exactly as it would without it. */
  pointer-events: none;

  /* Hidden until the script places it. Without this it would paint at 0,0
     for one frame on every load — a dot flicking out of the top-left corner
     is the classic tell of a custom cursor done carelessly. */
  opacity: 0;

  /* GSAP writes x and y every frame through quickTo. A CSS transition on a
     scripted property does not smooth it, it lags it. */
  transition: none !important;
  will-change: transform;
}

/* Never on a touch device, whatever the script decided. */
@media (hover: none), (pointer: coarse) {
  .dvl-cursor {
    display: none !important;
  }
}

/* Someone who asked for less motion should not have an element chasing
   their pointer across the page. */
@media (prefers-reduced-motion: reduce) {
  .dvl-cursor {
    display: none !important;
  }
}