/* ==========================================================================
   Wojmar – effectenpakket
   Thema: "Vakmanschap opent deuren" – dingen gaan open zoals een kozijn.

   1. Paginaovergang (View Transitions)
   2. Scroll-voortgang (rode lijn bovenin)
   3. Slimme header (krimpt, verdwijnt bij naar beneden scrollen)
   4. Logo: het glas schuift open bij hover
   5. Koppen komen woord voor woord omhoog
   6. Reveal bij scrollen (fade-up, met vertraging per kaart)
   7. "Openslaande deuren": foto's/video's gaan vanuit het midden open
   8. Knoppen: rode veeg + pijltje dat meebeweegt
   9. Kaarten: optillen, kozijn-icoon gaat open
  10. Merkband (doorlopende tekst)
  11. Voor/na-schuifregelaar bij projecten
  12. Werkwijze: tijdlijn die meeloopt met scrollen
  13. FAQ: vloeiend open en dicht
  14. Formulier: stappen schuiven in
  15. Terug-naar-boven-knop
  Alles respecteert "verminder beweging" en werkt ook zonder JavaScript.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-door: cubic-bezier(.65, 0, .35, 1);
  --dur: .5s;
}

/* ---------- 1. Paginaovergangen (4 varianten, te kiezen in het beheer: Instellingen › Uitstraling) ----------
   Werking, voor elke variant hetzelfde:
   1. Klik op een link: effects.js zet een vlag. Op de nieuwe pagina staat daardoor vanaf de eerste
      paint een "sluier" dicht (onder de header): het gesloten kozijn, rolluik, raam of de schuifpui.
   2. View Transition (Chrome, Edge, Safari 18.2+): dat gesloten beeld komt over de oude pagina (± 0,3 s).
   3. Daarna gaat de echte sluier open en staat de nieuwe pagina er (± 0,5 s).
   Variant = data-vt op <html> (deuren · rolluik · raam · schuifpui). Firefox ziet alleen stap 3.
   Geen wachttijd bij het klikken: de volgende pagina laadt ondertussen gewoon. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: header; }
::view-transition-old(root) { animation: vt-hold .3s linear both; }
::view-transition-new(root) { animation: vt-doors-close .28s var(--ease-door) both; }
:root[data-vt="rolluik"]::view-transition-new(root)   { animation-name: vt-roll-down; animation-duration: .32s; }
:root[data-vt="raam"]::view-transition-new(root)      { animation-name: vt-window-grow; animation-duration: .3s; }
:root[data-vt="schuifpui"]::view-transition-new(root) { animation-name: vt-slide-in; animation-duration: .3s; }
@keyframes vt-hold { to { opacity: 1; } }
/* Rustig (standaard): oude pagina vervaagt, nieuwe komt zacht op met een klein beetje beweging omhoog */
:root[data-vt="rustig"]::view-transition-old(root) { animation: vt-calm-out .22s ease-out both; }
:root[data-vt="rustig"]::view-transition-new(root) { animation: vt-calm-in .38s cubic-bezier(.25, .1, .25, 1) .06s both; }
@keyframes vt-calm-out { to { opacity: 0; } }
@keyframes vt-calm-in { from { opacity: 0; transform: translateY(8px); } }
/* Deuren: twee rechthoeken die van de zijkanten naar het midden groeien (de gedeelde onderrand heft elkaar op) */
@keyframes vt-doors-close {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 50% 0, 50% 100%, 50% 100%, 50% 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes vt-roll-down   { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes vt-window-grow { from { clip-path: inset(50% 50% 50% 50%); } to { clip-path: inset(0); } }
@keyframes vt-slide-in    { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }

.page-veil { display: none; }
.is-arriving .page-veil { display: block; position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.veil-door, .veil-full { position: absolute; background-color: var(--navy); background-image: linear-gradient(rgba(255, 232, 225, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 232, 225, .045) 1px, transparent 1px); background-size: 32px 32px; }
.veil-full { display: none; inset: 0; }
.veil-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px; background: var(--navy); transition: opacity .2s ease-out .32s, transform .5s var(--ease-door) .32s; }
.veil-mark .mark { width: 64px; height: 64px; }

/* 1. Deuren: sluiten van de zijkanten, openen naar de zijkanten */
.veil-door { top: 0; bottom: 0; width: 50.5%; transition: transform .46s var(--ease-door) .32s; }
.veil-l { left: 0; border-right: 3px solid var(--carmine); }
.veil-r { right: 0; border-left: 3px solid var(--carmine); }
.is-arriving.is-open .veil-l { transform: translateX(-102%); }
.is-arriving.is-open .veil-r { transform: translateX(102%); }
.is-arriving.is-open .veil-mark { opacity: 0; transform: translate(-50%, -50%) scale(.6); }

/* 2. Rolluik: lamellen + carmine onderlat; komt van boven, rolt weer op */
:root[data-vt="rolluik"] .veil-door { display: none; }
:root[data-vt="rolluik"] .veil-full { display: block; border-bottom: 10px solid var(--carmine); background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(0, 0, 0, .35) 30px 32px, rgba(255, 232, 225, .06) 32px 34px); background-size: auto; transition: transform .5s var(--ease-door) .34s; }
.is-arriving.is-open:root[data-vt="rolluik"] .veil-full { transform: translateY(-104%); }
.is-arriving.is-open:root[data-vt="rolluik"] .veil-mark { opacity: 0; transform: translate(-50%, calc(-50% - 40vh)); }

/* 3. Raam: kozijn groeit vanuit het midden; daarna "door het raam heen" (gat groeit, beeldmerk zoomt in) */
:root[data-vt="raam"] .veil-door { display: none; }
:root[data-vt="raam"] .veil-full { display: block;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path .55s var(--ease-door) .32s; }
.is-arriving.is-open:root[data-vt="raam"] .veil-full {
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, -2% -2%, 102% -2%, 102% 102%, -2% 102%, -2% -2%); }
:root[data-vt="raam"] .veil-mark { transition: opacity .35s ease-in .42s, transform .55s var(--ease-door) .32s; }
.is-arriving.is-open:root[data-vt="raam"] .veil-mark { opacity: 0; transform: translate(-50%, -50%) scale(9); }

