/* src/styles/Global.css */
/* ===== cursors v2 — 2026-07-30 =====
   Custom cursors at 70% of their original size (30% smaller).

   An SVG cursor rasterizes at the SVG's own intrinsic width/height — there is
   no cursor-size property in CSS, so the size has to live in the markup. The
   five Webflow-CDN sources are therefore inlined here as data URIs with their
   ROOT width/height multiplied by 0.7. The viewBox is untouched, so the
   artwork and its aspect ratio are unchanged; only the box it rasterizes into
   shrinks. Hotspots are scaled by 0.7 and rounded to whole pixels.

     default   24x38 -> 16.8x26.6   hotspot  2 0  -> 1 0
     text      18x38 -> 12.6x26.6   hotspot  9 19 -> 6 13
     pointer   30x38 -> 21x26.6     hotspot 12 0  -> 8 0
     grab      32x34 -> 22.4x23.8   hotspot 12 4  -> 8 3
     grabbing  32x28 -> 22.4x19.6   hotspot 12 0  -> 8 0

   To resize again: change the width/height inside each data URI and the two
   hotspot numbers after the closing quote. Inlining also drops five
   render-blocking CDN requests; CSP permits it (img-src 'self' data: https:).
*/

/* Cursor "default" */
body,
body :is([data-cursor="default"], [data-cursor="default"] *),
body * {
  cursor: url("data:image/svg+xml,%3Csvg%20width=%2216.8%22%20height=%2226.6%22%20viewBox=%220%200%2024%2038%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M2%200H0V34H4V32H6V30H8V28H10V32H12V36H14V38H18V36H20V32H18V28H16V26H24V22H22V20H20V18H18V16H16V14H14V12H12V10H10V8H8V6H6V4H4V2H2V0Z%22%20fill=%22%23131313%22/%3E%3Cpath%20d=%22M4%204H2V32H4V30H6V28H8V26H10V28H12V32H14V36H18V32H16V28H14V24H22V22H20V20H18V18H16V16H14V14H12V12H10V10H8V8H6V6H4V4Z%22%20fill=%22white%22/%3E%3C/svg%3E") 1 0, auto;
}

/* Cursor "text" */
body :is([data-cursor="text"], [data-cursor="text"] *),
body :is(p, h1, h2, h3, h4, h5, h6, input[type="text"], textarea) {
  cursor: url("data:image/svg+xml,%3Csvg%20width=%2212.6%22%20height=%2226.6%22%20viewBox=%220%200%2018%2038%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M8%200H2V2H0V4H2V6H6V18H4V20H6V32H2V34H0V36H2V38H8V36H10V38H16V36H18V34H16V32H12V20H14V18H12V6H16V4H18V2H16V0H10V2H8V0Z%22%20fill=%22white%22/%3E%3Cpath%20d=%22M8%202H2V4H8V18H6V20H8V34H10V20H12V18H10V4H16V2H10V4H8V2Z%22%20fill=%22%23131313%22/%3E%3Cpath%20d=%22M8%2034H2V36H8V34Z%22%20fill=%22%23131313%22/%3E%3Cpath%20d=%22M16%2034H10V36H16V34Z%22%20fill=%22%23131313%22/%3E%3C/svg%3E") 6 13, text;
}

/* Cursor "pointer" (Hover)
   Already covers every <a> and the modal's close <button>, so those need no
   selector of their own — they just inherit the smaller pointer above. */
body :is([data-cursor="pointer"], [data-cursor="pointer"] *),
body :is(a, a *, a p, button, button *, select, input[type="submit"], input[type="button"], input[type="radio"], input[type="checkbox"]) {
  cursor: url("data:image/svg+xml,%3Csvg%20width=%2221%22%20height=%2226.6%22%20viewBox=%220%200%2030%2038%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12.3529%200H8.82353V1.72727L7.05882%201.72727V17.2727H5.29412L5.29412%2015.5455H0V20.7273H1.76471V22.4545H3.52941V25.9091H5.29412V29.3636H7.05882V32.8182H8.82353V38H26.4706V32.8182H28.2353V27.6364H30V15.5455H28.2353V13.8182H26.4706V12.0909H22.9412L22.9412%2010.3636H17.6471V8.63636H14.1176V1.72727L12.3529%201.72727V0Z%22%20fill=%22%23131313%22/%3E%3Cpath%20d=%22M8.82445%201.72729V20.7273H7.05974V19H5.29504V17.2727H1.76562V20.7273H3.53033V22.4546H5.29504V25.9091H7.05974V29.3637H8.82445V32.8182H10.5892V36.2727H24.7068V32.8182H26.4715V27.6364H28.2362V15.5455H26.4715V13.8182H24.7068V19H22.9421V12.0909H19.4127V17.2727H17.648V10.3637H14.1186V17.2727H12.3539V1.72729H8.82445Z%22%20fill=%22white%22/%3E%3C/svg%3E") 8 0, pointer;
}

