/* ===============================================================
   VeVe Studio — Design 5 "Vernis" — bewegingslaag (opmaak)
   =============================================================== */

/* ---------------------------------------------------------------
   Cursor — dunne inktring; op de lak én op porselein leesbaar
   --------------------------------------------------------------- */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 1px solid rgba(36, 26, 51, 0.65);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  will-change: transform;
  transition: opacity 240ms var(--ease),
              width 380ms var(--ease),
              height 380ms var(--ease),
              margin 380ms var(--ease),
              background-color 380ms var(--ease);
}
.cursor::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--amber-diep);
}
.cursor--zichtbaar { opacity: 1; }
.cursor--groot {
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  background: rgba(240, 178, 101, 0.12);
}

@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* sparkles-laag over alles behalve overlay en boeking */
.sparkles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* ---------------------------------------------------------------
   Tekst-onthulling — regels schuiven achter hun rand omhoog.
   Tekst staat standaard gewoon zichtbaar; pas als de bewegingslaag
   draait (html.motion-klaar) wordt de beginstand verborgen.
   --------------------------------------------------------------- */
.regel-masker {
  display: block; overflow: hidden;
  /* ruimte voor de onderkant van g, j, p en q: de masker-rand knipte die af;
     de negatieve marge houdt de regelafstand gelijk */
  padding-bottom: 0.24em; margin-bottom: -0.24em;
}
.regel-masker > span {
  display: block;
  transition: transform 820ms var(--ease), opacity 820ms var(--ease);
  will-change: transform;
}
.motion-klaar .regel-masker > span { transform: translateY(140%); opacity: 0; }
.motion-klaar .is-onthuld .regel-masker > span { transform: none; opacity: 1; }

.teken { display: inline-block; will-change: opacity, transform; }
.motion-klaar .teken { opacity: 0; transform: translateY(7px); }
.motion-klaar .is-onthuld .teken {
  opacity: 1; transform: none;
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}

/* de lak-dip: canvas als vloeistoflaag, inhoud erboven */
.knop-lak {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.knop-inhoud {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: inherit;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Toegankelijkheid — beweging vervangen, niet zomaar uitzetten
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cursor, .sparkles { display: none; }

  .motion-klaar .regel-masker > span { transform: none; opacity: 0; transition: opacity 300ms linear; }
  .motion-klaar .is-onthuld .regel-masker > span { opacity: 1; }
  .motion-klaar .teken { opacity: 0; transform: none; }
  .motion-klaar .is-onthuld .teken { opacity: 1; transition: opacity 300ms linear; }
}