/* Cascabel — the reticle
 *
 * A camera focus mark in place of the arrow: crosshair through a ring, with a
 * red LED at the centre that blinks the way a record light does.
 *
 * Two things this has to survive:
 *
 * 1. The site runs black sections and light grey ones against each other. A
 *    single-colour cursor disappears on one of them. The mark is drawn twice —
 *    a dark halo underneath, a bone line on top — so it reads on both without
 *    blend modes, which are expensive on something that moves every frame.
 *
 * 2. The native cursor is only hidden once the script is actually running, by
 *    the .has-reticle class the script adds. If the script never loads, the
 *    arrow stays and nothing is lost.
 */

.reticle {
  position: fixed;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s linear;
  will-change: transform;
}

.reticle.on { opacity: 1 }
.reticle svg { display: block; width: 100%; height: 100% }

/* The frame scales as one piece so the lock and the click both read as the
   lens moving, not as parts sliding around. */
.reticle .rt-frame {
  transform-origin: 22px 22px;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.reticle .rt-halo * {
  fill: none;
  stroke: rgba(10, 10, 10, .5);
  stroke-width: 3.6;
  stroke-linecap: round;
}

.reticle .rt-line * {
  fill: none;
  stroke: #F5F5F2;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ── The LED ──────────────────────────────────────────────────────────────
 * A hard on/off, not a fade: steps() is what makes it read as a lamp being
 * switched rather than something breathing. The glow is a radial gradient
 * rather than a blur filter — a filter would be re-rasterised on a element
 * that moves with the pointer.
 */
.reticle .rt-led { fill: #C2261D }
.reticle .rt-glow { opacity: .9 }

.reticle .rt-led,
.reticle .rt-glow {
  animation: rt-blink 1.5s steps(1, end) infinite;
}

@keyframes rt-blink {
  0%, 54% { opacity: 1 }
  55%, 100% { opacity: .16 }
}

/* ── Locked on something clickable ────────────────────────────────────────
 * The frame tightens and the LED stops blinking and holds — a lens that has
 * found its subject.
 */
.reticle.lock .rt-frame { transform: scale(.74) }
.reticle.lock .rt-led,
.reticle.lock .rt-glow { animation: none; opacity: 1 }
.reticle.lock .rt-line * { stroke: #F2C924 }

/* The shutter: a snap inward while the button is held. */
.reticle.snap .rt-frame { transform: scale(.58) }

/* ── Hiding the arrow ─────────────────────────────────────────────────────
 * Everything on the page that sets its own cursor (links, buttons, the truck
 * drawing) has to be overridden, hence the universal selector. It is switched
 * off wholesale over text fields, where an I-beam is worth more than a lens.
 */
html.has-reticle:not(.reticle-off),
html.has-reticle:not(.reticle-off) * { cursor: none !important }

html.has-reticle.reticle-off .reticle { opacity: 0 }

/* Someone who has asked the system for less movement gets the mark without the
   blink — the LED simply stays lit. */
@media (prefers-reduced-motion: reduce) {
  .reticle .rt-led,
  .reticle .rt-glow { animation: none; opacity: 1 }
  .reticle .rt-frame { transition: none }
}