/* 4. Schuifpui: paneel met greep schuift van rechts naar binnen en verder naar links weg */
:root[data-vt="schuifpui"] .veil-door { display: none; }
:root[data-vt="schuifpui"] .veil-full { display: block; border-left: 6px solid var(--carmine); border-right: 6px solid var(--carmine); transition: transform .5s var(--ease-door) .32s; }
:root[data-vt="schuifpui"] .veil-full::after { content: ''; position: absolute; left: 48px; top: 50%; width: 10px; height: 160px; margin-top: -80px; border-radius: 5px; background: var(--blush); opacity: .8; }
.is-arriving.is-open:root[data-vt="schuifpui"] .veil-full { transform: translateX(-104%); }
.is-arriving.is-open:root[data-vt="schuifpui"] .veil-mark { opacity: 0; transform: translate(calc(-50% - 60vw), -50%); }

/* ---------- 2. Scroll-voortgang ---------- */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; background: var(--carmine); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

/* ---------- 3. Slimme header ---------- */
/* Let op: de hoogte van de header verandert bewust níet bij scrollen. Een krimpende sticky
   header verandert de paginahoogte, waardoor de browser (scroll anchoring) terugspringt en
   de header rond de drempel blijft flikkeren. Alleen schaduw, achtergrond en de logo-schaal
   (transform, geen layout) veranderen. Geen backdrop-filter: die maakt van de header het
   bevattende blok voor het vaste mobiele menu. */
