/* ==========================================================================
   laadbak.css — het venster waarin de laadbak met uw spullen staat.

   Deze opmaak hoort bij js/laadbak3d.js en js/meubels.js. Zij staat apart van
   index.html omdat de sectie eromheen los verbouwd wordt en dit vaste deel dat
   niet mag voelen.

   ⛔ ZET DE KLEUREN VAN DE MEUBELS HIER NIET. Die komen als vulling uit
   js/meubels.js, want daar staat het licht (bovenvlak vol, rechterkant 0,87,
   linkerkant 0,74). Wie hier een fill zet, breekt dat licht.
   ========================================================================== */

/* De bak: vloer, achterwand en linkerwand. De twee wanden aan de kant van de
   kijker tekenen wij niet, anders kijkt u tegen een dicht blok aan. Het dak en
   de vier staanders staan in stippellijn, zodat u ziet tot waar de bak gaat,
   ook wanneer er nog bijna niets in staat. */
.lb-vloer{ fill:#282D34; stroke:#4E555F; stroke-width:1 }
.lb-wand { fill:#1F242A; stroke:#4E555F; stroke-width:1 }
.lb-wand2{ fill:#1C2127; stroke:#4E555F; stroke-width:1 }
.lb-rand { fill:none;    stroke:#6B7480; stroke-width:1.1; stroke-dasharray:4 4 }

/* ---- de val ----
   De tijden zijn GEMETEN aan de tool van Coppens en niet gekozen: 0,8 seconde
   per stuk met een ease-in, dus versnellend. Dat laatste is het hele punt.
   ⛔ NOOIT EEN EASE-OUT. Onze eerste versie viel af met cubic-bezier(.22,.9,
   .3,1), en dat leest als zweven: het stuk remt af vlak voor het neerkomt,
   precies andersom dan de zwaartekracht. Met een ease-in valt het echt.
   De doorzichtigheid is na 62 procent van de val al weg (bij hen 0,5 van de
   0,8 seconde), zodat het stuk het laatste stuk van zijn val vol in beeld is.
   De stukken beginnen boven het venster, vandaar de 320: dat is meer dan de
   hoogte van het grootste beeldvenster dat laadbak3d.js maakt. */
@keyframes lbVal{
  0%  { transform: translateY(-320px); opacity:0 }
  62% { opacity:1 }
  100%{ transform: none; opacity:1 }
}
.lb-beweegt .lb-stuk{
  animation: lbVal .8s cubic-bezier(.42, 0, 1, 1) backwards;
}
/* Wie in zijn toestel om minder beweging vraagt, krijgt de volle bak ineens.
   Het beeld is dan even waar, alleen zonder het schouwspel. */
@media (prefers-reduced-motion: reduce){
  .lb-beweegt .lb-stuk{ animation:none }
}

/* De naam op de deur van de cabine. Archivo in het zwaarste snit en wijd uit
   elkaar, want zo staat zij ook op hun eigen logobestand. De letterafstand komt
   uit textLength in js/laadbak3d.js en niet uit letter-spacing: dan past de naam
   op elke bakmaat precies tussen de twee deurnaden.
   ⛔ Geen omtreklijn en geen schaduw: dat is de eerste van de vier stijlregels. */
.lb-merk{
  font-family:'Archivo', system-ui, sans-serif; font-weight:800;
  fill:#FF7D38; dominant-baseline:auto; paint-order:normal;
  -webkit-user-select:none; user-select:none;
}