/*  binary.ly — THE TAG (theme switcher)
    A self-closing XML element. The tag name reflects the current theme:
    <dark/> in dark mode, <light/> in light mode. Click to flip — the
    new theme irises in from the button's centre via View Transitions.

    Requires tokens: --bg, --text, --gold, --bg-rgb, --fg-rgb, --gold-rgb,
                     --muted, --border-2.                                  */

.theme-tag {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* isolate stacking so the b-cursor's mix-blend-mode reads cleanly over us */
  isolation: isolate;
}
.theme-tag:hover {
  border-color: var(--gold);
}
.theme-tag:active { transform: translateY(1px); }
.theme-tag:focus { outline: none; }
.theme-tag:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.25);
}

.tt-br {
  color: rgba(var(--fg-rgb), 0.48);
  transition: color 0.2s;
}
.tt-name {
  color: var(--gold);
  font-weight: 700;
  margin: 0 0.05em;
  letter-spacing: 0.04em;
}
.tt-slash {
  color: rgba(var(--fg-rgb), 0.48);
  margin-left: 0.1em;
  transition: color 0.2s;
}
.theme-tag:hover .tt-br,
.theme-tag:hover .tt-slash {
  color: var(--text);
}

/* Floating fallback for pages without a header CTA neighbour */
.theme-tag--floating {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 200;
}

/* ─── THE BIT — compact single-digit variant ──────────────────────
   For dense navs (/u, /u/wall, /live). One mono digit: 0 = dark, 1 = light.
   Small gold pixel in the top-right corner doubles as a status LED. */
.theme-bit {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  vertical-align: middle;
  transition: border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.theme-bit:hover  { border-color: var(--gold); }
.theme-bit:active { transform: translateY(1px); }
.theme-bit:focus  { outline: none; }
.theme-bit:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.25);
}
.theme-bit::before {
  content: '';
  position: absolute; top: 3px; right: 3px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
}
.bit-digit {
  font-family: 'Space Mono', monospace;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  transition: color 0.2s ease;
}
.theme-bit:hover .bit-digit { color: var(--gold); }

/* ─── CURSOR WIPE — the new theme is swept in by the b-cursor shape ──
   Uses mask-image of the Binary parallelogram cursor, growing from
   the exact click position (set inline by JS as --vt-x / --vt-y).
   Metaphor: your cursor swipes the new theme onto the page. */

@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) {
    z-index: 2;
    /* Filled b-cursor parallelogram. ViewBox 0 0 24 46 (aspect ~24:46). */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'><polygon points='1,1 22,22 21,44 1,23' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'><polygon points='1,1 22,22 21,44 1,23' fill='black'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat:  no-repeat;
    /* The cursor sprouts from the click point, travels to viewport
       centre at viewport-fit size for a brief hold, then bursts out. */
    animation: cursorGrow 750ms linear forwards;
  }
  /* Aspect ratio 24:46 → width = height × (24/46) ≈ height × 0.522 */
  @keyframes cursorGrow {
    /* 0ms — born invisibly at the click point */
    0% {
      -webkit-mask-size: 0 0;
              mask-size: 0 0;
      -webkit-mask-position: var(--vt-x, 50%) var(--vt-y, 50%);
              mask-position: var(--vt-x, 50%) var(--vt-y, 50%);
    }
    /* ~225ms — fully visible, centred, ~80vmin tall × ~42vmin wide */
    30% {
      -webkit-mask-size: 42vmin 80vmin;
              mask-size: 42vmin 80vmin;
      -webkit-mask-position: calc(50vw - 21vmin) calc(50vh - 40vmin);
              mask-position: calc(50vw - 21vmin) calc(50vh - 40vmin);
    }
    /* ~413ms — HOLD ~188ms. The cursor is unmistakable on screen. */
    55% {
      -webkit-mask-size: 42vmin 80vmin;
              mask-size: 42vmin 80vmin;
      -webkit-mask-position: calc(50vw - 21vmin) calc(50vh - 40vmin);
              mask-position: calc(50vw - 21vmin) calc(50vh - 40vmin);
    }
    /* 750ms — explodes outward, the cursor's edges fly past the
       viewport in all directions. Aspect ratio preserved. */
    100% {
      -webkit-mask-size: 210vmax 400vmax;
              mask-size: 210vmax 400vmax;
      -webkit-mask-position: calc(50vw - 105vmax) calc(50vh - 200vmax);
              mask-position: calc(50vw - 105vmax) calc(50vh - 200vmax);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation-duration: 0.001s; }
}