/* Kinnection, bouwstenen: de staven naar het slot. Prompt 05, gekozen door Chalo op 20-09-2026.
   De overgang van de pagina naar het indigo slot. De zes dagen van Joke staan als staven op de rand van het indigo
   en komen omhoog wanneer je aankomt: wie blijft oefenen, bouwt iets op. De lijn van de pagina landt op de eerste staaf.
   Het omhoogkomen staat in slot.js. Met beweging uit, of zonder script, staan de staven er meteen.

   Exact één keer per pagina, meteen boven de .band. Dit vervangt op de website de weefovergang.
   De staven zijn versiering: aria-hidden="true".

   Opbouw: <div class="slotstaven"> met zes <i>, elk met een <b> voor de dag. De lijn landt op gsm en tablet op de eerste staaf
   (de lijn loopt daar links) en op scherm op de laatste en hoogste staaf, rechts. Daarom zitten er twee knopen in:
   .knoop-eerste in de eerste <i> en .knoop-laatste in de laatste, elk met data-knoop en data-lijn-einde. Er is er altijd maar één zichtbaar.
   Zorg dat op scherm de knoop voor het slot ook rechts staat (knoop-rechts), dan valt de lijn recht naar beneden. */

.slotstaven{position:relative;z-index:var(--layer-content);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap-inline);align-items:end;height:var(--size-chart);padding-inline:var(--gap-inline) var(--page-margin-end);margin-bottom:calc(var(--stroke-border) * -0.5);clip-path:inset(calc(var(--knot-size) * -1) 0 0 0)}
.slotstaven i{position:relative;display:flex;justify-content:center;padding-top:var(--gap-inline);border-radius:var(--radius-control) var(--radius-control) 0 0;background:var(--color-moment);transition:transform var(--duration-story) var(--ease-spring);transition-delay:calc(var(--stagger) * var(--n))}
.slotstaven i:nth-child(1){--n:0;height:34%}
.slotstaven i:nth-child(2){--n:1;height:46%}
.slotstaven i:nth-child(3){--n:2;height:58%}
.slotstaven i:nth-child(4){--n:3;height:72%}
.slotstaven i:nth-child(5){--n:4;height:86%}
.slotstaven i:nth-child(6){--n:5;height:100%}
.slotstaven b{font:var(--type-button-sm);color:var(--color-text-on-moment-muted)}
/* De laatste knoop van de lijn: bovenop de eerste staaf, precies onder de strook van de lijn */
.slotstaven .knoop-laatste{display:none}
.slotstaven .knoop{left:calc(var(--page-margin-start) / 2 - var(--gap-inline) - var(--knot-size) / 2);top:calc(var(--knot-size) / -2)}
/* Nog niet in beeld: de staven zitten nog onder de rand */
.slotstaven.wacht i{transform:translateY(100%)}
@media (min-width:900px){
  .slotstaven{gap:var(--gap-tight);height:calc(var(--size-chart) * 1.5);padding-right:var(--gap-inline)}
  .slotstaven .knoop-eerste{display:none}
  .slotstaven .knoop-laatste{display:block;left:auto;right:calc(var(--page-margin-end) / 2 - var(--gap-inline) - var(--knot-size) / 2)}
  .slotstaven i{padding-top:var(--gap-tight);border-radius:var(--radius-card) var(--radius-card) 0 0}
}