/* Beweging (DESIGN.md §6, ontwerp §5b). Werkt samen met assets/js/beweging.js.
   Harde regel: elke begintoestand die iets verbergt, verschuift of grijs maakt, staat ALLEEN onder
   html.beweging. Die klasse zet beweging.js zelf, en alleen zonder "minder beweging".
   Zonder JavaScript, bij een scriptfout en bij prefers-reduced-motion is dus alles direct zichtbaar.
   Alleen transform, translate, scale en opacity bewegen; kleur alleen bij hover/inkleuren. */

/* ---------- 1. Zwevende tegels: [data-tegels] > .tegel[data-diepte] ---------- */
[data-tegels] { position: relative; }

.tegel {
  position: absolute;
  left: var(--links, auto);
  right: var(--rechts, auto);
  top: var(--boven, auto);
  bottom: var(--onder, auto);
  width: var(--breedte, 120px);
  aspect-ratio: var(--verhouding, 4 / 5);
  border-radius: var(--r-kaart);
  overflow: hidden;
  background: var(--nacht-700);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transform: rotate(var(--draai, 0deg));
  pointer-events: none;
}
.tegel > img, .tegel > video { width: 100%; height: 100%; object-fit: cover; }
/* Tegels die alleen op een breder scherm staan (telefoon: 3–4 tegels) */
.tegel--breed { display: none; }
@media (min-width: 640px) { .tegel--breed { display: block; } }

@keyframes tegel-zweef {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--draai, 0deg)); }
  50%      { transform: translate3d(0, -12px, 0) rotate(calc(var(--draai, 0deg) + 1.5deg)); }
}

