/* ============================================================
   dedos.info //2026 — remix layer
   Injected into every page of the three versions. The organism
   is untouched; this is the dream layer.
   ============================================================ */

/* every pixel razor-sharp on modern screens…            */
html { image-rendering: pixelated; }
/* …except photographic scans (prints, drawings, photos) */
img[src$=".jpg"], img[src$=".jpeg"], img[src$=".JPG"] { image-rendering: auto; }

/* ---- CRT treatment where the design already implies it ---- */
html.rx-v1 body::after, html.rx-v3 body::after {
  content: ""; position: fixed; inset: 0; z-index: 998;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.13) 2px 3px);
  mix-blend-mode: multiply;
}
html.rx-v3 h1, html.rx-v3 h2, html.rx-v3 h3 {
  text-shadow: 1px 0 rgba(255, 0, 60, 0.30), -1px 0 rgba(0, 255, 255, 0.30);
}

/* ---- v2: the totem hangs from a thread — let it sway ---- */
@keyframes rx-pendulum {
  0%, 100% { transform: rotate(0.35deg); }
  50%      { transform: rotate(-0.35deg); }
}
#rx-sway {
  transform-origin: 50% -600px;
  animation: rx-pendulum 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { #rx-sway { animation: none; } }

/* ---- v3: broadcast chrome ---- */
#rx-noar {
  position: fixed; top: 8px; right: 10px; z-index: 999;
  font-family: "VT323", "Courier New", monospace;
  font-size: 18px; letter-spacing: 1px;
  color: #3f3; background: rgba(0,0,0,0.72);
  padding: 2px 9px; border: 1px solid #143814;
  pointer-events: none;
}
#rx-noar b { color: #f22; font-weight: normal; animation: rx-blink 1.6s steps(2) infinite; }
@keyframes rx-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { #rx-noar b { animation: none; } }


/* ---- breadcrumb (replaces the fio menu): "dedos.info / v2 / fish" + an
   escape hatch to rafaeltrabasso.com. Isolated from the 3 host stylesheets
   with all:initial, then re-asserted at id-level specificity. ---- */
#rx-fio, #rx-fio * { all: initial; box-sizing: border-box; }
#rx-fio {
  position: fixed; left: 10px; bottom: 10px; z-index: 999;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100vw - 20px); flex-wrap: wrap;
  font-family: "Courier New", monospace;
  background: rgba(0, 0, 0, 0.82); border: 1px solid #444;
  padding: 6px 10px;
}
#rx-fio a, #rx-fio span {
  font-family: "Courier New", monospace; font-size: 12px; line-height: 1;
  letter-spacing: 0.02em; white-space: nowrap;
}
#rx-fio a { text-decoration: none; cursor: pointer; }
#rx-fio a.rx-bc-a:hover { text-decoration: underline; }
/* collapsed by default: only "dedos.info" shows; hover reveals the trail */
#rx-fio .rx-bc-tail { display: none; align-items: center; gap: 6px; }
#rx-fio:hover .rx-bc-tail, #rx-fio:focus-within .rx-bc-tail { display: inline-flex; }
#rx-fio:not(:hover):not(:focus-within) .rx-bc-root::after { content: " \203A"; opacity: 0.5; }
#rx-fio .rx-bc-cur { color: #fff; }
#rx-fio .rx-bc-esc {
  color: #0cf; margin-left: 6px; padding-left: 10px; border-left: 1px solid #444;
}
#rx-fio .rx-bc-esc:hover { color: #fff; text-decoration: underline; }
/* crumb links + separators take each version's accent */
html.rx-v1 #rx-fio .rx-bc-a, html.rx-v1 #rx-fio .rx-bc-sep { color: #f0f; }
html.rx-v2 #rx-fio .rx-bc-a, html.rx-v2 #rx-fio .rx-bc-sep { color: #4ade80; }
html.rx-v3 #rx-fio .rx-bc-a, html.rx-v3 #rx-fio .rx-bc-sep { color: #3f3; }

/* ============================================================
   scrollbars — horizontal always hidden (item 3), vertical
   styled per version's palette (item 4). scrollbar-* is the
   cross-browser standard; ::-webkit-* covers Chromium/Brave/Safari.
   ============================================================ */
html.rx-v1, html.rx-v2, html.rx-v3 { overflow-x: hidden; scrollbar-width: thin; }
html.rx-v1 { scrollbar-color: #c026d3 #0a000a; }   /* v1 circuit — magenta on near-black */
html.rx-v2 { scrollbar-color: #16a34a #05140a; }   /* v2 totem — green on dark green */
html.rx-v3 { scrollbar-color: #33ff33 #041004; }   /* v3 broadcast — terminal green */

html.rx-v1::-webkit-scrollbar,
html.rx-v2::-webkit-scrollbar,
html.rx-v3::-webkit-scrollbar { width: 12px; height: 0; }
html.rx-v1::-webkit-scrollbar-track { background: #0a000a; }
html.rx-v2::-webkit-scrollbar-track { background: #05140a; }
html.rx-v3::-webkit-scrollbar-track { background: #041004; }
html.rx-v1::-webkit-scrollbar-thumb { background: #c026d3; border: 2px solid #0a000a; }
html.rx-v2::-webkit-scrollbar-thumb { background: #16a34a; border: 2px solid #05140a; }
html.rx-v3::-webkit-scrollbar-thumb { background: #33ff33; border: 2px solid #041004; }
html.rx-v1::-webkit-scrollbar-thumb:hover { background: #f0f; }
html.rx-v2::-webkit-scrollbar-thumb:hover { background: #22e065; }
html.rx-v3::-webkit-scrollbar-thumb:hover { background: #7dff7d; }