/* De hero-loop: zeven bedrijven die dezelfde reis maken, van roadmap naar
   ochtend. Opbouw en klok staan in js/loop.js, de bedrijven in
   js/loop-bedrijven.js, het waarom in
   docs/superpowers/specs/2026-10-01-hero-loop-design.md.

   Twee afspraken die dit bestand overal houdt:

   1. De standaardopmaak is de EINDSTAND. Elke animatie beschrijft alleen waar
      iets vandaan komt (fill-mode both). Zonder beweging — "minder beweging"
      aan, of geen JavaScript — staat alles dus gewoon op zijn plek.
   2. Elke animatie staat binnen @media (prefers-reduced-motion:
      no-preference). scripts/toets-loop.mjs houdt dat bij.

   Alles binnen het scherm is in em, en de letter van het vlak schaalt met de
   breedte van het venster. Zo is het scherm op een telefoon een verkleinde
   versie van hetzelfde beeld, niet een ander beeld.
   Media queries op het venster volstaan: het scherm is óf de rechterhelft van
   de hero (laptop) óf bijna de volle breedte (telefoon).

   Wie schermafdrukken maakt met puppeteer: gebruik page.screenshot met een
   clip, niet element.screenshot. Dat laatste zet het venster even anders, de
   telefoonregel hieronder springt aan en uit, en een kaart die net weer
   verschijnt start zijn animatie opnieuw en staat op de afdruk nog leeg. */

.loop {
  position: relative;
  width: 100%;
  max-width: 35rem;
}

.loop__scherm {
  --loop-kleur: var(--groen);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  background: var(--inkt);
  border-radius: var(--rond);
  padding: 0.6rem;
  box-shadow: var(--schaduw);
  overflow: hidden;
}

.loop__balk {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.2rem 0.55rem;
}

.loop__stip {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.loop__label {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  white-space: nowrap;
}

.loop__label::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--loop-kleur);
}

.loop__vlak {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--vlak);
  border-radius: calc(var(--rond) - 0.4rem);
  padding: 0.9em;
  font-family: var(--font-tekst);
  /* Telefoon en tablet: het scherm is bijna zo breed als het venster. */
  font-size: clamp(9px, 2.5vw, 14px);
  color: var(--inkt);
  overflow: hidden;
}

.loop__fase {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.loop__link {
  display: inline-block;
  margin-top: var(--maat-s);
  font-size: 0.92rem;
  font-weight: 600;
}

/* — De pauzeknop. Buiten het aria-hidden-deel; staat er pas als er beweging is. */
/* In de balk, naast de stipjes: daar dekt hij niets af. */
.loop__pauze {
  position: absolute;
  left: 3.1rem;
  top: 0.45rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--wit);
  cursor: pointer;
}

.loop__pauze[hidden] {
  display: none;
}

.loop__pauze:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Twee balkjes, of een driehoek als hij stilstaat. */
.loop__pauze::before {
  content: "";
  width: 0.45rem;
  height: 0.55rem;
  border-left: 0.14rem solid currentColor;
  border-right: 0.14rem solid currentColor;
  box-sizing: border-box;
}

.loop__pauze[data-stil]::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  border-color: transparent transparent transparent currentColor;
  margin-left: 0.15rem;
}

/* ------------------------------------------------------------ de kaarten -- */

.k {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  background: var(--wit);
  border-radius: 0.7em;
  padding: 0.6em 0.65em;
  box-shadow: 0 1px 0 var(--lijn);
}

.k__wie {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.68em;
  color: var(--inkt-zacht);
}

.k__wie img {
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.k__kop {
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.25;
}

.k__getal {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.75em;
  line-height: 1;
  color: var(--inkt);
}

/* getal: een lijn die zichzelf tekent */
.k__lijn {
  width: 100%;
  height: 2.2em;
  overflow: visible;
}

.k__lijn polyline {
  fill: none;
  stroke: var(--groen);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* zoekopdracht: het eigen resultaat klimt tussen de anderen door */
.k__term {
  font-size: 0.7em;
  color: var(--inkt-zacht);
  font-style: italic;
}

.k__rang {
  --rij: 0.72em;
  position: relative;
  display: grid;
  gap: 0.22em;
}

.k__rang span {
  height: 0.5em;
  border-radius: 0.25em;
  background: #ece9e2;
}

.k__rang .k__eigen {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--plek) * var(--rij));
  background: var(--groen);
}

/* voorna: twee balkjes, de tweede groeit */
.k__voorna {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  height: 3.2em;
}

