/* =====================================================================
   Premium motion-laag voor de homepage.
   Alles staat pas "verborgen klaar" wanneer motion-premium.js de klasse
   .mp-on op <html> zet. Zonder JS of met "minder beweging" blijft de
   site exact zoals hij was.
   ===================================================================== */

:root {
  --mp-accent: var(--heroAccent, #fc4926);
  --mp-ease-out: cubic-bezier(.16, 1, .3, 1);       /* snel vertrekken, zacht landen */
  --mp-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* lichte overshoot */
  --mp-ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Scroll-voortgang bovenaan ---------------------------------- */
.mp-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 3px;
  background: var(--mp-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Koppen: regel voor regel onder een masker vandaan ---------
   Elk woord zit in een eigen masker (clip-path, dus geen invloed op de
   opmaak). Woorden op dezelfde regel delen hetzelfde --i, waardoor de
   regel als geheel omhoog schuift. Geen blur, geen draai, geen veer. */
.mp-on .mp-w {
  display: inline-block;
  white-space: pre;
  /* ruimte voor schreven, onderkasten en cursieve overhang */
  clip-path: inset(-.2em -.25em -.24em -.25em);
}
.mp-on .mp-wi {
  display: inline-block;
  transform: translate3d(0, calc(100% + .3em), 0);
  transition: transform 1000ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--mp-d, 0ms) + var(--i, 0) * 120ms);
  will-change: transform;
}
.mp-on .mp-in .mp-wi { transform: none; }
/* Na de animatie het masker en will-change weer weg. */
.mp-on .mp-done .mp-w { clip-path: none; }
.mp-on .mp-done .mp-wi { will-change: auto; }

/* De oude regel-voor-regel animatie van de hero-titel vervangen. */
.mp-on #home .hero-title-ink { animation: none !important; }
.mp-on #home .hero-title-line { overflow: visible; }

/* ---------- Algemene reveal-varianten --------------------------------- */
.mp-on .mp-rise {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity 800ms var(--mp-ease-out),
    translate 1000ms var(--mp-ease-out);
  transition-delay: calc(var(--i, 0) * 80ms + var(--mp-d, 0ms));
}
.mp-on .mp-rise.mp-in { opacity: 1; translate: 0 0; }

.mp-on .mp-pop {
  opacity: 0;
  scale: .6;
  rotate: -10deg;
  transition:
    opacity 500ms var(--mp-ease-out),
    scale 800ms var(--mp-ease-spring),
    rotate 800ms var(--mp-ease-spring);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.mp-on .mp-pop.mp-in { opacity: 1; scale: 1; rotate: 0deg; }

/* Accentlijntjes die zichzelf tekenen. */
.mp-on .mp-draw {
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale 900ms var(--mp-ease-out);
  transition-delay: calc(var(--i, 0) * 80ms + 250ms + var(--mp-d, 0ms));
}
.mp-on .mp-draw.mp-in,
.mp-on .mp-in .mp-draw { scale: 1 1; }

/* Afbeeldingen die van onder naar boven worden onthuld. */
.mp-on .mp-unveil {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1300ms var(--mp-ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + var(--mp-d, 0ms));
}
.mp-on .mp-unveil img {
  scale: 1.22;
  transition: scale 1600ms var(--mp-ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + var(--mp-d, 0ms));
}
.mp-on .mp-unveil.mp-in { clip-path: inset(0 0 0 0); }
.mp-on .mp-unveil.mp-in img { scale: 1; }

/* Een losse afbeelding (zonder kader) die van onder wordt onthuld. */
.mp-on .mp-unveil-self {
  clip-path: inset(100% 0 0 0);
  scale: 1.06;
  transform-origin: 50% 100%;
  transition:
    clip-path 1400ms var(--mp-ease-out) 150ms,
    scale 1700ms var(--mp-ease-out) 150ms;
}
.mp-on .mp-unveil-self.mp-in { clip-path: inset(-10% -10% 0 -10%); scale: 1; }

/* ---------- Navigatie schuift binnen ---------------------------------- */
.mp-on nav.site-main-navigation {
  animation: mp-nav-in 900ms var(--mp-ease-out) 80ms both;
}
@keyframes mp-nav-in {
  from { translate: 0 -100%; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}

/* ---------- Hero ------------------------------------------------------ */
.mp-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mp-aurora span {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1800ms ease;
  will-change: auto;
}
.mp-aurora.mp-in span { opacity: 1; }
.mp-aurora .mp-a1 {
  width: 62vw; height: 62vw; right: -14vw; top: -18vw;
  background: radial-gradient(circle, rgba(252, 73, 38, .2) 0%, rgba(252, 73, 38, .08) 38%, rgba(252, 73, 38, 0) 68%);
  /* Static gradient: same atmosphere without a permanent animation layer. */
}
.mp-aurora .mp-a2 {
  width: 46vw; height: 46vw; right: 18vw; bottom: -22vw;
  background: radial-gradient(circle, rgba(255, 178, 122, .22) 0%, rgba(255, 178, 122, .08) 40%, rgba(255, 178, 122, 0) 68%);
}
.mp-aurora .mp-a3 {
  width: 38vw; height: 38vw; left: -10vw; top: 8vw;
  background: radial-gradient(circle, rgba(255, 150, 128, .12) 0%, rgba(255, 150, 128, .045) 40%, rgba(255, 150, 128, 0) 68%);
}
@keyframes mp-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-7vw, 5vw, 0) scale(1.12); } }
@keyframes mp-drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(6vw, -6vw, 0) scale(.92); } }
@keyframes mp-drift-c { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(8vw, 4vw, 0) scale(1.1); } }

