/* Casepagina met een proces in stappen.

   Voor het eerst gebruikt bij Kasteel van Gaasbeek. Elke stap is een nummer,
   een regel tekst en een of twee beelden. Geen tijdlijn, geen verbindingslijnen:
   de volgorde van de stappen is de volgorde waarin je scrolt. */

.stap-blok{background:#0d0d0d;padding:clamp(40px,7vh,90px) 0}
.stap{margin:0 auto}
.stap + .stap{margin-top:clamp(60px,11vh,140px)}

/* nummer en tekst naast elkaar, tekst niet breder dan comfortabel leest */

/* twee vakken naast elkaar: links het voorstel, rechts de studie */
.stap__paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,22px)}
.stap__vak{position:relative;margin:0;background:#151515;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.stap__vak img{width:auto;height:auto;max-width:52%;max-height:52%;display:block}
.stap__vak--reeks img{position:absolute;opacity:0}
.stap__vak--reeks img.aan{opacity:1}

@media (max-width:700px){
  .stap__paar{grid-template-columns:1fr}
  .stap__vak{aspect-ratio:4/3}
}
/* Wie beweging heeft uitgezet, ziet de reeks als een rij stilstaande vormen. */
@media (prefers-reduced-motion:reduce){
  .stap__vak--reeks{aspect-ratio:auto;padding:8% 6%;display:grid;
    grid-template-columns:repeat(4,1fr);gap:6%;align-content:center}
  .stap__vak--reeks img{position:static;opacity:1;max-width:100%;max-height:none;width:100%}
}

/* In het portfolio staat geen tekst bij de beelden. De uitleg zit daarom achter
   een klein teken in de hoek: het nummer van de stap en een info-knop. Wie wil
   lezen, drukt; wie wil kijken, wordt niet gestoord. */
.stap__paar{position:relative}
.stap__merk{position:absolute;z-index:3;top:clamp(10px,1.2vw,18px);left:clamp(10px,1.2vw,18px);
  display:flex;align-items:center;gap:10px;color:#fff}
.stap__nr{font-size:.8125rem;letter-spacing:.06em;opacity:.5;font-variant-numeric:tabular-nums}
.stap__knop{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;width:28px;height:28px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:.6;transition:opacity .2s ease,border-color .2s ease}
.stap__knop:hover,.stap__knop:focus-visible{opacity:1;border-color:#fff}
.stap__knop .material-icons{font-size:16px}
.stap__knop[aria-expanded="true"]{opacity:1;border-color:#fff;background:rgba(255,255,255,.12)}

/* De uitleg schuift over de onderkant van de twee vakken. */
.stap__uitleg{position:absolute;z-index:2;left:0;right:0;bottom:0;
  background:rgba(8,8,8,.93);color:#fff;
  padding:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,32px)}
.stap__uitleg p{margin:0;max-width:52ch;font-size:clamp(.9375rem,1.25vw,1.0625rem);line-height:1.5}
.stap__uitleg[hidden]{display:none}

@media (max-width:700px){
  .stap__uitleg{position:static;background:#151515;margin-top:2px}
}

/* Alleen voor voorleessoftware: uit beeld, maar wel voorgelezen. */
.enkel-voorlezer{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- de muur van versies ---------- */

/* Bij "heel veel versies" is de hoeveelheid zelf het verhaal. De muur vult zich
   terwijl je scrolt: niet als effect, maar omdat je zo voelt hoeveel er is
   geprobeerd voor er iets overbleef. */
/* de muur erft de hoek-knop van het stappenblok, maar niet de twee kolommen */
.stap__paar.muur,.stap__paar.blader{display:block;gap:0}
.muur{position:relative}
.muur__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:clamp(4px,.7vw,12px);background:#151515;padding:clamp(14px,2vw,28px)}
.muur__vak{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.muur__vak img{width:82%;height:82%;object-fit:contain;
  opacity:0;transform:scale(.94);
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.muur__vak.aan img{opacity:.88;transform:none}

/* de teller loopt mee met wat er te zien is */
.muur__teller{position:absolute;z-index:3;right:clamp(10px,1.2vw,18px);
  top:clamp(10px,1.2vw,18px);color:#fff;opacity:.5;
  font-size:.8125rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}

@media (max-width:700px){
  .muur__raster{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .muur__vak img{opacity:.88;transform:none;transition:none}
}

/* De opbouw van het uiteindelijke merk: een rij die zich van links naar rechts
   invult. Een constructietekening lees je in leesrichting, dus hier geen
   raster maar een rij. */
/* de rij krijgt bovenaan ruimte, anders staat de info-knop over de eerste vorm */
.muur--rij .muur__raster{grid-template-columns:repeat(9,1fr);gap:clamp(2px,.5vw,10px);padding-top:clamp(48px,4.4vw,70px)}
.muur--rij .muur__vak img{width:88%;height:88%}
@media (max-width:820px){ .muur--rij .muur__raster{grid-template-columns:repeat(3,1fr)} }

/* ---------- groot beeld boven de muur ----------

   De versies lijken sterk op elkaar: op duimnagelformaat zie je het verschil
   niet. Daarom staat er een groot vak boven de muur dat meeloopt met waar je
   scrolt. Het merk staat altijd op dezelfde plek, dus wat verandert springt
   eruit — hetzelfde principe als twee dia's over elkaar leggen. De muur
   eronder blijft tonen hoeveel er zijn. */
.blader__groot{position:relative;aspect-ratio:16/9;background:#151515;overflow:hidden}
.blader__groot img{position:absolute;top:50%;left:50%;height:86%;width:auto;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .1s linear}
.blader__groot img.aan{opacity:1}

@media (max-width:700px){ .blader__groot{aspect-ratio:4/3} }