/* ===========================================================================
   Axon motion layer
   ---------------------------------------------------------------------------
   Lightweight polish for the landing page: a crosshair cursor, magnetic CTAs,
   a film-grain wash, and a scroll progress hairline. No animation library -
   every effect here is a transform or an opacity, which the compositor can run
   without touching layout.

   Three rules hold throughout:
     * pointer-events: none on every decorative layer, so nothing it draws can
       ever swallow a click on the CTA underneath.
     * the whole layer is opt-in via [data-motion="on"], set by script only
       after it has confirmed a fine pointer - a phone must not pay for a
       cursor it cannot show.
     * prefers-reduced-motion turns the moving parts off rather than merely
       slowing them.
   ========================================================================= */

/* --- Crosshair cursor ---------------------------------------------------
   A chart crosshair rather than a dot-and-ring: it belongs on a trading site,
   and it reads as a targeting reticle when it expands over something
   clickable. Two elements, because the centre dot tracks the pointer exactly
   while the reticle lags behind it. */
.ax-cursor,
.ax-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.ax-cursor {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  transition: opacity .25s ease, width .22s cubic-bezier(.2,.8,.2,1),
              height .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1);
}
.ax-cursor-dot {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--cyan, #4FC3F7);
  z-index: 9999;
}
body[data-motion="on"] .ax-cursor,
body[data-motion="on"] .ax-cursor-dot { opacity: 1; }

/* The four ticks of the crosshair. Drawn as children so the gap in the middle
   stays empty and the centre dot shows through cleanly. */
.ax-cursor i {
  position: absolute;
  background: var(--cyan, #4FC3F7);
  opacity: .75;
  transition: background .2s ease, opacity .2s ease;
}
.ax-cursor i:nth-child(1) { top: 0; left: 50%; width: 1px; height: 10px; transform: translateX(-50%); }
.ax-cursor i:nth-child(2) { bottom: 0; left: 50%; width: 1px; height: 10px; transform: translateX(-50%); }
.ax-cursor i:nth-child(3) { left: 0; top: 50%; height: 1px; width: 10px; transform: translateY(-50%); }
.ax-cursor i:nth-child(4) { right: 0; top: 50%; height: 1px; width: 10px; transform: translateY(-50%); }

/* Over anything interactive the reticle opens up and turns violet - the same
   accent the buttons already use, so it reads as "this is a target". */
body[data-cursor="hot"] .ax-cursor { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
body[data-cursor="hot"] .ax-cursor i { background: var(--violet, #7B4BFF); opacity: 1; }
body[data-cursor="hot"] .ax-cursor-dot { background: var(--violet, #7B4BFF); }

/* Hide the native cursor only once ours is actually up, so a failed script
   never leaves the page with no pointer at all. Inputs keep their I-beam:
   a text field with a crosshair is worse, not better. */
body[data-motion="on"],
body[data-motion="on"] a,
body[data-motion="on"] button { cursor: none; }
body[data-motion="on"] input,
body[data-motion="on"] textarea,
body[data-motion="on"] select { cursor: auto; }

/* --- Film grain ---------------------------------------------------------
   A single inline SVG turbulence, tiled. Cheap, and it stops the large flat
   gradients from banding on dark panels. */
.ax-grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Scroll progress ----------------------------------------------------
   A 2px hairline of the brand gradient. scaleX is driven from script; using a
   transform rather than width keeps it off the layout path. */
.ax-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9997;
  background: var(--grad-brand, linear-gradient(135deg, #4FC3F7, #7B4BFF));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* --- Magnetic buttons ---------------------------------------------------
   The translation itself comes from script; this only supplies the spring
   back when the pointer leaves. */
.ax-magnetic { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ax-magnetic.ax-pulling { transition: transform .08s linear; }

/* --- Reduced motion / touch --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ax-cursor, .ax-cursor-dot, .ax-grain, .ax-progress { display: none !important; }
  .ax-magnetic { transition: none; }
  body[data-motion="on"],
  body[data-motion="on"] a,
  body[data-motion="on"] button { cursor: auto; }
}
@media (pointer: coarse) {
  .ax-cursor, .ax-cursor-dot { display: none !important; }
}