/* THE ROOM · 1103e · HOLO — the projector above the coffee table (see holo-1103e.js). --hc the voice's colour, --ha how far it has
   materialised (0..1), --he the rhythm (that seat's orb energy). */
#holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s; }
#holo.on { opacity: 1; }
#holo > * { position: absolute; display: block; }
#holo .hb-cv { mix-blend-mode: screen; }
#holo .hb-beam { mix-blend-mode: screen; clip-path: polygon(43% 100%, 57% 100%, 100% 0, 0 0); filter: blur(2px);
  background: linear-gradient(to top, color-mix(in srgb, var(--hc) 60%, transparent), color-mix(in srgb, var(--hc) 16%, transparent) 70%, transparent);
  opacity: calc(var(--ha, 0) * (.32 + .32 * var(--he, 0))); animation: hbFlick 2.3s steps(9) infinite; }
#holo .hb-glow { border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(closest-side, color-mix(in srgb, var(--hc) 30%, transparent), transparent);
  opacity: calc(var(--ha, 0) * (.3 + .5 * var(--he, 0))); }
#holo .hb-pad { border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(closest-side, #fff, var(--hc) 34%, transparent 72%);
  opacity: calc(.3 + .7 * var(--ha, 0)); }
#holo .hb-tag { transform: translate(-50%, -100%); font: 600 8.5px/1 "JetBrains Mono", monospace; letter-spacing: .3em; padding-left: .3em; white-space: nowrap;
  color: var(--hc); text-shadow: 0 0 8px var(--hc), 0 1px 6px #000; opacity: var(--ha, 0); }
@keyframes hbFlick { 0%, 100% { filter: blur(2px) brightness(1); } 40% { filter: blur(2px) brightness(.78); } 55% { filter: blur(2px) brightness(1.18); } }
.lg-globe { transition: opacity .5s; }
#lounge.holo-on .lg-globe { opacity: .25; }   /* the globe steps back while the projector runs */

/* the HOLO switch, in the lounge bar beside ZONE */
.lg-holo { display: inline-flex; align-items: center; gap: 7px; font: 600 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--silver);
  padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(195,201,210,.18); background: rgba(5,5,6,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lg-holo:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.lg-holo b { width: 7px; height: 7px; border-radius: 50%; background: #3a3f46; }
.lg-holo.on { color: #fff; border-color: rgba(225,6,0,.7); background: rgba(225,6,0,.16); }
.lg-holo.on b { background: var(--red); box-shadow: 0 0 8px var(--red); }
.lg-holo.no { color: var(--gold); border-color: rgba(255,212,0,.6); }
@media (max-width: 640px) { .lg-holo span { display: none; } .lg-holo { padding: 8px; } }
@media (prefers-reduced-motion: reduce) { #holo .hb-beam { animation: none; } }