/* Cymatra: bewegingslaag. Hoort bij assets/js/cymatra-motion.js.
   Kleuren komen uit fable-tokens.css (richting B "Inkt & Amber", 28-09-2026);
   de hexwaarden hieronder zijn alleen de terugval als de tokens niet geladen
   zijn (bijv. de platte export). Wijzig kleuren in fable-tokens.css. */
:root {
  --cy-inkt: var(--inkt, #0F1B2D);
  --cy-licht: var(--licht, #F4F6F8);
  --cy-licht-2: var(--licht-2, #E9EDF1);
  --cy-amber-op-donker: var(--amber-op-donker, #E89A3C);
  --cy-amber-vlak: var(--amber-vlak, #D8851D);
  --cy-amber-lijn: var(--amber-lijn, #B8660F);
  --cy-wave-stroke: var(--cy-amber-op-donker);
  --cy-wave-opacity: .9;
  --cy-reveal-y: 14px;
  --cy-reveal-duur: .7s;
}

/* a) golf: de onderste band van de hero, onder de lead-tekst. Loopt naar links
   zacht uit onder de tekstkolom (masker), ligt onder de inhoud en boven de
   achtergrond. Hoogte en uitloop zijn per hero te overschrijven via de tokens. */
[data-cy-wave] {
  position: relative;
  isolation: isolate;
  --cy-wave-h: 28%;
  --cy-wave-uitloop: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) 42%, #000 76%);
}
[data-cy-wave] > svg.cy-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--cy-wave-h);
  z-index: -1;
  pointer-events: none;
  display: block;
  overflow: visible;
  opacity: var(--cy-wave-opacity);
  -webkit-mask-image: var(--cy-wave-uitloop);
  mask-image: var(--cy-wave-uitloop);
}
[data-cy-wave] > svg.cy-wave path {
  fill: none;
  stroke: var(--cy-wave-stroke);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 699px) {
  [data-cy-wave] {
    --cy-wave-h: 16%;
    --cy-wave-uitloop: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 45%, #000 80%);
  }
  [data-cy-wave] > svg.cy-wave { opacity: calc(var(--cy-wave-opacity) * .7); }
  [data-cy-wave] > svg.cy-wave path { stroke-width: .8px; }
}

/* b) tellen: vaste cijferbreedte, zodat de tekst niet wiebelt tijdens het tellen */
[data-cy-count] {
  font-variant-numeric: tabular-nums;
}

/* c) inschuiven: pas actief als de JS html.cy-motion zet (progressive enhancement) */
.cy-motion [data-cy-reveal] {
  opacity: 0;
  transform: translateY(var(--cy-reveal-y));
  transition: opacity var(--cy-reveal-duur) ease-out, transform var(--cy-reveal-duur) cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.cy-motion [data-cy-reveal].cy-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cy-motion [data-cy-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}