/* =====================================================================
   ACHTERGROND voor de scene-schermen

   Hier mag beweging wél: op deze schermen staat geen gameplay die om
   bitrate vecht. Maar geen verlopen -- een zachte was van #0a0b0d naar
   iets lichters is over 1000px maar een handvol 8-bit stappen, en dat
   geeft zichtbare banden.

   Het motief komt uit Amused: flowing ribbons. Vier banen zwaaien door
   het beeld en lopen aan beide kanten buiten de rand door; ze kruisen
   elkaar, en juist die kruisingen geven diepte. Waar twee banen over
   elkaar liggen is het vlak iets lichter, en dat is de enige schaduw in
   het hele ontwerp -- gemaakt met geometrie in plaats van met een verloop.

   Eerdere versie stond op skewX. Skew schuift alleen horizontaal: boven-
   en onderrand blijven kaarsrecht, dus over 2560px las het als drie
   horizontale strepen met een harde rand. Precies het bandeneffect dat
   hierboven de reden is om geen verlopen te gebruiken.
   ===================================================================== */

.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* ---- flowing ribbons ------------------------------------------------
   preserveAspectRatio staat op none: de banen mogen meerekken met het
   doek, ze hebben geen eigen maat om te bewaren. */
.bg__flow{position:absolute;inset:0;width:100%;height:100%}
.bg__band path{fill:currentColor}

/* Elke baan schuift over anderhalve minuut een stukje op. Genoeg om te
   leven op een scherm waar je twee minuten naar kijkt, te traag om de
   encoder iets te kosten. */
/* Dekking. Een plat vlak kost de encoder niets extra, ook niet als het
   lichter is -- het is het verloop dat betaalt. Op 2% was er op stream
   niets van te zien; hier zie je de stroming zonder dat het doek van
   zwart naar grijs verschuift. */
.bg__band--1{color:var(--jade);opacity:.07}
.bg__band--2{color:var(--holy);opacity:.03}
.bg__band--3{color:var(--jade);opacity:.055}
.bg__band--4{color:var(--holy);opacity:.025}
.bg__band--5{color:var(--jade);opacity:.055}
.bg__band--6{color:var(--holy);opacity:.022}

/* De haarlijn hoort bij baan 3 en staat daarom in dezelfde regel: geven
   ze een eigen animatie, dan schuift de lijn van zijn baan af. */
.bg__band--1{animation:bgFlow1 74s ease-in-out infinite alternate}
.bg__band--2{animation:bgFlow2 96s ease-in-out infinite alternate}
.bg__band--3,
.bg__edgewrap{animation:bgFlow3 62s ease-in-out infinite alternate}
.bg__band--4{animation:bgFlow4 110s ease-in-out infinite alternate}
.bg__band--5{animation:bgFlow3 84s  ease-in-out infinite alternate}
.bg__band--6{animation:bgFlow2 132s ease-in-out infinite alternate}

@keyframes bgFlow1{from{transform:translateX(-70px)}to{transform:translateX(70px)}}
@keyframes bgFlow2{from{transform:translateX(80px)} to{transform:translateX(-80px)}}
@keyframes bgFlow3{from{transform:translateX(-55px)}to{transform:translateX(55px)}}
@keyframes bgFlow4{from{transform:translateX(40px)} to{transform:translateX(-40px)}}

/* ---- de banen zakken en stijgen ook --------------------------------
   Horizontaal schuiven alleen was te weinig. Een vloeiende kromme die over
   zichzelf heen schuift verandert bijna niet van vorm: nagemeten over een
   halve periode veranderde 7,6% van de pixels met gemiddeld 0,7 van de 255,
   en dat leest als een stilstaand doek.

   Dus zakt elke baan er ook, op een periode die niet met zijn horizontale
   periode samenvalt. Daardoor lopen de twee bewegingen uit de pas en
   verschuiven de kruisingen doorlopend -- en die kruisingen zijn de enige
   diepte in dit ontwerp, dus dat is precies wat je wil zien bewegen.

   Op de <path> binnen de <g>: de groep doet horizontaal, het pad verticaal.
   Twee transform-animaties op één element gaat niet, geneste transforms
   vermenigvuldigen wel.

   Alleen op het volle doek en niet in een balkstrook. Een strook is 120 of
   248px hoog, dus verticale drift duwt daar een baan uit de strook en dan
   staat de bovenbalk een halve minuut leeg. */
