/* De laadbalk van alle kamers (Nikol, 06-10: "als je op een kamer klikt en hij gaat laden er altijd een loading
   balkje komt zodat degene die kijkt altijd weet dat de site bijna geladen is en niet denkt dat de kamer leeg is").
   De markup staat in elke pagina zelf, zodat hij er meteen is, nog voor three.js binnen is; laadbalk.js vult hem.
   Het glanslicht loopt via transform: dat tekent de browser buiten de pagina om, dus het blijft bewegen als de
   kamer even vastzit op het voorbereiden van de shaders. */
#laadbalk { position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:40;
            display:flex; flex-direction:column; align-items:center; gap:14px;
            --lb:239,231,214; color:rgb(var(--lb));
            pointer-events:none; transition:opacity .45s; }
#laadbalk.weg { opacity:0; }
#laadbalk .lb-naam { font:400 24px/1 "Seraline Orchid", Georgia, serif; word-spacing:-.09em; }
#laadbalk .lb-spoor { position:relative; width:min(220px, 56vw); height:2px; overflow:hidden;
                      background:rgba(var(--lb),.22); }
#laadbalk .lb-vul { position:absolute; inset:0; background:rgb(var(--lb)); transform-origin:left center;
                    transform:scaleX(0); transition:transform .35s ease-out; }
#laadbalk .lb-glans { position:absolute; top:0; bottom:0; width:40%; left:0;
                      background:linear-gradient(90deg, rgba(var(--lb),0), rgba(var(--lb),.85), rgba(var(--lb),0));
                      animation:lb-glans 1.3s linear infinite; }
@keyframes lb-glans { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
#laadbalk .lb-tekst { font:400 10px/1 "CS Alice Mono", ui-monospace, monospace; letter-spacing:.2em;
                      text-transform:uppercase; opacity:.72; white-space:nowrap; }
/* op een lichte sluier (de caravan, het huis op canvas): inkt */
#laadbalk.donker { --lb:10,10,10; }
body.schoon #laadbalk { display:none; }