/* ===== assets/css/components/cursor.css ===== */
/* v50 — the ring that follows the pointer and fills with the page.
   Pointer-events off, aria-hidden, and only ever attached on a device with a fine pointer: on a
   phone there is no cursor to follow and the element would be a permanent artefact in the
   corner. The native cursor is NOT hidden — replacing it costs the reader every affordance the
   OS gives them (text beams, resize arrows, the lot) for a decoration. */
.cursor-ring {
  position: fixed;
  /* v50c: PHYSICAL top/left, and this is the one place in the sheet where that is correct.
     `inset-inline-start` resolves to the RIGHT edge on an RTL page, so the ring was anchored to
     the right and then translated a further clientX to the right — permanently off screen.
     A pointer coordinate is physical; the box that carries it has to be too. */
  top: 0;
  left: 0;
  inline-size: 46px;
  block-size: 46px;
  margin: -23px 0 0 -23px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
  /* v50b: NO mix-blend-mode. `difference` on a fixed layer is the obvious way to make one
     element legible over both the black hero and the white sections, and it is unreliable —
     it depends on the stacking context it lands in, it forces a new compositing layer for the
     whole blend root, and it did not render at all in the headless check. The two strokes are
     picked to carry on either background instead, which needs nothing from the compositor. */
}
.cursor-ring.is-on { opacity: 1; }
.cursor-ring circle { fill: none; stroke-width: 1.5; }
.cursor-ring .ring__track { stroke: rgba(127, 130, 140, 0.38); }
.cursor-ring .ring__fill {
  stroke: #8a8d99;                       /* JS interpolates this toward blue as the page fills */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.cursor-ring .ring__dot { fill: rgba(127, 130, 140, 0.9); stroke: none; }

/* ---- preview-only chrome ---- */
html { background: #050505; }
.preview-end {
  background: #050505; color: #b6bcc4; padding: 4rem var(--gutter) 5rem;
  border-block-start: 1px solid rgba(255,255,255,0.08);
}
.preview-end .container { display: grid; gap: 1rem; }
.preview-end .label { color: #ff9a45; }
.preview-end p { max-width: 60ch; text-wrap: pretty; }