.site-header { transition: transform .35s var(--ease-out), box-shadow .3s, background-color .3s; }
.site-header .logo { transform-origin: 0 50%; transition: transform .3s var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(8, 28, 47, .08); background: var(--white); }
.site-header.is-scrolled .logo { transform: scale(.88); }
.site-header.is-hidden { transform: translateY(-100%); }

/* ---------- 4. Logo: glas schuift open ---------- */
.logo .mark rect:first-child { transition: transform .5s var(--ease-door); }
.brand:hover .logo .mark rect:first-child,
.brand:focus-visible .logo .mark rect:first-child { transform: translateX(-36.4%); }
.js .site-header .logo .mark rect:first-child { animation: pane-in .9s .2s var(--ease-door) both; }
@keyframes pane-in { from { transform: translate(-36.4%, 36.4%); opacity: 0; } 60% { opacity: 1; } }

/* ---------- 5. Koppen woord voor woord ---------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-word > span { display: inline-block; }
.js [data-split].is-ready .split-word > span { transform: translateY(105%); transition: transform .6s var(--ease-out); transition-delay: calc(var(--i) * 45ms + 40ms); }
/* De grote kop is al verborgen vóór effects.js draait, zodat hij niet eerst verschijnt en dan wegflitst.
   Vangnet: werkt het script niet, dan komt de kop na 1,5 s toch in beeld. */
.js .hero h1:not(.is-ready), .js .page-hero h1:not(.is-ready) { opacity: 0; animation: split-fallback 0s 1.5s forwards; }
@keyframes split-fallback { to { opacity: 1; } }
.js [data-split].is-ready.is-in .split-word > span { transform: none; }

/* ---------- 6. Reveal bij scrollen ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 7. Openslaande deuren ---------- */
.js [data-door] { clip-path: inset(0 50% 0 50% round var(--radius)); transition: clip-path .8s var(--ease-door); position: relative; }
.js [data-door].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js [data-door]::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; margin-left: -3px; background: var(--carmine); opacity: 1; transition: opacity .3s .6s; pointer-events: none; z-index: 2; }
.js [data-door].is-in::after { opacity: 0; }

/* ---------- 8. Knoppen ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .3s, border-color .3s, transform .15s; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease-door); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
.btn:active { transform: translateY(1px); }
.btn-primary:hover { background: var(--carmine); }
.btn-primary::before { background: var(--carmine-dark); }
.btn-outline::before { background: var(--navy); }
.btn-outline:hover { background: transparent; color: var(--white); }
.btn-outline-light::before { background: var(--blush); }
.btn-outline-light:hover { background: transparent; color: var(--navy); }
.btn-white::before { background: var(--navy); }
.btn-white:hover { background: var(--white); color: var(--white); }
.link-arrow, .link-light { display: inline-block; transition: color .2s; }
.arrow { display: inline-block; transition: transform .3s var(--ease-out); }
a:hover .arrow, .card-link:hover .arrow, .video-card:hover .arrow { transform: translateX(5px); }

/* ---------- 9. Kaarten ---------- */
.card, .pro, .tile, .process-step, .video-card .video-thumb { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.card:hover, .pro:hover, .tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8, 28, 47, .12); }
.card-link:hover { transform: translateY(-4px); }
.card .icon rect:first-child, .pro-icon .icon { transition: transform .5s var(--ease-door); }
.card:hover .card-media .icon rect:first-child { transform: translateX(-37.5%); }
.card-media .icon { transition: transform .5s var(--ease-out); }
.card:hover .card-media .icon { transform: scale(1.06); }
.video-card:hover .video-thumb { transform: scale(1.02); box-shadow: 0 14px 32px rgba(8, 28, 47, .18); }
.play { transition: transform .3s var(--ease-out), box-shadow .3s; }
.play:hover { box-shadow: 0 0 0 12px rgba(255, 255, 255, .15); }
.video-box .play { animation: pulse 2.6s 1.2s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 70%, 100% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); } }

