/* ═══════════════════════════════════════════════════════════════════
   De aankondigingsbalk: hoe hij binnenkomt, en hoe hij zich op een
   telefoon gedraagt.

   TWEE PAGINA'S, TWEE BALKEN, ÉÉN GEDRAG
   De homepage heeft .nomad-bar (blauw, wijst naar de artikelen) en de
   trainingspagina heeft .lp-bar (blauw, wijst naar WhatsApp). Die twee
   houden hun eigen inhoud -- ze hebben ook een heel ander doel -- maar
   ze komen op dezelfde manier binnen. Vandaar dat het gedrag hier staat
   en niet twee keer in een pagina.

   WAAROM HIJ PAS NA HET LADEN BINNENSCHUIFT
   Een balk die er meteen staat lees je niet: hij is er al voordat je
   kijkt, en dan is het meubilair. Een balk die een fractie later
   binnenschuift trekt je oog precies één keer, en dat is genoeg.

   De vertraging is bewust kort (0,35s). Lang genoeg dat de pagina er
   al staat, kort genoeg dat het geen wachten wordt.

   WAAROM MAX-HEIGHT EN NIET TRANSFORM
   Met een transform zou de balk over de pagina heen schuiven en een
   blauwe streep achterlaten waar hij vandaan kwam. Met max-height duwt
   hij de pagina netjes naar beneden, precies zoals hij daarna ook
   blijft staan. Dat verschuift de inhoud één keer, vlak na het laden,
   en daarna nooit meer.
   ═══════════════════════════════════════════════════════════════════ */

.balk-in{
  overflow:hidden;
  animation:balk-zak .5s cubic-bezier(.22,.9,.3,1) .35s both;
}
@keyframes balk-zak{
  from{ max-height:0; opacity:0 }
  to{ max-height:9rem; opacity:1 }
}

/* Wie beweging heeft uitgezet krijgt de balk gewoon meteen, zonder
   tussenstap. Niet verbergen -- er staat inhoud in die ertoe doet. */
@media (prefers-reduced-motion:reduce){
  .balk-in{animation:none}
}

/* ── De korte versie voor een telefoon ────────────────────────────
   Op een computer past een opsomming van zes instrumenten prima. Op
   een telefoon wordt dat drie regels, en dan is de balk hoger dan de
   kopbalk eronder -- dat leest als een storing in plaats van als een
   aankondiging.

   Daarom twee teksten in de HTML, en niet één die afgekapt wordt: een
   afgekapte zin mist zijn eigen pointe. De korte is geen samenvatting
   maar een eigen zin. */
.balk-kort{display:none}
@media (max-width:720px){
  .balk-lang{display:none}
  .balk-kort{display:inline}
}