/* ============================================================
   EasyCab — Custom cursor (single source of truth)
   Linked from every page so it stays consistent site-wide.
   Auto-disabled on touch / coarse pointers via the media query.

   The cursor is a two-piece thing:
     1. A small orange dot that tracks the pointer tightly.
     2. A larger ink-coloured ring that lags behind smoothly and
        morphs (becomes green + outer ink boundary) when hovering
        over a clickable element.

   Relies on these CSS variables from the page's :root (already
   defined in /styles/base.css or each page's inline tokens):
     --paper  --paper-2  --ink  --orange  --green
     --ease-out
   ============================================================ */

@media (hover:hover) and (pointer:fine){

  html, body{ cursor: none; }

  /* Hide the OS pointer over anything interactive */
  a, button, .btn, .tab, .qa-summary, .faq-call, .faq-call-alt,
  .dir-btn, .brand, .swap, .traffic-toggle, .nav-links a,
  .calc-pill, .term-pill, .r-card, summary, [role="button"],
  [onclick]{ cursor: none; }

  /* Restore native caret over text inputs so users can see typing */
  input, textarea, select, [contenteditable]{ cursor: text; }
  input[type="checkbox"], input[type="radio"],
  input[type="submit"], input[type="button"]{ cursor: none; }

  /* The two cursor primitives live on body; pointer-events off so
     they never block interaction underneath. */
  .ec-cursor, .ec-cursor-ring{
    position: fixed; top: 0; left: 0; z-index: 9999;
    pointer-events: none; will-change: transform; mix-blend-mode: normal;
  }

  /* The orange dot */
  .ec-cursor{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange);
    transform: translate(-50%,-50%);
    transition: width .25s var(--ease-out), height .25s var(--ease-out),
                background .25s var(--ease-out), opacity .2s;
  }

  /* The lagging ink ring */
  .ec-cursor-ring{
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid rgba(20,20,16,.4);
    transform: translate(-50%,-50%);
    transition: width .3s var(--ease-out), height .3s var(--ease-out),
                border-color .3s var(--ease-out), background .3s var(--ease-out),
                opacity .2s;
  }

  /* ---- Hover state (over an interactive thing) ----
     Inner: shrinks slightly, stays orange.
     Outer: grows, fills with hollow-green and gets a concentric
     ink boundary via box-shadow trick. */
  .ec-cursor.is-hover{
    width: 6px; height: 6px; background: var(--orange); opacity: 1;
  }
  .ec-cursor-ring.is-hover{
    width: 60px; height: 60px;
    background: transparent;
    border: 2.5px solid var(--green);
    box-shadow:
      0 0 0 4px transparent,
      0 0 0 5.5px var(--ink),
      0 22px 44px -20px rgba(20,20,16,.35);
  }
  /* On-dark variant — boundary flips to paper so it stays visible */
  .ec-cursor-ring.is-hover.on-dark{
    border-color: var(--green);
    box-shadow:
      0 0 0 4px transparent,
      0 0 0 5.5px var(--paper),
      0 22px 44px -20px rgba(0,0,0,.5);
  }

  /* ---- "Element-zoom" effect underneath the cursor ----
     The clickable target lifts and scales subtly. */
  .cursor-zoomed{
    transform: translateY(-2px) scale(1.08) !important;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out) !important;
    z-index: 2;
  }
  .btn.cursor-zoomed{
    transform: translateY(-2px) scale(1.12) !important;
  }
  .btn-orange.cursor-zoomed{
    box-shadow: 0 28px 56px -22px rgba(232,90,31,.6),
                0 10px 22px -10px rgba(232,90,31,.4) !important;
  }
  .btn-green.cursor-zoomed{
    box-shadow: 0 28px 56px -22px rgba(26,74,53,.55),
                0 10px 22px -10px rgba(26,74,53,.35) !important;
  }
  .btn-ink.cursor-zoomed,
  .faq-call.cursor-zoomed{
    box-shadow: 0 28px 56px -24px rgba(20,20,16,.5),
                0 10px 22px -10px rgba(20,20,16,.3) !important;
  }
  .quote-book.cursor-zoomed{
    transform: translateY(-2px) scale(1.10) !important;
    box-shadow: 0 28px 56px -22px rgba(232,90,31,.65) !important;
  }

  /* Don't zoom big surfaces — only meaningful click targets */
  .r-card.cursor-zoomed,
  .field.cursor-zoomed,
  .brand.cursor-zoomed,
  .person.cursor-zoomed,
  .term.cursor-zoomed,
  .step.cursor-zoomed{ transform: none !important; }

  /* Down-state — handled in JS via scale multiplier on transform */
  .ec-cursor.is-down,
  .ec-cursor-ring.is-down{ /* see /scripts/cursor.js */ }

  /* Over a text input — hide both, let native caret take over */
  .ec-cursor.is-text, .ec-cursor-ring.is-text{ opacity: 0; }

  /* Over a dark surface — flip the resting ring colour so it stays visible */
  .ec-cursor-ring.on-dark{ border-color: rgba(245,242,236,.55); }
  .ec-cursor.on-dark{ background: var(--orange); }
}