/* ---------- 10. Merkband ---------- */
.marquee { background: var(--carmine); color: var(--white); overflow: hidden; padding: 16px 0; font: 700 clamp(15px, 1.4vw, 18px)/1 var(--font-head); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; flex-shrink: 0; }
.marquee li { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; }
.marquee li::after { content: ''; width: 12px; height: 12px; background: var(--pacific); outline: 3px solid var(--white); outline-offset: 2px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 11. Voor/na-schuifregelaar ---------- */
.ba { position: relative; height: clamp(220px, 21vw, 300px); border-radius: 14px; overflow: hidden; --pos: 50%; user-select: none; }
.ba-img { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; font-size: 12px; font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 1px; }
.ba-before { background: #7d8790; }
.ba-after { background: var(--navy-2); justify-content: flex-end; clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: var(--carmine); pointer-events: none; }
.ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); background: var(--carmine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M9 7L4 12L9 17M15 7L20 12L15 17'/%3E%3C/svg%3E") center/22px no-repeat; box-shadow: 0 4px 14px rgba(8, 28, 47, .3); transition: transform .2s; }
.ba:hover .ba-handle::after { transform: translate(-50%, -50%) scale(1.1); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
/* Echte voor/na-foto's (uit het beheer) vullen de helft; het label blijft erboven */
.ba-img .ba-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ba-img span { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.ba-range:focus-visible ~ .ba-handle::after { outline: 3px solid var(--pacific); outline-offset: 3px; }
.js .ba.is-hint { --pos: 50%; animation: ba-hint 1.6s .3s var(--ease-door); }
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@keyframes ba-hint { 30% { --pos: 35%; } 65% { --pos: 62%; } 100% { --pos: 50%; } }

/* ---------- 12. Werkwijze-tijdlijn ---------- */
.process { position: relative; counter-reset: s; }
.process-step .num { transition: background-color .4s, transform .4s var(--ease-out); }
.js .process-step:not(.is-lit) .num { background: #c9d4de; }
.js .process-step.is-lit .num { transform: scale(1.08); }
.process-step.is-lit .num { background: var(--navy); }
.process-step.is-highlight.is-lit .num { background: var(--carmine); }

/* ---------- 13. FAQ vloeiend ---------- */
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq-sign, .faq-sign::before, .faq-sign::after { transition: background-color .3s, transform .35s var(--ease-out); }
.faq summary:hover .faq-sign { transform: rotate(90deg); }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--carmine); }

/* ---------- 14. Formulierstappen ---------- */
.js .request-form.is-steps .step.is-current { animation: step-in .5s var(--ease-out); }
.js .request-form.is-steps .step.is-current.from-right { animation-name: step-in-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-24px); } }
.steps .bar { position: relative; overflow: hidden; }
.steps .bar::after { content: ''; position: absolute; inset: 0; background: var(--carmine); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-door); }
.steps li.is-active .bar, .steps li.is-done .bar { background: var(--blush-line); }
.steps li.is-active .bar::after, .steps li.is-done .bar::after { transform: scaleX(1); }
.choice span { transition: border-color .2s, background-color .2s, transform .2s; }
.choice:hover span { border-color: var(--carmine); }
.choice input:checked + span { animation: pop .3s var(--ease-out); }
@keyframes pop { 50% { transform: scale(1.02); } }
.thanks-icon { animation: pop-in .6s .2s var(--ease-out) both; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }

/* ---------- 15. Terug naar boven ---------- */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 52px; height: 52px; border: 0; background: var(--navy); color: var(--white); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(8, 28, 47, .25); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease-out), background-color .2s; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--carmine); }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .page-veil { display: none !important; }
  .js [data-reveal], .js [data-door], .js [data-split].is-ready .split-word > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .js [data-door]::after { display: none; }
  .marquee-track, .video-box .play, .js .ba.is-hint, .js .site-header .logo .mark rect:first-child { animation: none !important; }
  .marquee-track { flex-wrap: wrap; width: auto; }
  .marquee ul[aria-hidden] { display: none; }
}