.k__voorna span {
  flex: 1;
  border-radius: 0.3em 0.3em 0 0;
  background: #d9d5cc;
  transform-origin: bottom;
}

.k__voorna span + span {
  background: var(--groen);
}

/* lijst */
.k__rij {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.72em;
  padding-top: 0.3em;
  border-top: 1px solid #f0ede6;
}

.k__rij:first-of-type {
  border-top: 0;
}

.k__rij img {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.3em;
  object-fit: cover;
  background: color-mix(in srgb, var(--loop-kleur) 30%, var(--wit));
  flex: none;
}

.k__rij::after {
  content: "✓";
  margin-left: auto;
  color: var(--groen);
}

/* termijn: twee weken als vakjes */
.k__dagen {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2em;
}

.k__dagen span {
  aspect-ratio: 1;
  border-radius: 0.2em;
  background: #ece9e2;
}

.k__dagen .is-b {
  background: var(--loop-kleur);
}

.k__dagen .is-n {
  background: var(--acc);
}

/* voorstel: een beeld met "Ja" en "Anders". Het kleurverloop staat eronder
   zolang de foto nog laadt. */
.k__beeld {
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
  min-height: 3.2em;
  background:
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(135deg, var(--loop-kleur), color-mix(in srgb, var(--loop-kleur) 45%, #f3dcc4));
}

.k__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.k__knoppen {
  display: flex;
  gap: 0.4em;
}

.k__knoppen span {
  font-size: 0.66em;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: var(--wit);
  white-space: nowrap;
}

.k__knoppen .k__ja {
  border-color: var(--acc-diep);
  background: var(--acc-diep);
  color: var(--wit);
}

/* De brede kaart onderaan: een voorstel ligt dan naast zijn beeld. */
.k--breed.k--voorstel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  column-gap: 0.8em;
}

.k--breed.k--voorstel .k__beeld {
  grid-row: 1 / span 3;
  align-self: stretch;
}

/* --------------------------------------------------------------- de fasen -- */

/* 1 · De roadmap */
.r-kop {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.15em;
}

.r-weken {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
  align-items: start;
}

.r-week {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-top: 0.3em solid var(--loop-kleur);
  border-radius: 0.6em;
  padding: 0.55em;
}

.r-week b {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--inkt-zacht);
}

.r-week span {
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.2;
}

.r-week i {
  display: block;
  height: 0.4em;
  border-radius: 0.2em;
  background: #ece9e2;
}

.r-week i:nth-of-type(2) {
  width: 80%;
}

.r-week i:nth-of-type(3) {
  width: 55%;
}

/* Elke week die oplicht krijgt zijn vinkje. */
.r-week::after {
  content: "✓";
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-size: 0.7em;
  color: var(--wit);
  background: var(--groen);
}

/* Het bouwplan onder de roadmap: vier stukken die zich vullen. */
.r-plan {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45em;
  background: var(--wit);
  border-radius: 0.6em;
  padding: 0.7em 0.8em;
}

.r-plan b {
  font-size: 0.68em;
  font-weight: 600;
  color: var(--inkt-zacht);
}

.r-balk {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3em;
}

.r-balk span {
  height: 0.7em;
  border-radius: 0.35em;
  background: var(--loop-kleur);
  transform-origin: left;
}

.r-balk span:nth-child(4) {
  background: #ece9e2;
}

/* Wie eraan gaat werken: het team schuift aan. */
.r-team {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.35em;
}

.r-team img {
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
}

.r-doel {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85em;
  background: var(--wit);
  border-radius: 0.6em;
  padding: 0.55em 0.7em;
}

.r-doel::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--acc);
  flex: none;
}

/* 2 · De site die het plan draagt. Eerst neutraal; met .is-merk krijgt hij
   de kleur en de letter van het bedrijf. */
.s-site {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  border-radius: 0.6em;
  padding: 0.8em;
  background: var(--wit);
  border: 1px solid var(--lijn);
  transition: background-color 0.6s ease;
}

.s-nav {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.s-logo {
  font-weight: 700;
  font-size: 0.9em;
  color: #b9b4aa;
  transition: color 0.6s ease;
}

.s-nav i {
  width: 2.2em;
  height: 0.35em;
  border-radius: 0.2em;
  background: #e7e3da;
}

.s-nav i:first-of-type {
  margin-left: auto;
}

.s-kop {
  font-size: 1.6em;
  line-height: 1.1;
  font-weight: 700;
  color: #cfcac0;
  transition: color 0.6s ease;
}

.s-tegels {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
}

.s-tegels span {
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
  background: #ece9e2;
  transition: background-color 0.6s ease;
}

/* De foto's van het bedrijf komen pas met zijn merk: eerst het raamwerk. */
.s-tegels img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease 0.15s;
}