.bg:not(.bg--slice) .bg__band--1 path{animation:bgDriftA 53s ease-in-out infinite alternate}
.bg:not(.bg--slice) .bg__band--2 path{animation:bgDriftB 67s ease-in-out infinite alternate}
.bg:not(.bg--slice) .bg__band--3 path,
.bg:not(.bg--slice) .bg__edgewrap path{animation:bgDriftC 41s ease-in-out infinite alternate}
.bg:not(.bg--slice) .bg__band--4 path{animation:bgDriftD 59s ease-in-out infinite alternate}
.bg:not(.bg--slice) .bg__band--5 path{animation:bgDriftE 47s ease-in-out infinite alternate}
.bg:not(.bg--slice) .bg__band--6 path{animation:bgDriftF 71s ease-in-out infinite alternate}

@keyframes bgDriftA{from{transform:translateY(-26px)}to{transform:translateY(26px)}}
@keyframes bgDriftB{from{transform:translateY(34px)} to{transform:translateY(-34px)}}
@keyframes bgDriftC{from{transform:translateY(-20px)}to{transform:translateY(20px)}}
@keyframes bgDriftD{from{transform:translateY(30px)} to{transform:translateY(-30px)}}
@keyframes bgDriftE{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
@keyframes bgDriftF{from{transform:translateY(14px)} to{transform:translateY(-14px)}}

/* Eén scherpe lijn, door de open strook onder de klok: hij rijdt op de
   bovenrand van baan 3 en leest als een horizon. Zonder zo'n lijn wordt een
   veld van vlakken op 2% dekking pap; met meer dan één gaat het strepen. */
.bg__edge{fill:none;stroke:var(--jade);stroke-opacity:.26;stroke-width:2}

/* ---- strook in een balk ---------------------------------------------
   Hetzelfde doek, maar naast gameplay. Daar gaat de beweging drie keer zo
   traag: dezelfde verschuiving over een veelvoud van de tijd, dus per frame
   verandert er nog minder. Een plat vlak kost de encoder niets; het is de
   verandering tussen frames die betaalt, en die houden we hier zo klein
   mogelijk. De haarlijn hangt aan baan 3 en die valt buiten beide stroken,
   dus die kan weg. */
.bg--slice{position:absolute;inset:0;z-index:0;overflow:hidden}
.bg--slice .bg__band--1{animation-duration:222s}
.bg--slice .bg__band--2{animation-duration:288s}
.bg--slice .bg__band--3{animation-duration:186s}
.bg--slice .bg__band--4{animation-duration:330s}
.bg--slice .bg__band--5{animation-duration:252s}
.bg--slice .bg__band--6{animation-duration:396s}
.bg--slice .bg__edgewrap{display:none}

/* In een strook van 120 of 248px hoog valt een baan op 2 procent weg, en
   dan bewéégt er iets dat je niet ziet: de dure helft zonder de opbrengst.
   Alleen de banen die daadwerkelijk door een strook lopen gaan omhoog. */
.bg--slice .bg__band--2{opacity:.05}
.bg--slice .bg__band--5{opacity:.10}
.bg--slice .bg__band--6{opacity:.05}

/* ---- stofjes --------------------------------------------------------
   De mist van een Mistweaver. Een handvol, traag, klein. */
.bg__mote{
  position:absolute;border-radius:50%;
  animation:moteRise linear infinite;
}
@keyframes moteRise{
  0%  {transform:translateY(0)      translateX(0);   opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{transform:translateY(-460px) translateX(38px);opacity:0}
}

/* Hier stonden twee hoekhaken die het beeldvlak aftekenden. Ze zeiden
   niets, en de rechteronderste viel achter de 'recent'-kaart: wat je zag
   was een streepje dat er per ongeluk leek te staan. */

@media (prefers-reduced-motion:reduce){
  .bg__band,.bg__band path,.bg__edgewrap,.bg__edgewrap path,
  .bg__mote{animation:none}
  .bg__mote{opacity:.6}
}