.elementor-65 .elementor-element.elementor-element-fad88ba{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-65 .elementor-element.elementor-element-d42df95{--display:flex;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-65 .elementor-element.elementor-element-28bd00e{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-65 .elementor-element.elementor-element-fbf9af9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-65 .elementor-element.elementor-element-402282b.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:1;}.elementor-65 .elementor-element.elementor-element-402282b .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:600;text-transform:uppercase;color:#1E2EDE;}.elementor-65 .elementor-element.elementor-element-7b3ddd5 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:28px;font-weight:400;color:var( --e-global-color-text );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-65 .elementor-element.elementor-element-e28ab78.elementor-element{--flex-grow:1;}.elementor-65 .elementor-element.elementor-element-ed87bae{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-65 .elementor-element.elementor-element-bb32d2c{--display:flex;}.elementor-65 .elementor-element.elementor-element-6969a13{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-65 .elementor-element.elementor-element-4d5dc7a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-65 .elementor-element.elementor-element-fb81d8e{--display:flex;}:root{--page-title-display:none;}@media(min-width:2400px){.elementor-65 .elementor-element.elementor-element-28bd00e{--grid-auto-flow:row;}}@media(max-width:1366px){.elementor-65 .elementor-element.elementor-element-28bd00e{--grid-auto-flow:row;}}@media(max-width:1200px){.elementor-65 .elementor-element.elementor-element-28bd00e{--grid-auto-flow:row;}}@media(max-width:1024px){.elementor-65 .elementor-element.elementor-element-28bd00e{--grid-auto-flow:row;}}@media(max-width:880px){.elementor-65 .elementor-element.elementor-element-28bd00e{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-65 .elementor-element.elementor-element-28bd00e{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-d42df95 */<!--
  ELEMENTOR INSTELLING
  Selecteer de buitenste container van de volledige sectie "Wat ik maak".
  Ga naar Geavanceerd > CSS Classes en vul in:

  wat-ik-maak-reveal

  Plak daarna dit volledige bestand in één HTML-widget onderaan de pagina.
-->

<style>
  /* In de Elementor-editor blijft de sectie altijd zichtbaar en bewerkbaar. */
  body:not(.elementor-editor-active)
  .wat-ik-maak-reveal.reveal-ready {
    opacity: 0;
    visibility: hidden;
    transform: translateY(48px);
    transition:
      opacity .9s cubic-bezier(.22, 1, .36, 1),
      transform .9s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear .9s;
    will-change: opacity, transform;
  }

  body:not(.elementor-editor-active)
  .wat-ik-maak-reveal.reveal-ready.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity .9s cubic-bezier(.22, 1, .36, 1),
      transform .9s cubic-bezier(.22, 1, .36, 1),
      visibility 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    body:not(.elementor-editor-active)
    .wat-ik-maak-reveal.reveal-ready {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: none;
    }
  }
</style>

<script>
  (() => {
    function setupWatIkMaakReveal() {
      const section = document.querySelector('.wat-ik-maak-reveal');

      if (!section || section.dataset.revealInitialized === 'true') {
        return;
      }

      section.dataset.revealInitialized = 'true';

      const reducedMotion = window.matchMedia(
        '(prefers-reduced-motion: reduce)'
      ).matches;

      if (reducedMotion || !('IntersectionObserver' in window)) {
        section.classList.add('reveal-ready', 'is-visible');
        return;
      }

      /*
        Eerst de verborgen toestand activeren. De sectie neemt nog wel
        gewoon ruimte in, zodat de pagina tijdens het scrollen niet verspringt.
      */
      section.classList.add('reveal-ready');

      const revealObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            observer.unobserve(entry.target);
          }
        });
      }, {
        threshold: 0.12,

        /*
          De onderste 30% van het scherm telt nog niet mee.
          Daardoor blijft "Wat ik maak" verborgen wanneer alleen het eerste
          stukje onderaan de hero zichtbaar is en start de fade pas na scrollen.
        */
        rootMargin: '0px 0px -30% 0px'
      });

      requestAnimationFrame(() => revealObserver.observe(section));
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', setupWatIkMaakReveal);
    } else {
      setupWatIkMaakReveal();
    }
  })();
</script>/* End custom CSS */