/* Cursor "pointer" on the mosaic tiles that open a case-study modal.

   !important IS LOAD-BEARING. Tiles are plain <div>s, and wire() in
   case-study-modal-*.js sets `cursor: pointer` as an INLINE style on every
   tile it wires (live: style="grid-area: ...; cursor: pointer;"). An inline
   declaration beats any selector, however specific, so without !important
   this rule loses and the tiles keep the plain OS arrow instead of the custom
   SVG. Same mechanic the stylesheet already relies on for
   `grid-column: auto !important` beating the designer's inline spans.

   The selector deliberately mirrors wire()'s own — `.ar-tile[data-project]` —
   so it can never drift out of sync with the PROJECTS list. The descendant
   `*` is needed because the child <img> otherwise falls back to `body *`. */
.ar-tile[data-project],
.ar-tile[data-project] * {
  cursor: url("data:image/svg+xml,%3Csvg%20width=%2221%22%20height=%2226.6%22%20viewBox=%220%200%2030%2038%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12.3529%200H8.82353V1.72727L7.05882%201.72727V17.2727H5.29412L5.29412%2015.5455H0V20.7273H1.76471V22.4545H3.52941V25.9091H5.29412V29.3636H7.05882V32.8182H8.82353V38H26.4706V32.8182H28.2353V27.6364H30V15.5455H28.2353V13.8182H26.4706V12.0909H22.9412L22.9412%2010.3636H17.6471V8.63636H14.1176V1.72727L12.3529%201.72727V0Z%22%20fill=%22%23131313%22/%3E%3Cpath%20d=%22M8.82445%201.72729V20.7273H7.05974V19H5.29504V17.2727H1.76562V20.7273H3.53033V22.4546H5.29504V25.9091H7.05974V29.3637H8.82445V32.8182H10.5892V36.2727H24.7068V32.8182H26.4715V27.6364H28.2362V15.5455H26.4715V13.8182H24.7068V19H22.9421V12.0909H19.4127V17.2727H17.648V10.3637H14.1186V17.2727H12.3539V1.72729H8.82445Z%22%20fill=%22white%22/%3E%3C/svg%3E") 8 0, pointer !important;
}

/* Cursor "grab" */
body :is([data-cursor="grab"], [data-cursor="grab"] *) {
  cursor: url("data:image/svg+xml,%3Csvg%20fill=%22none%22%20height=%2223.8%22%20viewBox=%220%200%2032%2034%22%20width=%2222.4%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22m20%202h4v2h4v2h2v2h2v14h-2v6h-2v6h-20v-6h-2v-4h-2v-4h-2v-4h-2v-4h2v-2h4v-6h2v-2h6v-2h6z%22%20fill=%22%23131313%22/%3E%3Cpath%20d=%22m18%2010h2v-6h4v8h2v-6h2v2h2v14h-2v6h-2v4h-16v-4h-2v-4h-2v-4h-2v-4h-2v-4h4v2h2v-10h4v6h2v-8h4z%22%20fill=%22%23fff%22/%3E%3C/svg%3E") 8 3, grab;
}

/* Cursor "grabbing" */
body :is([data-cursor="grabbing"], [data-cursor="grabbing"] *) {
  cursor: url("data:image/svg+xml,%3Csvg%20width=%2222.4%22%20height=%2219.6%22%20viewBox=%220%200%2032%2028%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M20%200H24V2H28V4H30V6H32V16H30V22H28V28H8V22H6V18H4V14H2V10H0V6H2V4H6V0H8H10H14H20Z%22%20fill=%22%23131313%22/%3E%3Cpath%20d=%22M18%206H20V2H24V8H26V4H28V6H30V16H28V22H26V26H10V22H8V18H6V14H4V10H2V6H6V8H8V2H12V6H14V2H18V6Z%22%20fill=%22white%22/%3E%3C/svg%3E") 8 0, grabbing;
}