/* VersBeeld motion layer (rustige versie)
   Eén moment dat opvalt: de hero bij het laden. De rest van de pagina komt rustig in beeld
   met een korte, lage fade. Alleen actief als html.vb-motion aanwezig is (gezet door het
   inline script in <head>), dus zonder JavaScript of met "minder beweging" blijft alles
   gewoon zichtbaar. */

:root {
  --vb-ease: cubic-bezier(.22, .61, .36, 1);
  --vb-dur: .7s;
  --vb-rise: 14px;
}

/* ---------- Rustige reveal bij scrollen ---------- */
.vb-motion [data-vb-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--vb-rise), 0);
  transition: opacity var(--vb-dur) var(--vb-ease), transform var(--vb-dur) var(--vb-ease);
  transition-delay: var(--vb-delay, 0s);
}
.vb-motion [data-vb-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero: kop schuift regel voor regel omhoog ---------- */
.vb-motion .vb-line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
  color: inherit;
}
.vb-motion .vb-line > span {
  display: block;
  color: inherit;
  transform: translate3d(0, 100%, 0);
  transition: transform .9s var(--vb-ease);
  transition-delay: calc(.1s + var(--vb-i, 0) * .08s);
}
.vb-motion .is-in .vb-line > span { transform: none; }
.vb-motion [data-vb-split] { opacity: 1; transform: none; }

/* Hero-elementen staan al verborgen voordat motion.js laadt, zodat ze niet eerst even flitsen */
.vb-motion .hero-refresh :is(.hero-kicker, .intro, .hero-actions, .hero-stage):not(.is-in) {
  opacity: 0;
  transform: translate3d(0, var(--vb-rise), 0);
}
.vb-motion .hero-refresh h1:not([data-vb-split]),
.vb-motion .contact-intro h1:not([data-vb-split]) { opacity: 0; }

/* Hero-video: komt zacht binnen en zakt licht op zijn plek */
.vb-motion .hero-refresh .hero-stage {
  transition: opacity 1s var(--vb-ease) .45s, transform 1s var(--vb-ease) .45s;
}
.vb-motion .hero-refresh .hero-film-video {
  transform: scale(1.03);
  transition: transform 1.6s var(--vb-ease) .45s;
}
.vb-motion .hero-refresh .hero-stage.is-in .hero-film-video { transform: none; }

/* ---------- Header ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 20px #1733250d; }

/* ---------- Portaal-illustratie: één keer een uploadbalk ---------- */
.illustration-upload { position: relative; overflow: hidden; }
.illustration-upload::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: #2d6847;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.vb-motion .portal-illustration.is-in .illustration-upload::before {
  animation: vb-upload 1.6s var(--vb-ease) .4s 1 both;
}
@keyframes vb-upload {
  0% { transform: scaleX(0); opacity: 1; }
  80% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- Prijstabel: huidige schijf wisselt zacht ---------- */
.price-table tbody tr { transition: background-color .3s ease; }

/* ---------- FAQ ---------- */
.faq-list details[open] > p { animation: vb-fade .35s var(--vb-ease); }
@keyframes vb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Pijltjes in knoppen en links ---------- */
.vb-arrow { display: inline-block; transition: transform .25s var(--vb-ease); }
a:hover .vb-arrow-ne, a:focus-visible .vb-arrow-ne { transform: translate(2px, -2px); }
a:hover .vb-arrow-s, a:focus-visible .vb-arrow-s { transform: translateY(2px); }
a:hover .vb-arrow-e, a:focus-visible .vb-arrow-e { transform: translateX(3px); }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  .vb-motion [data-vb-reveal],
  .vb-motion .vb-line > span,
  .vb-motion .hero-refresh .hero-stage,
  .vb-motion .hero-refresh .hero-film-video {
    opacity: 1 !important;
    transform: none !important;
  }
  .vb-arrow { transition: none; }
}