/* Hero-portret: onthulling van onder + rustige parallax. */
.mp-on #home .responsive-hero-portrait {
  clip-path: inset(100% 0 0 0);
  scale: 1.08;
  transform-origin: 50% 100%;
  transition:
    clip-path 1500ms var(--mp-ease-out) 250ms,
    scale 1800ms var(--mp-ease-out) 250ms;
}
.mp-on #home .responsive-hero-portrait.mp-in {
  clip-path: inset(-10% -10% 0 -10%);
  scale: 1;
}

/* Hero-knoppen springen erin. */
.mp-on #home .responsive-hero-actions > a {
  opacity: 0;
  translate: 0 26px;
  scale: .9;
  transition:
    opacity 600ms var(--mp-ease-out),
    translate 900ms var(--mp-ease-spring),
    scale 900ms var(--mp-ease-spring),
    box-shadow 200ms ease;
}
.mp-on #home .responsive-hero-actions > a:nth-child(1) { transition-delay: 900ms, 900ms, 900ms, 0ms; }
.mp-on #home .responsive-hero-actions > a:nth-child(2) { transition-delay: 1000ms, 1000ms, 1000ms, 0ms; }
.mp-on #home .responsive-hero-actions.mp-in > a { opacity: 1; translate: 0 0; scale: 1; }
/* Na de intro neemt de bestaande hover-lift weer over. */
.mp-on #home .responsive-hero-actions.mp-done > a {
  transition: translate 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
  transition-delay: 0ms;
}
@media (hover: hover) {
  .mp-on #home .responsive-hero-actions.mp-done > a:hover { translate: 0 -2px; }
}

/* Hero-opsomming: accentlijnen tekenen, items komen getrapt binnen. */
.mp-on #hero-opsomming .hero-opsomming-accent { scale: 0 1; transform-origin: 0 50%; transition: scale 900ms var(--mp-ease-out); }
.mp-on #hero-opsomming .mp-in .hero-opsomming-accent { scale: 1 1; transition-delay: calc(var(--i, 0) * 90ms + 350ms); }

/* ---------- Scroll-gestuurd "oplichten" van de quote ------------------ */
.mp-on .mp-sw {
  opacity: .14;
  transition: opacity 180ms linear;
}

