/* ============================================================
   Component · Custom Crosshair Cursor (desktop only)
   References drafting precision. 4px arms, 1px weight. Tracks
   mousemove via rAF. Disabled below 1024px. Disabled in
   prefers-reduced-motion. Disabled when keyboard is in use.
   ============================================================ */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html:not(.is-keyboard) body {
    cursor: none;
  }
  html:not(.is-keyboard) body a,
  html:not(.is-keyboard) body button,
  html:not(.is-keyboard) body [role='button'],
  html:not(.is-keyboard) body input,
  html:not(.is-keyboard) body textarea,
  html:not(.is-keyboard) body select {
    cursor: none;
  }

  .cursor {
    --size: 24px;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    pointer-events: none;
    z-index: var(--z-cursor);
    transform: translate3d(-50%, -50%, 0);
    transition: width  var(--duration-fast) var(--ease-out),
                height var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                border-radius var(--duration-fast) var(--ease-out),
                border var(--duration-fast) var(--ease-out),
                opacity var(--duration-normal) var(--ease-out);
    will-change: transform;
  }

  /* Keep the cursor hidden through the page-load choreography; the
     boot flag is removed once the loader clears, easing it in.
     !important is required to beat the inline opacity cursor.js sets. */
  .is-booting .cursor { opacity: 0 !important; }

  /* Default crosshair = 4 small ticks (arms) made via background */
  .cursor::before,
  .cursor::after {
    content: '';
    position: absolute;
    background: var(--color-ink);
    transform-origin: center;
  }
  .cursor::before {
    /* horizontal */
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
  }
  .cursor::after {
    /* vertical */
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
  }

  /* On dark sections — invert */
  .cursor.is-on-dark::before,
  .cursor.is-on-dark::after { background: var(--color-white); }

  /* Over interactive — expand to circle, ring only */
  .cursor.is-on-interactive {
    --size: 32px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
  }
  .cursor.is-on-interactive::before,
  .cursor.is-on-interactive::after { background: transparent; }

  /* Over an accent-on-hover element (hero CTAs) the accent ring would
     blend in — use a contrasting ring instead. */
  .cursor.is-on-contrast.is-on-interactive { border-color: var(--color-white); }

  /* Over images — show "View" label */
  .cursor.is-on-image {
    --size: 56px;
    border: 1px solid var(--color-white);
    border-radius: 50%;
    background: rgba(24, 33, 37, 0.35);
    backdrop-filter: blur(4px);
  }
  .cursor.is-on-image::before,
  .cursor.is-on-image::after { background: transparent; }
  .cursor__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .cursor.is-on-image .cursor__label { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    body, body * { cursor: auto !important; }
    .cursor { display: none; }
  }
}

/* Hide cursor entirely below desktop / on touch / for keyboard users */
@media (max-width: 1023.98px), (hover: none), (pointer: coarse) {
  .cursor { display: none; }
  body, body * { cursor: auto; }
}