/* ---------- 2. Wisselend kleurwoord: [data-wisselwoord] ---------- */
.wissel, .donker .wissel { background: none; color: inherit; }
.wissel__vak {
  display: inline-grid;
  justify-items: var(--wissel-uitlijning, start);
  max-width: 100%;
  vertical-align: bottom;
}
.wissel__vak > * { grid-area: 1 / 1; }
.wissel__maat { visibility: hidden; }
.wissel__nu {
  display: inline-block;
  align-self: start;
  padding-bottom: .14em;           /* ruimte voor staartjes (g, j) binnen het verloop */
  font-kerning: none;              /* zelfde breedte tijdens en na de letterwissel */
  margin-bottom: -.14em;
  background: var(--verloop);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.donker .wissel__nu { background-image: var(--verloop-donker); }
.wissel__nu.is-springen { background: none; }
.wissel__letter { display: inline-block; }
.wissel__letter.is-los { opacity: .55; transform: translateY(var(--sprong, 0)); }
.wissel__letter.is-geland { animation: letter-valt 380ms var(--ease-uit) both; }
@keyframes letter-valt {
  from { opacity: 0; transform: translateY(-.42em); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 3. Bij scrollen ---------- */
/* Inkleuren: woorden gaan van grijs naar volle kleur */
.inkleur__woord { transition: opacity var(--d-mid) var(--ease-uit); }

/* Optellen: cijfers verspringen niet in breedte */
[data-optellen] { font-variant-numeric: tabular-nums; }
.optel__getal { display: inline-block; }

/* Gloed: zachte vlek achter donkere blokken (parallax via data-parallax) */
.gloed {
  position: absolute;
  width: var(--maat, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(var(--gloed-blur));
  pointer-events: none;
}
.gloed--violet { background: var(--gloed-violet); opacity: .75; }
.gloed--ijs    { background: var(--gloed-ijs);    opacity: .45; }
@keyframes gloed-zweef {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4%, -6%, 0) scale(1.08); }
}

/* ---------- 5. Carrousel: .carrousel > .carrousel-rij (> lijst met .pil) ---------- */
.carrousel { display: grid; gap: var(--s-3); }
.carrousel-rij {
  overflow-x: auto;                /* zonder beweging: met de hand te scrollen */
  scrollbar-width: thin;
  padding-block: var(--s-1);
  padding-inline: var(--rand);
}
.carrousel-band { display: flex; width: max-content; }
.carrousel-lijst {
  display: flex;
  gap: var(--s-3);
  margin: 0;
  padding: 0 var(--s-3) 0 0;
  list-style: none;
}
.carrousel .pil { padding: 10px 18px; font-size: var(--t-tekst); white-space: nowrap; background: var(--papier); box-shadow: 0 0 0 1px var(--lijn) inset; }
.donker .carrousel .pil { background: var(--glas); color: var(--op-donker); box-shadow: 0 0 0 1px var(--glas-rand) inset; }
@keyframes band-loopt { to { transform: translate3d(var(--band-stap, -50%), 0, 0); } }

/* ---------- 6. Menubalk compacter na 40px (klasse is-compact, zet beweging.js) ---------- */
/* Vlak en wazigheid op een eigen laag: transform/backdrop-filter op .menubalk zelf zou het
   vaste menupaneel op telefoon (position: fixed) breken. */
.menubalk { position: relative; z-index: 0; transition: background-color var(--d-mid) var(--ease-uit), box-shadow var(--d-mid) var(--ease-uit), transform var(--d-mid) var(--ease-uit); }
.menubalk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity var(--d-mid) var(--ease-uit);
  pointer-events: none;
}
.menubalk.is-compact { background-color: transparent; }
.menubalk.is-compact::before { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menubalk::before { background: rgba(255, 255, 255, .96); }
}

/* ======================================================================
   Alles hieronder alleen als beweging.js draait én er geen "minder beweging" is.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Tegels zweven; de cursor-verschuiving zet het script via de losse 'translate'-eigenschap */
  html.beweging .tegel {
    animation: tegel-zweef var(--d-zweef) var(--ease-in-uit) infinite;
    will-change: transform, translate;
  }
  html.beweging .tegel:nth-child(2n) { animation-duration: calc(var(--d-zweef) * .8); animation-delay: -3s; }
  html.beweging .tegel:nth-child(3n) { animation-duration: calc(var(--d-zweef) * 1.15); animation-delay: -7s; }
  html.beweging .tegel:nth-child(4n+1) { animation-delay: -10s; }

  /* 3a. Inkleuren */
  html.beweging .inkleur__woord { opacity: .28; }
  html.beweging .inkleur__woord.is-in { opacity: 1; }

  /* 3b. Opkomen */
  /* Opkomen schuift met de losse eigenschap 'translate', zodat 'transform' vrij blijft voor hover
     (bijv. a.kaart en .knop). Hover-overgangen staan erbij met hun eigen, korte duur. */
  html.beweging [data-opkomen] {
    transition: opacity var(--d-traag) var(--ease-uit) var(--vertraging, 0ms),
                translate var(--d-traag) var(--ease-uit) var(--vertraging, 0ms),
                transform var(--d-snel) var(--ease-uit),
                box-shadow var(--d-snel) var(--ease-uit),
                background-color var(--d-snel) var(--ease-uit);
  }
  html.beweging [data-opkomen]:not(.is-zichtbaar) { opacity: 0; translate: 0 24px; }

  /* 3c. Stapelen: kaarten blijven plakken en schuiven over elkaar */
  html.beweging [data-stapel] > * {
    position: sticky;
    top: calc(var(--stapel-top, 104px) + var(--i, 0) * 14px);
    transform-origin: 50% 0;
    will-change: scale;
  }

  /* 3d. Parallax en gloed */
  html.beweging [data-parallax] { will-change: translate; }
  html.beweging .gloed { animation: gloed-zweef var(--d-zweef) var(--ease-in-uit) infinite; }
  html.beweging .gloed:nth-of-type(2n) { animation-delay: -6s; animation-duration: calc(var(--d-zweef) * 1.3); }

  /* 5. Carrousel loopt eindeloos; randen vervagen; pauze bij hover en focus */
  html.beweging .carrousel.is-lopend {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  html.beweging .carrousel.is-lopend .carrousel-rij { overflow: hidden; padding-inline: 0; }
  html.beweging .carrousel.is-lopend .carrousel-band { animation: band-loopt var(--band-duur, var(--d-band)) linear infinite; }
  html.beweging .carrousel.is-lopend .carrousel-rij:nth-child(2n) .carrousel-band { animation-direction: reverse; }
  html.beweging .carrousel-rij:hover .carrousel-band,
  html.beweging .carrousel-rij:focus-within .carrousel-band { animation-play-state: paused; }

  /* 6. Menubalk: op groot scherm ook iets smaller en lager */
  @media (min-width: 960px) {
    html.beweging .menubalk.is-compact { transform: translate3d(0, 4px, 0) scale(.975); box-shadow: 0 8px 24px -14px rgba(18, 12, 43, .4); }
  }
}

/* Afdrukken: altijd alles tonen */
@media print {
  html.beweging [data-opkomen] { opacity: 1 !important; translate: none !important; }
  html.beweging .inkleur__woord { opacity: 1 !important; }
}