/* sci-ui.css — the SCI kit: noir chrome windows, score, icon bar, narrator, cursors */

/* pixel cursors: white arrow (default) + amber pointing hand over clickables */
:root {
  --cur-default: url('/assets/cursors/cur-default.png') 0 0, auto;
  --cur-hover:   url('/assets/cursors/cur-hover.png') 4 0, pointer;
  /* legacy verb-cursor aliases now resolve to the pixel arrow */
  --cur-walk: var(--cur-default);
  --cur-look: var(--cur-hover);
  --cur-use:  var(--cur-hover);
}
html, body { cursor: var(--cur-default); }
a, button, summary, label, select, [role="button"], .btn, .svc-tab,
input[type="checkbox"], input[type="radio"], input[type="submit"] {
  cursor: var(--cur-hover);
}
#room-window { cursor: var(--cur-default); }

/* ---- the window ---- */
.sci-window {
  background: var(--win-bg);
  border: calc(var(--px) * 1) solid var(--border);
  box-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 rgba(0,0,0,.7);
  color: var(--ink);
}
.sci-tbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--tbar-bg); color: var(--amber);
  border-bottom: calc(var(--px) * 1) solid var(--border);
  padding: calc(var(--px) * 1) calc(var(--px) * 2);
  font-family: var(--font-pixel); font-size: calc(var(--px) * 3);
  letter-spacing: calc(var(--px) * 0.5); text-transform: uppercase;
}
.sci-inner {
  border-style: solid;
  border-width: calc(var(--px) * 1);
  border-color: var(--win-edge-lt) var(--win-edge-dk) var(--win-edge-dk) var(--win-edge-lt);
  padding: calc(var(--px) * 4);
}
.sci-btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  background: #1a2435; color: var(--teal);
  border-style: solid; border-width: calc(var(--px) * 1);
  border-color: var(--win-edge-lt) var(--win-edge-dk) var(--win-edge-dk) var(--win-edge-lt);
  padding: calc(var(--px) * 2) calc(var(--px) * 4);
  font-family: var(--font-pixel); font-size: calc(var(--px) * 3);
  text-transform: uppercase;
}
.sci-btn:hover { filter: brightness(1.2); }
.sci-btn:active { border-color: var(--win-edge-dk) var(--win-edge-lt) var(--win-edge-lt) var(--win-edge-dk); }
.sci-btn.primary { background: var(--accent); color: #0a0610; }

/* ---- icon bar (overlay menu — placement to be redesigned later) ---- */
/* unified top header over the homepage scene; same menu as the internal pages,
   fades in after the intro */
#home-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--px) * 4) calc(var(--px) * 6);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0.6), transparent);
}
#home-head a, #home-head button { pointer-events: auto; }
#home-brand img {
  height: calc(var(--px) * 10); width: auto; display: block;
  filter: drop-shadow(0 0 calc(var(--px) * 2) rgba(255, 61, 127, 0.45));
}
#iconbar { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 22px); flex-wrap: wrap; justify-content: flex-end; }
#home-head .doc-navlink {
  background: none; border: none; cursor: var(--cur-use, pointer);
  text-shadow: 0 calc(var(--px) * 0.5) calc(var(--px) * 1) rgba(0, 0, 0, 0.9);
}

/* ---- narrator ---- */
#narrator {
  position: absolute; z-index: 20;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--px) * 6);
  width: min(720px, 88%);
}
#narrator .sci-tbar { font-size: calc(var(--px) * 2.4); }
#narrator .sci-led {
  width: calc(var(--px) * 2); height: calc(var(--px) * 2);
  background: var(--amber); box-shadow: 0 0 calc(var(--px) * 2) var(--amber);
  animation: led-blink 1.4s steps(1) infinite;
}
@keyframes led-blink { 50% { opacity: .25; box-shadow: none; } }
#narrator .sci-inner {
  font-family: var(--font-mono); font-size: 15px; line-height: 1.55; color: var(--ink);
  padding: calc(var(--px) * 3) calc(var(--px) * 4);
  background: rgba(7, 12, 20, 0.96);
}
#narrator .sci-inner::before { content: "› "; color: var(--teal); }
#narrator .sci-inner::after {
  content: "▮"; color: var(--amber); margin-left: 2px;
  animation: led-blink 1.1s steps(1) infinite;
}
#narrator[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  #narrator .sci-led, #narrator .sci-inner::after { animation: none; }
}