.s-site.is-merk .s-tegels img {
  opacity: 1;
}

.s-regel {
  height: 0.45em;
  width: 70%;
  border-radius: 0.25em;
  background: #ece9e2;
}

.s-regel + .s-regel {
  width: 45%;
  margin-top: -0.25em;
}

.s-knop {
  align-self: flex-start;
  width: 7em;
  height: 1.6em;
  border-radius: 999px;
  background: #d9d5cc;
  transition: background-color 0.6s ease;
}

.s-site.is-merk {
  background: color-mix(in srgb, var(--loop-kleur) 7%, var(--wit));
}

.s-site.is-merk .s-logo,
.s-site.is-merk .s-kop {
  color: var(--loop-kleur);
}

/* Met merk worden de tegels "foto's" in de kleur van het bedrijf. */
.s-site.is-merk .s-tegels span {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(160deg, color-mix(in srgb, var(--loop-kleur) 35%, var(--wit)), color-mix(in srgb, var(--loop-kleur) 70%, #f3dcc4));
}

.s-site.is-merk .s-tegels span:nth-child(2) {
  background:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.35), transparent 50%),
    linear-gradient(200deg, var(--loop-kleur), color-mix(in srgb, var(--loop-kleur) 50%, #f3dcc4));
}

.s-site.is-merk .s-knop {
  background: var(--loop-kleur);
}

/* De letter van het bedrijf komt uit wat het toestel al heeft: nul downloads. */
.letter-schreef .s-logo,
.letter-schreef .s-kop {
  font-family: Georgia, "Times New Roman", serif;
}

.letter-rond .s-logo,
.letter-rond .s-kop {
  font-family: ui-rounded, "Trebuchet MS", "Segoe UI", sans-serif;
}

.letter-smal .s-logo,
.letter-smal .s-kop {
  font-family: "Bahnschrift", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-stretch: condensed;
  letter-spacing: -0.01em;
}

/* 3 · Elke ochtend je Tryb */
.o-tegels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
}

.o-tegel {
  background: var(--wit);
  border-radius: 0.7em;
  padding: 0.4em;
  text-align: center;
}

.o-tegel b {
  display: block;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.45em;
  line-height: 1.1;
}

.o-tegel span {
  font-size: 0.64em;
  color: var(--inkt-zacht);
}

.o-tegel:nth-child(2) b {
  color: var(--groen);
}

.o-tegel:nth-child(3) b {
  color: var(--acc-diep);
}

.o-groet {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78em;
}

.o-groet img {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  object-fit: cover;
}

.o-kaarten {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  gap: 0.5em;
}

.o-kaarten .k--breed {
  grid-column: 1 / -1;
}

/* 4 · Flitsen: één kaart per bedrijf, groot in het midden */
.f-fase {
  justify-content: center;
  align-items: center;
}

.f-naam {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--wit);
  background: var(--loop-kleur);
  border-radius: 999px;
  padding: 0.25em 0.8em;
}

.f-fase .k {
  width: 70%;
  font-size: 1.45em;
}

.f-fase .k--voorstel .k__beeld {
  min-height: 4em;
}

/* 5 · Eindbeeld: de zeven wegen vloeien samen in het merk. Dit is de enige
   fase waarin de eindstand niet de standaardopmaak is (kop en labeltjes zijn
   aan het eind weg); hij verschijnt dan ook alleen als er beweging is. */
.e-fase {
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.4em;
}

.e-kop {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.7em;
  line-height: 1.15;
}

.e-wegen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em;
  margin-top: 0.6em;
  max-width: 85%;
}

.e-wegen span {
  font-size: 0.82em;
  color: var(--wit);
  border-radius: 999px;
  padding: 0.25em 0.75em;
}

.e-logo {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 34%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.e-bron { fill: var(--acc); }
.e-lid { fill: var(--groen); }
.e-micro { fill: var(--groen); fill-opacity: 0.55; }

.e-lijn {
  stroke: var(--groen);
  stroke-width: 1.1;
  stroke-opacity: 0.32;
}

.e-bron,
.e-lid,
.e-micro {
  transform-box: fill-box;
  transform-origin: center;
}

.e-merk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
}