/* Markeerstift-veeg onder accentwoorden. */
.mp-on .mp-mark {
  background-image: linear-gradient(transparent 62%, rgba(252, 73, 38, .16) 62%, rgba(252, 73, 38, .16) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1100ms var(--mp-ease-out);
  transition-delay: calc(var(--i, 0) * 180ms + 200ms);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mp-on .mp-mark.mp-in { background-size: 100% 100%; }

/* ---------- Tools ------------------------------------------------------ */
.mp-on #tools .tool-chip.mp-in .tool-logo {
  animation: none;
}
@keyframes mp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (hover: hover) {
  .mp-on #tools .tool-chip:hover { transform: none; }
  .mp-on #tools .tool-chip:hover .tool-logo { animation: mp-boing 650ms var(--mp-ease-spring); }
}
@keyframes mp-boing {
  0% { transform: translateY(0) rotate(0) scale(1); }
  30% { transform: translateY(-10px) rotate(-10deg) scale(1.12); }
  60% { transform: translateY(0) rotate(6deg) scale(.96); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

/* ---------- Laptop / browservensters: 3D-kanteling --------------------- */
.mp-on .wrr-visual { perspective: 1600px; }
.mp-on .wrr-laptop {
  transform-origin: 50% 80%;
  will-change: auto;
}
.mp-tilt {
  transform: perspective(1000px) rotateX(var(--mp-rx, 0deg)) rotateY(var(--mp-ry, 0deg));
  transition: transform 500ms var(--mp-ease-out);
  transform-style: preserve-3d;
}
.mp-tilt.mp-tilting { transition: transform 120ms linear; }
.mp-glare { position: relative; }
.mp-glare::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--mp-gx, 50%) var(--mp-gy, 50%), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity 300ms ease;
}
.mp-glare.mp-tilting::after { opacity: 1; }

/* Insights-kaarten: beeld zoomt zacht in bij hover. */
@media (hover: hover) {
  .mp-on #insights a.group.block .aspect-\[4\/3\] img { transition: scale 900ms var(--mp-ease-out); }
  .mp-on #insights a.group.block:hover .aspect-\[4\/3\] img { scale: 1.07; }
}

/* ---------- Knoppen: magnetisch + lichtveeg --------------------------- */
.mp-magnet { transition: transform 450ms var(--mp-ease-spring); }
.mp-magnet.mp-magnet-active { transition: transform 140ms linear; }
.mp-shine { position: relative; overflow: hidden; isolation: isolate; }
.mp-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: skewX(-18deg) translateX(0);
}
@media (hover: hover) {
  .mp-shine:hover::after { transform: skewX(-18deg) translateX(420%); transition: transform 800ms var(--mp-ease-inout); }
}

/* ---------- Formulier ------------------------------------------------- */
.mp-on #free-analysis input,
.mp-on #free-analysis textarea {
  transition: border-color 200ms ease, box-shadow 300ms var(--mp-ease-out), translate 300ms var(--mp-ease-out);
}
.mp-on #free-analysis input:focus,
.mp-on #free-analysis textarea:focus {
  box-shadow: 0 0 0 4px rgba(252, 73, 38, .14), 0 10px 24px -14px rgba(252, 73, 38, .55);
  translate: 0 -2px;
}

/* ---------- Cursor-volger --------------------------------------------- */
.mp-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--mp-accent);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 700 11px/1 "Satoshi", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition:
    opacity 250ms ease,
    width 380ms var(--mp-ease-spring),
    height 380ms var(--mp-ease-spring),
    margin 380ms var(--mp-ease-spring),
    background-color 250ms ease,
    border-color 250ms ease;
  will-change: transform;
}
.mp-cursor.mp-visible { opacity: 1; }
.mp-cursor.mp-hover {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background-color: rgba(252, 73, 38, .1);
}
.mp-cursor.mp-label {
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  background-color: var(--mp-accent);
  border-color: var(--mp-accent);
}
.mp-cursor span { opacity: 0; transition: opacity 200ms ease; }
.mp-cursor.mp-label span { opacity: 1; }
.mp-cursor.mp-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* ---------- Toegankelijkheid & print ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mp-progress, .mp-cursor, .mp-aurora { display: none !important; }
}
@media print {
  .mp-progress, .mp-cursor, .mp-aurora { display: none !important; }
  .mp-on .mp-w, .mp-on .mp-wi, .mp-on .mp-rise, .mp-on .mp-pop, .mp-on .mp-unveil, .mp-on .mp-sw { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}