/* ══════════════════════════════════════════════════════════════════
   ATARprepAI cartoon pencil cursor — shared site-wide layer.

   Mechanism: template CSS declares `cursor: var(--cur-point, pointer)`
   wherever it used to say `cursor: pointer`, so every clickable —
   including JS-injected ones — resolves to the themed cursor at its
   original specificity. Disabled-state rules (`cursor: default` /
   `not-allowed`) still win their normal cascade fights.

   Fine pointers only: touch devices never load a cursor image, and
   if this file fails to load the var() fallback is plain `pointer`.
   Hotspot 6 6 = the graphite tip of the pencil in both variants.
   ══════════════════════════════════════════════════════════════════ */

@media (pointer: fine) {

    :root {
        --cur-pencil: url('/static/cursor-pencil.svg?v=4') 6 6, auto;
        --cur-point: url('/static/cursor-pencil-point.svg?v=4') 6 6, pointer;
    }

    /* Dark backdrop (#0b1020): the near-black graphite tip — which sits at
       the hotspot — and the black action ticks would be invisible. Swap to
       white-inked variants so the click point and clickable affordance read.
       :root[data-dark] out-specifies :root so it wins regardless of order. */
    :root[data-dark] {
        --cur-pencil: url('/static/cursor-pencil-dark.svg?v=4') 6 6, auto;
        --cur-point: url('/static/cursor-pencil-point-dark.svg?v=4') 6 6, pointer;
    }

    html,
    body {
        cursor: var(--cur-pencil);
    }

    /* Native clickables that don't declare a cursor themselves would
       otherwise keep the UA hand/arrow — give them the themed pointer. */
    a, button, select, summary, label,
    [role="button"], [onclick],
    input[type="checkbox"], input[type="radio"], input[type="range"],
    input[type="submit"], input[type="button"], input[type="file"] {
        cursor: var(--cur-point);
    }

    /* Text entry keeps the native I-beam for caret precision. */
    input:not([type="checkbox"], [type="radio"], [type="range"],
        [type="submit"], [type="button"], [type="file"], [type="color"]),
    textarea,
    [contenteditable="true"] {
        cursor: text;
    }
}

/* ── Click burst: comic ink action lines, spawned by cursor.js ──
   Lives outside the pointer:fine gate so taps get the pop too.
   Each line carries --l (its own length) so the dash animation
   draws it outward from the centre and lets it fly off the end. */

.cur-burst {
    position: fixed;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    pointer-events: none;
    z-index: 2147483647;
}

.cur-burst svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: cur-burst-pop .32s cubic-bezier(.2, .7, .3, 1) forwards;
}

.cur-burst line {
    stroke: #14142b;
    stroke-linecap: round;
    animation: cur-burst-line .32s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* black ink is invisible on the dark backdrop — swap to light ink */
[data-dark] .cur-burst line {
    stroke: #e7ecf7;
}

@keyframes cur-burst-pop {
    0% { transform: scale(.35); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: scale(1.08); opacity: 0; }
}

@keyframes cur-burst-line {
    0% { stroke-dashoffset: var(--l); }
    45% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: calc(-1 * var(--l)); }
}

@media (prefers-reduced-motion: reduce) {
    .cur-burst { display: none; }
}

/* Forced-colors / high-contrast mode (e.g. Windows High Contrast): image
   cursors override the user's system cursor, which assistive setups rely on.
   Yield to native cursors there. !important beats the :root[data-dark] swap. */
@media (forced-colors: active) {
    :root {
        --cur-pencil: auto !important;
        --cur-point: pointer !important;
    }
    .cur-burst { display: none; }
}