/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  THE STUDIO — the monitor, static styles                          ║
   ║  The cycle keyframe and per-friend timings are generated into     ║
   ║  studio.generated.css from data/friends.json.                     ║
   ╠═══════════════════════════════════════════════════════════════════╣
   ║  MEASURED ASSET GEOMETRY — do not guess these. They were sampled  ║
   ║  from the alpha channel of the CRT asset:                         ║
   ║      screen hole   left 21.2%  top 15.7%  w 57.7%  h 50.2%        ║
   ║  Swap the CRT for another render with the SAME framing and no CSS ║
   ║  here needs to change.                                            ║
   ║                                                                   ║
   ║  ★ THE CONFLICT THAT NO LONGER EXISTS ★                           ║
   ║    On JanitorAI this monitor and the drying line lived on one     ║
   ║    page, and a page has only one #hash. Clicking a friend         ║
   ║    therefore reset the drying line back to print 1 — the old      ║
   ║    stylesheet called it "unavoidable in CSS", and on one page it  ║
   ║    was. The monitor has its own page now, so both can use         ║
   ║    :target freely and neither steals from the other.              ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.crt-zone { position: relative; padding: 30px 0 20px; overflow: hidden; }

/* the glow the monitor throws into the room */
.crt-zone::before {
  content: ""; position: absolute; left: 50%; top: 8%;
  width: 780px; height: 560px; margin-left: -390px;
  background: radial-gradient(ellipse at center,
    rgba(150,200,255,0.16), rgba(90,140,220,0.06) 45%, transparent 72%);
  pointer-events: none; z-index: 0;
  animation: dk-flicker 5.5s infinite;
}
@keyframes dk-flicker {
  0%,100% { opacity: 1; }
  42% { opacity: 0.86; }
  44% { opacity: 1; }
  71% { opacity: 0.78; }
  73% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .crt-zone::before { animation: none; } }

.crt { position: relative; width: 100%; max-width: 620px; margin: 0 auto; z-index: 2; }
.crt-body { width: 100%; display: block; position: relative; z-index: 3; }
.screen {
  position: absolute; left: 21.2%; top: 15.7%; width: 57.7%; height: 50.2%;
  overflow: hidden; background: #05070c;
}
.glass {
  position: absolute; left: 21.2%; top: 15.7%; width: 57.7%; height: 50.2%;
  z-index: 4; pointer-events: none; opacity: 0.55;
}
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px);
}

/* state anchors, fixed so a #hash never scrolls the page */
.fr-st { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.fr { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.fr-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.75) contrast(1.15) brightness(0.95);
}
.fr-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  text-align: center; padding: 5px 4px;
  background: linear-gradient(0deg, rgba(4,6,12,0.92), transparent);
  color: #cfe4ff; font-family: var(--mono);
  font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase;
  text-shadow: 0 0 10px rgba(140,190,255,0.8);
}
.fr-hit { position: absolute; inset: 0; z-index: 5; display: block; }
.fr-open {
  position: absolute; right: 5px; top: 5px; z-index: 8;
  font-family: var(--mono); font-size: 0.56rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: #cfe4ff; text-decoration: none;
  border: 1px solid rgba(190,220,255,0.5);
  padding: 2px 6px; background: rgba(4,6,12,0.6);
  transition: 0.2s ease;
}
.fr-open:hover { background: #cfe4ff; color: #05070c; }

/* hovering the screen holds the current face so you can read it */
.crt-zone:not(:has(.fr-st:target)) .screen:hover .fr { animation-play-state: paused; }

@keyframes fr-in {
  0%   { opacity: 0; transform: translate(-9px,3px) skewX(11deg); filter: saturate(4) hue-rotate(70deg) contrast(1.7); }
  28%  { opacity: 1; transform: translate(8px,-3px) skewX(-9deg); filter: invert(1) contrast(1.5); }
  58%  { opacity: 1; transform: translate(-3px,1px) skewX(4deg); filter: saturate(2.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* pointer-events is a DISCRETE property: it flips at the halfway point
   of the animation, giving a 0.9s lockout on a 1.8s run. That IS the
   click cooldown — do not shorten it below ~1.2s or the glitch can be
   re-triggered mid-flight and the screen tears. */
@keyframes fr-cool { 0% { pointer-events: none; } 100% { pointer-events: auto; } }

.auto {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); z-index: 9;
  font-family: var(--mono); font-size: 0.56rem;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); padding: 3px 10px;
  background: rgba(7,4,6,0.7); transition: 0.25s ease;
}
.auto:hover { color: var(--red); border-color: var(--red); }
.crt-zone:not(:has(.fr-st:target)) .auto { opacity: 0.35; }

/* the roster, spelled out under the monitor — the screen shows one face
   at a time, so without this there is no way to see who is on it, and
   no keyboard path to any of them */
.roster {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 34px auto 0; max-width: 760px;
}
.roster a {
  padding: 7px 16px; border: 1px solid var(--line);
  color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.25s ease;
}
.roster a:hover { color: #cfe4ff; border-color: #4a6a8a; box-shadow: 0 0 14px rgba(140,190,255,0.25); }

@media (prefers-reduced-motion: reduce) {
  .fr { animation: none !important; }
  /* with the cycle stopped, hold the first face rather than an empty screen */
  .crt-zone:not(:has(.fr-st:target)) .fr1 { opacity: 1; visibility: visible; }
}

@media screen and (max-width: 520px) {
  .fr-name { font-size: 0.6rem; letter-spacing: 2px; }
  .auto { bottom: 18%; }
}