/* Two faces only. saint sets the titles; Endless sets everything else. No
   monospace anywhere. saint carries alphanumerics alone, so it is never used
   for anything containing punctuation, and Endless has no degree sign, middle
   dot or true minus, so the interface avoids those characters entirely. */
@font-face {
  font-family: "Saint";
  src: url("./saint.woff2") format("woff2"), url("./saint.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Endless";
  src: url("./endless.woff2") format("woff2"), url("./endless.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #eef8ff;
  --muted: #8096ab;
  --line: rgba(188, 222, 244, 0.18);
  --accent: #8ed8ff;
  --alert: #ff385d;
  --night: #02050d;
  --panel: rgba(3, 8, 18, 0.58);
  font-family: "Endless", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
}

body {
  color: var(--ink);
  cursor: grab;
  overscroll-behavior: none;
}

body:active { cursor: grabbing; }
.hud-panel, .hud-panel * { cursor: default; }
.hud-panel button { cursor: pointer; }

button { font: inherit; }

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
}

#signal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* p5.js panopticon canvas: reads the tracker, never takes the pointer. */
#overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#overlay canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.signal-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(0, 4, 10, 0.48), transparent 31% 72%, rgba(0, 4, 10, 0.62)),
    linear-gradient(286deg, transparent 0 58%, rgba(0, 4, 10, 0.22) 86%);
}

.hud-panel {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(14px);
}

/* A gallery label, not a poster headline. */
.masthead {
  position: absolute;
  z-index: 3;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 0 7px;
  border-left: 1px solid var(--line);
}

.wordmark {
  margin: 0;
  position: relative;
  width: clamp(70px, 6.96vw, 89px);
  aspect-ratio: 2000 / 833;
  pointer-events: none;
}

/* Two wordmarks now carry the chrome — the masthead and the loader — so the
   shader canvas is addressed by class rather than by id. */
.wordmark-source,
.wordmark canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.wordmark-source {
  filter: invert(1);
  opacity: 0.95;
}

.wordmark canvas {
  opacity: 0;
  filter: drop-shadow(0 1px 3px rgba(238, 244, 248, 0.12));
  transition: opacity 240ms ease;
}

.wordmark.is-shader-ready .wordmark-source { opacity: 0; }
.wordmark.is-shader-ready canvas { opacity: 1; }

.colophon {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  color: var(--muted);
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
}

.colophon span:last-child { opacity: 0.72; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Celestial conditions are projected from seeded points in the body's world
   volume. There is no ledger, corner cluster, orbit drawing or common ring. */
.celestial-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.98);
}

.celestial-datum {
  --celestial-x: 50vw;
  --celestial-y: 50vh;
  --celestial-scale: 1;
  --celestial-opacity: 0;
  --celestial-blur: 0px;
  position: absolute;
  top: 0;
  left: 0;
  max-width: min(280px, 36vw);
  margin: 0;
  color: rgba(232, 247, 255, 0.86);
  font-size: clamp(6px, 0.52vw, 8px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--celestial-opacity);
  filter: blur(var(--celestial-blur));
  transform: translate3d(var(--celestial-x), var(--celestial-y), 0)
    translate(-50%, -50%) scale(var(--celestial-scale));
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.celestial-datum:nth-child(3n + 1) { color: color-mix(in srgb, var(--accent) 62%, white); }
.celestial-datum:nth-child(4n + 2) { letter-spacing: 0.2em; }
.celestial-phase { font-size: clamp(7px, 0.66vw, 10px); letter-spacing: 0.3em; }
.celestial-illum { color: var(--accent); }
.celestial-live { letter-spacing: 0.22em; }
.celestial-hash {
  width: min(350px, 44vw);
  max-width: min(350px, 44vw);
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(5px, 0.43vw, 7px);
  letter-spacing: 0.08em;
}

/* This invisible footprint preserves the previously approved tracker-window
   allocation without turning the metadata back into a visible HUD block. */
.celestial-reservation {
  position: absolute;
  z-index: 0;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  width: clamp(320px, 32vw, 430px);
  height: 220px;
  pointer-events: none;
}



.vision {
  left: max(20px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 112px;
  height: 112px;
}

.footer-actions button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 6px 9px;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease;
}

.footer-actions button:hover,
.footer-actions button:focus-visible {
  outline: 0;
  color: #02050d;
  background: var(--accent);
}

.vision-monitor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;
}

#vision-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.monitor-label {
  position: absolute;
  z-index: 4;
  right: 5px;
  bottom: 4px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000000;
  font-size: 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.footer-actions {
  position: absolute;
  z-index: 3;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 6px;
}

.interaction-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom));
  padding: 6px 9px;
  color: rgba(232, 247, 255, 0.6);
  background: rgba(2, 5, 13, 0.45);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 600ms ease;
}

.interaction-hint.is-hidden { opacity: 0; }

#loader {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  /* Pitch black, not the night blue the piece sits on: the loader is the one
     surface with no sky behind it yet. */
  background: #000000;
  transition: opacity 650ms ease, visibility 650ms;
}

#loader.is-complete { opacity: 0; visibility: hidden; }

/* The loader wears the wordmark at reading size, and the chrome shader fades
   over the flat SVG the moment it compiles. */
.loader-wordmark {
  width: clamp(168px, 21vw, 268px);
  animation: breathe 3.2s ease-in-out infinite;
}

#loader p {
  margin: 0;
  color: rgba(226, 228, 230, 0.58);
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Chrome, the same neutral silver the wordmark shader resolves to — no accent
   blue anywhere on this screen. */
.loader-bar { width: 176px; height: 1px; background: rgba(226, 228, 230, 0.12); overflow: hidden; }
.loader-bar i {
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(226, 228, 230, 0) 0%,
    rgba(214, 218, 221, 0.85) 38%,
    #ffffff 52%,
    rgba(198, 203, 207, 0.7) 68%,
    rgba(226, 228, 230, 0) 100%
  );
  animation: load 1.4s ease-in-out infinite;
}

@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes breathe { 50% { opacity: 0.78; } }

/* Short viewports: the tracker and the hint stand down so the plate keeps its
   full height and nothing lands on top of the overlay. */
@media (max-height: 620px) {
  .vision, .interaction-hint { display: none; }
}

@media (max-width: 760px) {
  .masthead { top: 14px; left: 14px; }
  /* Scoped to the masthead: the loader wears the same wordmark at hero size. */
  .masthead .wordmark { width: 62px; }
  .loader-wordmark { width: min(62vw, 232px); }
  .celestial-reservation { top: 14px; right: 14px; width: 250px; height: 205px; }
  .celestial-datum { max-width: 42vw; font-size: 6px; }
  .celestial-phase { font-size: 7px; }
  .celestial-hash { width: 45vw; max-width: 45vw; font-size: 5px; }
  .vision {
    display: block;
    left: max(14px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 80px;
    height: 80px;
  }
  .footer-actions { right: 14px; bottom: 14px; }
  .interaction-hint { bottom: 110px; width: max-content; max-width: 82vw; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}