/* =====================================================================
   EVEREST AUTO HUB — Custom wheel cursor + tyre-skid trail (module)
   ---------------------------------------------------------------------
   Self-contained. Pairs with js/cursor.js.

   TO DISABLE: remove the cursor.css <link> and cursor.js <script> from
   the pages — or set  window.EAH_CURSOR_OFF = true  before cursor.js loads.

   TO TWEAK: edit the variables just below.
   The module only activates on hover-capable, fine-pointer devices and is
   skipped entirely when the user prefers reduced motion (js handles that).
   ===================================================================== */

:root {
  --eah-wheel:   #F39C2D;                    /* wheel colour (brand orange)   */
  --eah-wheel-hot: #FFFFFF;                  /* colour over links/buttons     */
  --eah-skid:    rgba(243, 156, 45, .22);    /* tyre-mark colour (subtle)     */
  --eah-cursor-size: 26px;                   /* wheel diameter (24–28px)      */
}

/* Hide the native cursor only once JS has switched the module on. */
html.cursor-on, html.cursor-on * { cursor: none; }
/* …but keep the native caret on text fields so typing/selecting feels right */
html.cursor-on input,
html.cursor-on textarea,
html.cursor-on select,
html.cursor-on [contenteditable] { cursor: auto; }

/* The wheel itself */
.eah-cursor {
  position: fixed;
  top: 0; left: 0;
  width: var(--eah-cursor-size);
  height: var(--eah-cursor-size);
  z-index: 9999;
  pointer-events: none;                 /* never blocks clicks */
  opacity: 0;                           /* shown on first move */
  transition: opacity .22s ease, color .18s ease;
  color: var(--eah-wheel);
  will-change: transform;
}
.eah-cursor.is-ready { opacity: 1; }
.eah-cursor.is-hidden { opacity: 0; }   /* hidden over text fields */
.eah-cursor.is-hot { color: var(--eah-wheel-hot); }  /* over interactive els */

.eah-cursor__wheel { width: 100%; height: 100%; will-change: transform; }
.eah-cursor__wheel svg { width: 100%; height: 100%; display: block; }

/* Skid-trail layer + individual marks */
.eah-trail { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
.eah-skid {
  position: fixed;
  height: 2px;
  pointer-events: none;
  border-radius: 2px;
  transform-origin: 0 50%;
  /* twin parallel tyre marks: the element is one line, box-shadow draws the
     second 5px below it; both fade out together via the WAAPI animation */
  background: linear-gradient(90deg, transparent 0%, var(--eah-skid) 100%);
  box-shadow: 0 5px 0 0 var(--eah-skid);
  will-change: opacity;
}

/* Safety: if a user somehow has cursor-on without fine pointer, never trap them */
@media (hover: none), (pointer: coarse) {
  html.cursor-on, html.cursor-on * { cursor: auto; }
  .eah-cursor, .eah-trail { display: none; }
}