.e-woord {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.55em;
  letter-spacing: -0.01em;
}

.e-vonk {
  color: var(--acc);
}

.e-groei {
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 0.95em;
  color: var(--acc-diep);
  margin-top: 0.15em;
}

/* Laptop: het scherm is de rechterhelft van de hero. */
@media (min-width: 52rem) {
  .loop__vlak {
    font-size: clamp(9px, 1.02vw, 13px);
  }
}

/* Telefoon: twee kaarten naast elkaar, de derde valt weg, en alles een slag
   groter zodat het nog te lezen is. */
@media (max-width: 30rem) {
  /* Vierkant in plaats van 4 bij 3: op deze breedte past de ochtend anders niet. */
  .loop__scherm {
    aspect-ratio: 1 / 1;
  }

  .loop__vlak {
    font-size: clamp(9px, 3.1vw, 13px);
    padding: 0.7em;
  }

  .o-kaarten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .o-kaarten .k:nth-child(3) {
    display: none;
  }

  .r-week i {
    display: none;
  }

  .f-fase .k {
    width: 80%;
  }
}

/* -------------------------------------------------------------- beweging -- */

@media (prefers-reduced-motion: no-preference) {
  .loop__fase {
    animation: loop-in 0.5s ease both;
  }

  /* De roadmap: de weken lichten één voor één op, dan het doel. */
  .r-week {
    animation: loop-op 0.5s ease both;
  }

  .r-week:nth-child(1) { animation-delay: 0.2s; }
  .r-week:nth-child(2) { animation-delay: 0.5s; }
  .r-week:nth-child(3) { animation-delay: 0.8s; }
  .r-week:nth-child(4) { animation-delay: 1.1s; }

  .r-week::after {
    animation: loop-flits 0.35s ease both;
  }

  .r-week:nth-child(1)::after { animation-delay: 0.5s; }
  .r-week:nth-child(2)::after { animation-delay: 0.8s; }
  .r-week:nth-child(3)::after { animation-delay: 1.1s; }
  .r-week:nth-child(4)::after { animation-delay: 1.4s; }

  .r-plan {
    animation: loop-op 0.5s ease 1.3s both;
  }

  .r-balk span {
    animation: loop-vul 0.6s ease-out both;
  }

  .r-balk span:nth-child(1) { animation-delay: 1.5s; }
  .r-balk span:nth-child(2) { animation-delay: 1.7s; }
  .r-balk span:nth-child(3) { animation-delay: 1.9s; }
  .r-balk span:nth-child(4) { animation-delay: 2.1s; }

  .r-team img {
    animation: loop-flits 0.35s ease both;
  }

  .r-team img:nth-of-type(1) { animation-delay: 1.8s; }
  .r-team img:nth-of-type(2) { animation-delay: 1.9s; }
  .r-team img:nth-of-type(3) { animation-delay: 2s; }
  .r-team img:nth-of-type(4) { animation-delay: 2.1s; }
  .r-team img:nth-of-type(5) { animation-delay: 2.2s; }
  .r-team img:nth-of-type(6) { animation-delay: 2.3s; }

  .r-doel {
    animation: loop-op 0.5s ease 1.6s both;
  }

  /* De site: de tegels bouwen op; de kleur volgt via .is-merk (transition). */
  .s-tegels span {
    animation: loop-groei 0.5s ease both;
  }

  .s-tegels span:nth-child(2) { animation-delay: 0.15s; }
  .s-tegels span:nth-child(3) { animation-delay: 0.3s; }

  /* De ochtend: tegels, groet, en dan de kaarten één voor één. */
  .o-tegel {
    animation: loop-op 0.45s ease both;
  }

  .o-tegel:nth-child(2) { animation-delay: 0.12s; }
  .o-tegel:nth-child(3) { animation-delay: 0.24s; }

  .o-groet {
    animation: loop-in 0.5s ease 0.5s both;
  }

  .o-kaarten .k {
    animation: loop-op 0.5s ease both;
  }

  .o-kaarten .k:nth-child(1) { animation-delay: 1s; }
  .o-kaarten .k:nth-child(2) { animation-delay: 1.6s; }
  .o-kaarten .k:nth-child(3) { animation-delay: 2.2s; }
  .o-kaarten .k:nth-child(4) { animation-delay: 2.9s; animation-name: loop-schuif; }

  /* Wat er binnen een kaart beweegt, begint als de kaart er staat. */
  .k__lijn polyline {
    stroke-dasharray: 1;
    animation: loop-teken 1.2s ease-out both;
    animation-delay: inherit;
  }

  .k__rang .k__eigen {
    animation: loop-klim 1.1s cubic-bezier(0.3, 0.7, 0.3, 1) both;
    animation-delay: inherit;
  }

  .k__voorna span + span {
    animation: loop-groei 0.9s ease-out both;
    animation-delay: inherit;
  }

  .k__rij {
    animation: loop-in 0.4s ease both;
  }

  .k__rij:nth-of-type(2) { animation-delay: 0.25s; }
  .k__rij:nth-of-type(3) { animation-delay: 0.5s; }

  .k__dagen .is-n {
    animation: loop-tik 1.2s ease-in-out infinite alternate;
  }

  .k__ja {
    animation: loop-ja 1s ease-in-out 1.2s 2 alternate both;
  }

  /* De vertraging van de kaart doorgeven aan wat erin beweegt. */
  .o-kaarten .k:nth-child(1) * { animation-delay: 1.4s; }
  .o-kaarten .k:nth-child(2) * { animation-delay: 2s; }
  .o-kaarten .k:nth-child(3) * { animation-delay: 2.6s; }
  .o-kaarten .k:nth-child(4) .k__ja { animation-delay: 3.8s; }
  .o-kaarten .k .k__dagen .is-n { animation-delay: 0s; }

  /* Flitsen: elke kaart springt kort naar voren. */
  .f-fase .k {
    animation: loop-flits 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
  }

  .f-fase .k * {
    animation-delay: 0.15s;
  }

  .f-naam {
    animation: loop-in 0.3s ease both;
  }

  /* Het einde, in vier tellen: de kop en de wegen (0 – 1 s), de wegen vliegen
     naar de bron (1 – 1,8 s), het merk groeit eruit (1,6 – 2,7 s), de naam
     verschijnt (2,6 s). */
  .e-kop {
    animation: loop-in 0.4s ease both, loop-weg 0.4s ease 1s forwards;
  }

  .e-wegen span {
    animation: loop-op 0.4s ease both;
    animation-delay: calc(var(--i) * 0.07s);
  }

  /* Pas als loop.js gemeten heeft waar de bron staat. */
  .e-fase.is-samen .e-wegen span {
    animation: loop-op 0.4s ease both, loop-samen 0.65s cubic-bezier(0.55, 0, 0.75, 0.3) forwards;
    animation-delay: calc(var(--i) * 0.07s), calc(1.05s + var(--i) * 0.05s);
  }

  .e-bron {
    animation: loop-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.35) 1.55s both;
  }

  .e-lijn {
    stroke-dasharray: 1;
    animation: loop-teken 0.4s ease-out both;
    animation-delay: calc(1.95s + var(--i) * 0.08s);
  }

  .e-lid {
    animation: loop-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
    animation-delay: calc(2.05s + var(--i) * 0.1s);
  }

  .e-micro {
    animation: loop-pop 0.3s ease-out both;
    animation-delay: calc(2.3s + var(--i) * 0.035s);
  }

  .e-merk {
    animation: loop-in 0.5s ease 2.6s both;
  }

  /* Gepauzeerd: alles staat stil waar het is. */
  .loop__scherm.is-stil * {
    animation-play-state: paused;
  }
}

@keyframes loop-in {
  from { opacity: 0; transform: translateY(0.4em); }
}

@keyframes loop-op {
  from { opacity: 0; transform: translateY(0.8em) scale(0.97); }
}

@keyframes loop-schuif {
  from { opacity: 0; transform: translateX(1.5em); }
}

@keyframes loop-vul {
  from { transform: scaleX(0); }
}

@keyframes loop-groei {
  from { transform: scaleY(0); }
}

@keyframes loop-teken {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes loop-klim {
  from { transform: translateY(calc(var(--stappen) * var(--rij))); }
}

@keyframes loop-tik {
  to { opacity: 0.45; }
}

@keyframes loop-ja {
  to { transform: scale(1.08); box-shadow: 0 0 0 0.35em rgba(201, 112, 46, 0.25); }
}

@keyframes loop-weg {
  to { opacity: 0; transform: scale(0.96); }
}

@keyframes loop-samen {
  to { transform: translate(var(--dx), var(--dy)) scale(0.12); opacity: 0; }
}

@keyframes loop-pop {
  from { transform: scale(0); }
}

@keyframes loop-flits {
  from { opacity: 0; transform: scale(0.88); }
}