/* Entry 034 — Seen By
   Series: Glass Houses.
   Scene art direction: cold planetarium dark (Christian Boragine) — one small sphere
   caught in soft top light between two vast curved shadows; the photograph already
   reads as "one small lit thing in an enormous dark". The hero is a single warm post
   card at centre — the scene's only warm light and its light source — and, around it,
   the room that actually heard it, in three depth layers: four warm friend-dots close
   in, a grey nation of stranger-dots behind, and an outer arc of angular cyan machine
   nodes labelled in a cold mono. One accent — machine cyan — spent only on machines.
   Voices: Libre Caslon Text (the census and the ache — the soul) + Space Mono (the
   machine labels). Sharp 10px radii; cold dark glass; a warm ember ringed by a cold
   crowd. */

:root {
  --deep: #060a17;
  --mid: #24334f;
  --slate: #8fa0bf;
  --on-dark: #dde3ee;
  --ember: #e8c9a0;          /* the warm light — friends + the post */
  --ember-deep: #cfa476;
  --cyan: #7fd4e6;           /* the one accent — machines */
  --cyan-deep: #3c98ad;
  --paper: #f2e8d7;
  --ink: #2a2620;
  --radius: 10px;
}

.seenby-scene {
  position: relative;
  min-height: 860px;
  overflow: hidden;
  border-color: rgba(4, 7, 16, 0.75);
  /* background-first: the planetarium photograph carries the mood; a cool scrim,
     heavier at the corners, leaves the sphere's soft top light alive behind the card. */
  background-image:
    radial-gradient(120% 90% at 50% 44%, rgba(6, 10, 23, 0.10) 0%, rgba(5, 8, 19, 0.42) 58%, rgba(3, 5, 13, 0.78) 100%),
    url("../../public/media/backgrounds/night-07-christian.jpg");
  background-size: cover, cover;
  background-position: center, center 46%;
  background-repeat: no-repeat, no-repeat;
}

/* ------------------------------------------------------------------ */
/* THE ROOM — rings, dots, machines (SVG, full-bleed)                  */
/* ------------------------------------------------------------------ */

.room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ring {
  fill: none;
  stroke-width: 1;
  opacity: 0;
  transition: opacity 1s ease;
}
.ring-friends   { stroke: rgba(232, 201, 160, 0.14); }
.ring-strangers { stroke: rgba(143, 160, 191, 0.10); }
.ring-machines  { stroke: rgba(127, 212, 230, 0.14); stroke-dasharray: 3 9; }

.room.lit .ring { opacity: 1; }

/* layers bloom from the centre */
.layer { opacity: 0; transition: opacity 0.9s ease; }
.room.lit .layer.on { opacity: 1; }

/* friends — warm, close, named */
.friend-dot {
  fill: var(--ember);
  filter: drop-shadow(0 0 7px rgba(232, 201, 160, 0.85));
}
.friend-name {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 14px;
  fill: rgba(232, 201, 160, 0.78);
}

/* strangers — the grey nation */
.stranger-dot { fill: var(--slate); }

/* machines — the cold outer arc */
.machine { cursor: help; }
.machine-node {
  fill: rgba(10, 18, 32, 0.72);
  stroke: var(--cyan);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 8px rgba(127, 212, 230, 0.45));
  transition: filter 0.25s ease, fill 0.25s ease;
}
.machine-label {
  font-family: "Space Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  fill: rgba(127, 212, 230, 0.82);
}
.machine-tether {
  fill: none;
  stroke: rgba(127, 212, 230, 0.16);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}
.machine.lit .machine-node,
.machine:hover .machine-node {
  fill: rgba(127, 212, 230, 0.18);
  filter: drop-shadow(0 0 14px rgba(127, 212, 230, 0.8));
}

/* ------------------------------------------------------------------ */
/* THE POST — the one warm thing                                       */
/* ------------------------------------------------------------------ */

.post {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(330px, 82%);
  display: grid;
  gap: 9px;
  padding: 17px 19px 14px;
  border-radius: var(--radius);
  background: linear-gradient(168deg, var(--paper), #e4d6bf);
  border: 1px solid rgba(255, 246, 230, 0.65);
  box-shadow:
    0 0 0 1px rgba(20, 14, 8, 0.35),
    0 0 90px rgba(232, 201, 160, 0.22),
    0 30px 70px rgba(2, 4, 10, 0.75);
}
.post-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Space Mono", monospace;
  font-size: 11.5px;
  color: rgba(42, 38, 32, 0.62);
}
.post-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #f7efe2;
  background: linear-gradient(150deg, var(--ember-deep), #a97e52);
}
.post-name { font-weight: 700; color: var(--ink); }
.post-time { margin-left: auto; }
.post-text {
  margin: 0;
  font-family: "Libre Caslon Text", serif;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.post-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(42, 38, 32, 0.12);
  font-family: "Space Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(42, 38, 32, 0.55);
}
.post-lock {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1.4px solid rgba(42, 38, 32, 0.45);
  border-top-width: 4px;
}

/* the ache — one Caslon line under the card */
.ache {
  position: absolute;
  left: 50%;
  top: calc(44% + 118px);
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  color: rgba(221, 227, 238, 0.62);
  text-shadow: 0 2px 14px rgba(2, 4, 10, 0.9);
  opacity: 0;
  transition: opacity 1.2s ease 0.2s;
}
.seenby-scene.counted .ache { opacity: 1; }

/* ------------------------------------------------------------------ */
/* THE CENSUS — cold glass control bar                                 */
/* ------------------------------------------------------------------ */

.census {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  width: min(560px, calc(100% - 36px));
  display: grid;
  gap: 10px;
  padding: 16px 20px 12px;
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(20, 30, 52, 0.55), rgba(6, 10, 23, 0.72));
  border: 1px solid rgba(143, 160, 191, 0.22);
  box-shadow: 0 24px 60px rgba(2, 4, 10, 0.65), 0 1px 0 rgba(221, 227, 238, 0.09) inset;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.census-count {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 11px;
}
.census-label {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(221, 227, 238, 0.55);
}
.census-count strong {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.census-sub {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(221, 227, 238, 0.55);
}

.census-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: rgba(221, 227, 238, 0.45);
  background: rgba(6, 10, 23, 0.4);
  border: 1px solid rgba(143, 160, 191, 0.18);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip-friends.on   { color: var(--ember);  border-color: rgba(232, 201, 160, 0.45); background: rgba(232, 201, 160, 0.08); }
.chip-strangers.on { color: var(--slate);  border-color: rgba(143, 160, 191, 0.45); background: rgba(143, 160, 191, 0.08); }
.chip-machines.on  { color: var(--cyan);   border-color: rgba(127, 212, 230, 0.5);  background: rgba(127, 212, 230, 0.08); }

.census-readout {
  margin: 0;
  min-height: 2.8em;
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(221, 227, 238, 0.8);
}
.census-readout .m {
  font-family: "Space Mono", monospace;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.seam {
  margin: 0;
  display: flex;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(143, 160, 191, 0.14);
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 11.5px;
  color: rgba(221, 227, 238, 0.42);
}
.seam-mark { color: var(--cyan); font-style: normal; }

/* ------------------------------------------------------------------ */
/* responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .seenby-scene { min-height: 780px; }
  .post { top: 38%; }
  .ache { top: calc(38% + 112px); font-size: 13.5px; }
  .census { padding: 13px 15px 10px; }
  .census-count strong { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ring, .layer, .ache { transition: none; }
}