/* cocentric-room.css — de immersieve ruimte, opnieuw belicht.

   Wat er mis was: negen schermafdrukken van een LICHTE app, op zwart. Ze lazen als negen vellen
   papier die rechtop staan. Een scherm van 95 inch in een donkere ruimte is geen wit vlak - het is
   een lichtbron: het straalt af op de vloer, het heeft een rand, en het staat in een ruimte met
   lucht erin. Dit bestand geeft de ruimte terug wat een render wel heeft en een screenshot niet:
   een lijst om elk scherm, een gloed die de vloer haalt, nevel tussen de wanden en een vignet.

   Het laadt na de inline stijl van cocentric.html en verandert niets aan de opbouw. */

.room{background:#030604}
.room::before{
  background:
    radial-gradient(58% 42% at 50% 34%,rgba(52,209,122,.16),transparent 68%),
    radial-gradient(90% 60% at 50% 96%,rgba(52,209,122,.07),transparent 70%);
}

/* de vloer: donkerder, met de weerschijn van de wanden erop */
.room__floor{
  height:38%;
  background:
    radial-gradient(60% 100% at 50% 0,rgba(52,209,122,.12),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 46%),
    #030604;
}
/* de lichtplas onder de middenwand - dat is wat een scherm met een vloer doet */
.room__stage::after{
  content:"";position:absolute;left:50%;bottom:14%;z-index:1;
  width:min(760px,74vw);height:170px;transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(52,209,122,.20),transparent 70%);
  filter:blur(14px);
}

/* lucht tussen de wanden: zonder nevel staat alles even scherp en blijft het plat */
.room__stage::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 40%,transparent 42%,rgba(3,6,4,.62) 100%),
    linear-gradient(180deg,rgba(3,6,4,.55),transparent 26%);
}

/* Het scherm: een echte lijst om het paneel. Een LED-wand is niet lichter te maken dan wit -
   wat hem een SCHERM maakt is de zwarte rand eromheen, het licht dat hij de ruimte in gooit en
   het feit dat hij niet even fel is als de wand ernaast. */
.screen{
  border-radius:4px;
  border:3px solid #0a0f0c;
  background:#040806;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 60px rgba(120,255,190,.20),
    0 0 140px rgba(52,209,122,.10),
    0 50px 80px -36px #000;
}
.screen img{filter:contrast(1.06) saturate(.95);transform:scale(1.015)}
/* geen blend die oplicht: een glasreflectie is een streep, en de rest van het paneel valt af
   naar de randen zoals bij elk groot scherm */
.screen::after{
  background:
    linear-gradient(116deg,rgba(255,255,255,.10) 0,transparent 26%),
    radial-gradient(130% 95% at 50% 0,transparent 42%,rgba(2,8,5,.55) 100%);
  mix-blend-mode:normal;opacity:1;
}
/* de rasterlijnen van een groot paneel, net zichtbaar - dit is wat "LED" leest in plaats van "print" */
.screen::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px);
}
/* Een wand die van je af draait vangt minder licht. Zonder dat verschil zijn het negen even
   felle rechthoeken en staat er geen ruimte. */
.wall--left .screen{filter:brightness(.62) blur(.25px)}
.wall--right .screen{filter:brightness(.70) blur(.2px)}
.wall--mid .screen{filter:brightness(.94)}

/* de wanden staan verder uit elkaar en de zijwanden draaien scherper weg: dat is het verschil
   tussen drie platen naast elkaar en een U waar je in staat */
.wall{gap:14px}
.wall--left{transform:rotateY(66deg) translateZ(-26px)}
.wall--right{transform:rotateY(-66deg) translateZ(-26px)}
.room__3d{width:min(980px,82vw)}
.room__stage{perspective:1050px;perspective-origin:50% 42%}

/* de woorden: de plaat eronder was een blok, nu loopt hij uit zodat de tekst los in de ruimte staat */
.room__words{
  background:radial-gradient(80% 120% at 50% 30%,rgba(3,8,5,.86),rgba(3,8,5,0) 78%);
  padding:26px 24px 14px;
}
.room__words h2{text-wrap:balance}
.room__words .k{color:#8ff0b4}

/* de ruimte ademt: heel traag, en alleen als de bezoeker beweging niet heeft uitgezet */
@media (prefers-reduced-motion:no-preference){
  .room__3d{animation:room-breathe 26s ease-in-out infinite}
}
@keyframes room-breathe{
  0%,100%{transform:rotateY(-2.2deg)}
  50%{transform:rotateY(2.2deg)}
}
/* De muis stuurt de ruimte (cinescroll.js zet een inline transform). Zodra dat gebeurt moet de
   ademhaling weg zijn, anders vechten twee transforms om hetzelfde element. */
.room__3d[style*="rotate"]{animation:none}

@media(max-width:900px){
  .room__stage::after{display:none}
  .screen img{filter:brightness(.66) contrast(1.1)}
}