/* Eigen motionlaag: de inhoud blijft zichtbaar zonder JavaScript en bij minder beweging. */
@media (prefers-reduced-motion: no-preference) {
  .motion-scene .kicker,
  .motion-scene .compare__kicker { position: relative; }
  .motion-scene .kicker::before,
  .motion-scene .compare__kicker::before {
    content: ""; display: inline-block; width: 24px; height: 2px;
    margin-right: 10px; vertical-align: middle; background: currentColor;
    transform: scaleX(.28); transform-origin: left;
    transition: transform 600ms cubic-bezier(.22,1,.36,1);
  }
  .is-scene-in .kicker::before,
  .is-scene-in .compare__kicker::before { transform: scaleX(1); }
  .motion-scene .booking__card { transform: translateY(10px); transition: transform 650ms cubic-bezier(.22,1,.36,1); }
  .is-scene-in .booking__card { transform: translateY(0); }
  .booking__card .knop svg { transition: transform 200ms cubic-bezier(.22,1,.36,1); }
  .booking__card .knop:is(:hover,:focus-visible) svg { transform: translateX(3px); }
  .reel__card .reel__media img { transition: transform 700ms cubic-bezier(.22,1,.36,1); }
  .reel__card .reel__arrow { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
  .reel__card:is(:hover,:focus-visible) .reel__arrow { transform: translate(3px,-3px); }
  .faq__q svg { transition: transform 200ms cubic-bezier(.22,1,.36,1); }
  .top__nav { transition: opacity 180ms ease, transform 240ms cubic-bezier(.22,1,.36,1); }
  /* Oude rijen tegelijk laten bewegen voorkwam visuele samenhang in de vergelijking. */
  html.js .compare__table:not(.is-in) :is(th,td) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Aanwijzer blijft buiten de gemaskeerde galerij en onderschept nooit een kaartklik. */
.reel__cursor {
  position: fixed; z-index: 60; left: 0; top: 0;
  width: 80px; height: 80px; border-radius: 50%;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--stone, #eee9df); color: var(--ink, #111);
  border: 1px solid rgba(17,17,17,.12); box-shadow: 0 4px 20px rgba(0,0,0,.14);
  font-size: 12px; line-height: 16px; font-weight: 600;
  pointer-events: none; user-select: none; transform: translate(-50%,-50%);
}
.reel__cursor-arrow { font-size: 19px; line-height: 18px; font-weight: 400; }
@media (min-width: 900px) and (any-hover: hover) and (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .reel__cursor.is-visible { display: flex; }
  html.js .reel.is-live.has-scroll-cursor .reel__viewport,
  html.js .reel.is-live.has-scroll-cursor .reel__viewport * { cursor: none; }
}

/* Vaste drie regels en woordruimte: geen verspringende tekst of knop. */
.hero__brand { container-type: inline-size; }
body[data-gu-system] h1.hero__title--words {
  max-width: none; font-size: min(clamp(48px, 14.3cqi, 83px), var(--hero-fit, 100px)) !important;
  line-height: 1.08 !important; text-wrap: nowrap; letter-spacing: -.045em !important;
}
.hero__line { display: block; }
.hero__word-slot {
  display: block; height: 1.2em; padding-right: .1em;
  color: var(--accent); font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400; letter-spacing: -.045em;
}
.hero__word { display: inline-block; }

/* Finite illustratiebeweging: de kaarten en teksten worden nooit verborgen. */
@media (prefers-reduced-motion: no-preference) {
  .service-card { transition: border-color 250ms ease, box-shadow 250ms ease; }
  .service-card__art svg { transition: transform 500ms cubic-bezier(.22,1,.36,1); }
  .service-card__link > span:last-child { transition: transform 250ms ease; }
  .service-card:focus-within { border-color: #9a9283; box-shadow: 0 8px 20px #2520160a; }
  .service-card:focus-within .service-card__art svg { transform: translateY(-3px); }
  .service-card__link:is(:hover,:focus-visible) > span:last-child { transform: translate(3px,-3px); }


  @keyframes service-settle { from { transform: translateY(12px) rotate(-3deg); } to { transform: translateY(0) rotate(0); } }
  @keyframes service-connect { from { stroke-dashoffset: 35; } to { stroke-dashoffset: 0; } }
  @media (hover: hover) { .service-card:hover { border-color: #9a9283; box-shadow: 0 8px 20px #2520160a; } .service-card:hover .service-card__art svg { transform: translateY(-3px); } }
}

/* Elke proceskaart landt één keer; geen doorlopende afleiding of verborgen inhoud. */
@media (prefers-reduced-motion: no-preference) {
 .step { transition: border-color 300ms ease; }
 .step.is-in { animation: process-arrive 600ms cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--step-order) * 70ms); }
 @keyframes process-arrive { from { transform: translateY(12px); } to { transform: translateY(0); } }
 @keyframes process-turn { from { transform: rotate(-90deg) scale(.85); } to { transform: rotate(0) scale(1); } }
}

/* De losse rotate-eigenschap laat bestaande plaatsing en maatvoering intact. */
.brand-spin { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
 .knop:is(:hover,:focus-visible) .brand-spin,
 .booking__card .knop:is(:hover,:focus-visible) .brand-spin { transform: none; }
}
.hero__word-slot { min-width: 0; max-width: 100%; }
.hero__word { white-space: nowrap; }

@media (max-width: 899px) {
 body[data-gu-system] h1.hero__title--words { font-size: min(clamp(36px, 13cqi, 48px), var(--hero-fit, 100px)) !important; }
}
@media (prefers-reduced-motion: no-preference) {
 .is-discount-in .campaign__old-setup::after { animation: campaign-strike 600ms cubic-bezier(.22,1,.36,1) both; }
 .is-discount-in .campaign__new-setup { animation: campaign-zero 650ms cubic-bezier(.22,1,.36,1) both; }
 @keyframes campaign-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
 @keyframes campaign-zero { from { opacity: .65; transform: translateY(8px); } 30%, to { opacity: 1; transform: translateY(0); } }
 html.js .faq__list:not(.is-in) .faq__item { transform: none; }
}

/* Sectie-accenten volgen de bestaande kaarten; alle tekst blijft steeds beschikbaar. */
.faq__item[open] .faq__icon, .faq.is-enhanced .faq__item.is-open .faq__icon { transform: none; }
.faq__item[open]:not(.is-closing) .faq__icon-vertical { transform: scaleY(0); }
.faq__icon-vertical { transform-origin: 12px 12px; }
.step::after { content: ""; position: absolute; pointer-events: none; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(var(--step-progress,1)); transform-origin: left; border-radius: 10px; }
@media (max-width: 600px) {
 .step::after { top: 0; bottom: -17px; left: -1px; right: auto; width: 2px; height: auto; transform: scaleY(var(--step-progress,1)); transform-origin: top; }
 .step:last-child::after { bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
 .faq__icon-vertical { transition: transform 200ms ease; }
 .story__sign { position: relative; }
 .story__sign::before { content: ""; position: absolute; top: -10px; left: 0; width: 56px; height: 2px; background: var(--accent); transform: scaleX(.25); transform-origin: left; transition: transform 650ms cubic-bezier(.22,1,.36,1); }
 .story.is-scene-in .story__sign::before { transform: scaleX(1); }

 @keyframes compare-emphasis { 0%,100% { box-shadow: inset 0 0 0 0 #ffffff00; } 40% { box-shadow: inset 0 2px 0 0 #ffffff85, inset 0 -2px 0 0 #ffffff45; } }
 .plan--featured { transition: transform 300ms cubic-bezier(.22,1,.36,1),border-color 300ms ease,box-shadow 300ms ease; }
 .prices.is-scene-in .plan--featured { border-color: var(--accent); }
 .plan--featured:focus-within { transform: translateY(-3px); }
 @media (hover:hover) { .plan--featured:hover { transform: translateY(-3px); } }
}

/* Expressieve, eindige momenten. Kaartmaten en alle tekst blijven intact. */
:is(.compare,.prices,.steps) { position: relative; }
.motion-boundary { position: absolute; inset: 0 0 auto; height: 2px; overflow: hidden; pointer-events: none; background: #a7ad9933; }
.motion-boundary::after { content: ""; display: block; width: 100%; height: 100%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
 .motion-boundary::after { transform: translateX(-102%); }
 .is-scene-in > .motion-boundary::after { transform: translateX(0); transition: transform 850ms cubic-bezier(.22,1,.36,1); }
 @keyframes boundary-sweep { 0% { transform: translateX(-102%); } 65% { transform: translateX(0); } 100% { transform: translateX(102%); } }
 .svc-build { transform-box: fill-box; transform-origin: center; }
 .service-card.is-service-in .svc-build { animation: service-build 800ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--part-order) * 45ms); }
 @keyframes service-build { 0% { opacity: 0; transform: translateY(30px) scale(.72) rotate(-9deg); } 65% { opacity: 1; transform: translateY(-4px) scale(1.035) rotate(1deg); } 100% { opacity: 1; transform: none; } }
 .step { transition: background-color 300ms ease,border-color 300ms ease; }
 .step__num,.step__node { transition: color 300ms ease,transform 300ms ease; }
 .step.is-step-active { background: #353a26; border-color: var(--accent); }
 .step.is-step-active .step__num { color: var(--accent); transform: scale(1.24); transform-origin: left center; }
 .step.is-step-active .step__node { color: var(--accent); transform: rotate(90deg); }
 .step::after { transition: background-color 300ms ease; background: #646a50; }
 .step.is-step-active::after { background: var(--accent); }
 .compare__featured.is-emphasis-in > * { animation: compare-emphasis 750ms ease both; }
 @keyframes comparison-reveal { 0% { background-position: 140% 0; box-shadow: inset 0 4px 0 #fff9,inset 0 -4px 0 #fff9; } 100% { background-position: -70% 0; box-shadow: inset 0 0 0 transparent; } }
 html.js .plan[data-motion]:not(.is-in) { transform: none; }
 .prices__grid.is-emphasis-in .plan { animation: plan-intro 650ms cubic-bezier(.22,1,.36,1) backwards; animation-delay: 230ms; }
 .prices__grid.is-emphasis-in .plan--featured { animation-name: featured-intro; animation-delay: 0ms; }
 @keyframes plan-intro { from { transform: translateY(14px); } to { transform: none; } }
 @keyframes featured-intro { from { transform: translateY(28px) scale(.97); box-shadow: 0 0 0 5px #b6bd8444; } to { transform: none; box-shadow: 0 0 0 0 transparent; } }
 @media (max-width: 899px) {
  .service-card.is-service-in .svc-build { animation-duration: 550ms; animation-delay: calc(var(--part-order) * 30ms); }
  .is-scene-in > .motion-boundary::after,.compare__featured.is-emphasis-in > * { animation-duration: 650ms; }
  .prices__grid.is-emphasis-in .plan { animation-duration: 450ms; animation-delay: 140ms; }
  .prices__grid.is-emphasis-in .plan--featured { animation-delay: 0ms; }
 }
}
@media (prefers-reduced-motion: reduce) {
 .step::after { transform: none; }
 .motion-boundary::after { opacity: .55; }
}

/* Eén eindige hero-entrée. Alleen verplaatsing: alle inhoud blijft zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
 .hero.is-arriving .hero__kicker-text { animation: hero-arrive 650ms cubic-bezier(.22,1,.36,1) both; }
 .hero.is-arriving .hero__title { animation: hero-arrive 800ms cubic-bezier(.22,1,.36,1) 60ms both; }
 .hero.is-arriving .hero__intro { animation: hero-arrive 800ms cubic-bezier(.22,1,.36,1) 140ms both; }
 .hero.is-arriving .hero__actions { animation: hero-arrive 800ms cubic-bezier(.22,1,.36,1) 210ms both; }
 .hero.is-arriving .reel { animation: reel-arrive 1000ms cubic-bezier(.22,1,.36,1) 120ms both; }
 @keyframes hero-arrive { from { transform: translateY(18px); } to { transform: none; } }
 @keyframes reel-arrive { from { transform: translateY(28px); } to { transform: none; } }
 .knop,.service-card__link,.faq__filter { transition: background-color 180ms ease,border-color 180ms ease,transform 180ms cubic-bezier(.22,1,.36,1); }
 .knop:active,.service-card__link:active,.faq__filter:active { transform: scale(.975); }
 .motion-boundary { height: 2px; background: transparent; }
}