/* =========================================================
   Cullen Design — Site cursor
   The pointer for the whole site: a plus drawn in ink, its horizontal
   stroke a little heavier than its vertical one, about the size of a
   gallery arrow's tap target. js/cursor.js builds it and keeps it on
   the pointer, and marks what's underneath with three states:

     resting      — the plain cross
     .is-active   — over anything clickable, closers included (the
                    lightbox's close button and backdrop, the open menu's
                    toggle): the cross turns 45° into an X and a small
                    rust block comes up in the middle of it
     .is-light    — over a large dark surface (footer, menu) or a large
                    image that's dark overall: the strokes and the block's
                    border swap to cream so they still read. Small dark
                    details — buttons, rules — don't count; see LARGE in
                    js/cursor.js

   Self-contained so every page can take it — the portfolio pages and
   the client briefs alike — whatever stylesheet it sits beside: every
   color falls back to the site value when the page doesn't define the
   --color-* tokens (brief.css names its own). Every page links this
   file and js/cursor.js; a new page needs both.

   The native cursor is only hidden once .has-site-cursor is on <html>,
   which js/cursor.js sets for fine pointers only — touch, and pages
   with scripting off, keep their plain cursors. Text fields keep the
   I-beam, and the cross steps aside over them.
   ========================================================= */
.site-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  will-change: transform;
}
.site-cursor.is-visible { opacity: 1; }

.site-cursor__cross {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--color-ink, #1C1A17);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .2s;
}
.site-cursor.is-light .site-cursor__cross {
  color: var(--color-cream, #EDE6D8);
}
.site-cursor.is-active .site-cursor__cross { transform: rotate(45deg); }
.site-cursor.is-pressed .site-cursor__cross { transform: scale(.85); }
.site-cursor.is-active.is-pressed .site-cursor__cross { transform: rotate(45deg) scale(.85); }

/* Heavier across, lighter down. */
.site-cursor__line {
  position: absolute;
  background: currentColor;
}
.site-cursor__line--h {
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
}
.site-cursor__line--v {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}

/* Bordered in the strokes' own colour (currentColor), so the rust
   reads against whatever is under it — ink on light, cream on dark. */
.site-cursor__block {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--color-rust, #C1502E);
  border: 2px solid currentColor;
  transform: scale(0);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.site-cursor.is-active .site-cursor__block { transform: scale(1); }

.has-site-cursor,
.has-site-cursor * {
  cursor: none !important;
}
.has-site-cursor input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.has-site-cursor textarea,
.has-site-cursor [contenteditable=""],
.has-site-cursor [contenteditable="true"] {
  cursor: text !important;
}

/* Printing a brief shouldn't put a stray cross on the page. */
@media print {
  .site-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-cursor,
  .site-cursor__cross,
  .site-cursor__block { transition: none; }
}