{"id":112,"date":"2026-10-14T12:39:15","date_gmt":"2026-10-14T12:39:15","guid":{"rendered":"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/?page_id=112"},"modified":"2026-10-23T21:15:18","modified_gmt":"2026-10-23T21:15:18","slug":"over-mij","status":"publish","type":"page","link":"https:\/\/fscreates.nl\/en\/over-mij\/","title":{"rendered":"About Me"},"content":{"rendered":"<main id='bde-main'><section id=\"top\" class=\"bde-section-112-104 bde-section\" data-entrance=\"zoomOut\">\n              \n  \n  \n\t    \n      <div class=\"section-background-video bde-section-background-video\">\n              <video\n          autoplay\n          muted\n                                loop\n                          >\n        <source src=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/Background-4.mp4\" type=\"video\/mp4\" \/>\n      <\/video>\n      <\/div>\n\n\n  <div class=\"section-background-overlay bde-section-background-overlay\"><\/div>\n\n\n<div class=\"section-container\"><img decoding=\"async\" id=\"fay-home-logo\" class=\"bde-image2-112-105 bde-image2 fay-home-logo\" src=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/Wit-Trans.png\" srcset=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/Wit-Trans.png 667w, https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/Wit-Trans-300x300.png 300w, https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/Wit-Trans-150x150.png 150w\" sizes=\"(max-width: 667px) 100vw, 667px\"><div class=\"bde-wp-menu-112-106 bde-wp-menu\">\n\n\n      \n        \n    <nav class=\"breakdance-menu breakdance-menu--collapse    \">\n    <button class=\"breakdance-menu-toggle breakdance-menu-toggle--squeeze\" type=\"button\" aria-label=\"Open Menu\" aria-expanded=\"false\" aria-controls=\"menu-106\">\n                  <span class=\"breakdance-menu-toggle-icon\">\n            <span class=\"breakdance-menu-toggle-lines\"><\/span>\n          <\/span>\n            <\/button>\n    \n  <ul class=\"breakdance-menu-list\" id=\"menu-106\">\n              \n  \n    <li id=\"menu-item-119\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-119 breakdance-menu-item\"><a href=\"https:\/\/fscreates.nl\/en\/\" class=\"breakdance-menu-link\">Home<\/a><\/li>\n<li id=\"menu-item-118\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-118 breakdance-menu-item\"><a href=\"https:\/\/fscreates.nl\/en\/portfolio\/\" class=\"breakdance-menu-link\">Portfolio<\/a><\/li>\n<li id=\"menu-item-117\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-117 breakdance-menu-item\"><a href=\"https:\/\/fscreates.nl\/en\/over-mij\/\" class=\"breakdance-menu-link\">Over Mij<\/a><\/li>\n<li id=\"menu-item-116\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-116 breakdance-menu-item\"><a href=\"https:\/\/fscreates.nl\/en\/contact\/\" class=\"breakdance-menu-link\">Contact<\/a><\/li>\n\n  <\/ul>\n  <\/nav>\n\n\n<\/div><div class=\"bde-f-html-code-112-109 bde-f-html-code\">\n\n<div class=\"fay-intro\">\n  <div class=\"fay-intro__name\">Fay<br>van de steeg<\/div>\n  <div class=\"fay-intro__role\">visual storyteller<\/div>\n<\/div>\n\n<style>\n.fay-intro {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: #fff;\n  pointer-events: none;\n  z-index: 5;\n}\n\n.fay-intro__name {\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: clamp(30px, 3vw, 46px);\n  font-style: italic;\n  font-weight: 400;\n  line-height: 0.82;\n  letter-spacing: -1.8px;\n}\n\n.fay-intro__role {\n  margin-top: 48px;\n  font-family: Arial, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  letter-spacing: -0.2px;\n}\n<\/style>\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const name = document.querySelector(\".fay-intro__name\");\n  const role = document.querySelector(\".fay-intro__role\");\n\n  if (!name || name.dataset.animated === \"true\") return;\n\n  name.dataset.animated = \"true\";\n\n  const originalText = name.innerHTML;\n  const words = originalText.split(\/<br\\s*\\\/?>\/i);\n\n  name.innerHTML = words.map(word =>\n    [...word].map(letter => {\n      if (letter === \" \") return '<span class=\"fay-letter-space\"> <\/span>';\n      return `<span class=\"fay-letter\">${letter}<\/span>`;\n    }).join(\"\")\n  ).join(\"<br>\");\n\n  const letters = [...name.querySelectorAll(\".fay-letter\")];\n\n  letters.sort(() => Math.random() - 0.5);\n\n  letters.forEach((letter, index) => {\n    letter.style.animationDelay = `${index * 0.075 + Math.random() * 0.12}s`;\n  });\n\n  if (role) {\n    role.classList.add(\"fay-role-animate\");\n    role.style.animationDelay = `${letters.length * 0.075 + 0.35}s`;\n  }\n});\n<\/script>\n\n<style>\n.fay-letter {\n  display: inline-block;\n  opacity: 0;\n  filter: blur(5px);\n  animation: fay-letter-reveal 1.1s ease forwards;\n}\n\n.fay-role-animate {\n  opacity: 0;\n  animation: fay-role-reveal 1.2s ease forwards;\n}\n\n@keyframes fay-letter-reveal {\n  0% {\n    opacity: 0;\n    filter: blur(5px);\n    transform: translateY(8px);\n  }\n  100% {\n    opacity: 1;\n    filter: blur(0);\n    transform: translateY(0);\n  }\n}\n\n@keyframes fay-role-reveal {\n  0% {\n    opacity: 0;\n    filter: blur(4px);\n    transform: translateY(5px);\n  }\n  100% {\n    opacity: 1;\n    filter: blur(0);\n    transform: translateY(0);\n  }\n}\n\n.fay-letter-space {\n  display: inline-block;\n  width: 0.25em;\n}\n<\/style>\n\n\n<\/div><div class=\"bde-f-html-code-112-118 bde-f-html-code\">\n\n<style>\nhtml.fay-return-arrival,\nhtml.fay-return-arrival body {\n  background: #050505 !important;\n}\n\n.fay-return-arrival-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: #050505;\n  color: #f5f1ea;\n  text-align: center;\n  opacity: 1;\n  visibility: visible;\n}\n\n.fay-return-arrival-overlay__eyebrow {\n  margin-bottom: 23px;\n  font-family: inherit;\n  font-size: clamp(10px, 1.1vw, 13px);\n  font-weight: 400;\n  letter-spacing: .19em;\n  text-transform: uppercase;\n  color: rgba(245, 241, 234, .75);\n  opacity: 0;\n  animation: fayReturnArrivalTextIn .7s ease .12s forwards;\n}\n\n.fay-return-arrival-overlay__word {\n  font-family: inherit;\n  font-size: clamp(38px, 8vw, 96px);\n  font-weight: 400;\n  line-height: 1.1;\n  letter-spacing: .12em;\n  text-align: center;\n}\n\n.fay-return-arrival-overlay__line {\n  width: clamp(55px, 8vw, 105px);\n  height: 1px;\n  margin-top: 28px;\n  background: rgba(245, 241, 234, .75);\n}\n\n.fay-return-arrival-overlay.is-leaving {\n  animation: fayReturnArrivalOverlayOut 1.15s\n    cubic-bezier(.65, 0, .35, 1) forwards;\n}\n\n.fay-return-arrival-overlay.is-leaving\n.fay-return-arrival-overlay__word {\n  animation: fayReturnArrivalZoomOut 1.15s\n    cubic-bezier(.2, .7, .2, 1) forwards;\n}\n\n.fay-return-arrival-overlay.is-leaving\n.fay-return-arrival-overlay__eyebrow {\n  animation: fayReturnArrivalTextOut .55s ease forwards;\n}\n\n.fay-return-arrival-overlay.is-leaving\n.fay-return-arrival-overlay__line {\n  animation: fayReturnArrivalLineOut .55s ease forwards;\n}\n\n@keyframes fayReturnArrivalTextIn {\n  to { opacity: 1; }\n}\n\n@keyframes fayReturnArrivalTextOut {\n  to { opacity: 0; transform: translateY(-5px); }\n}\n\n@keyframes fayReturnArrivalLineOut {\n  to { opacity: 0; transform: scaleX(.35); }\n}\n\n@keyframes fayReturnArrivalZoomOut {\n  to { transform: scale(1.13); opacity: 0; }\n}\n\n@keyframes fayReturnArrivalOverlayOut {\n  0% { opacity: 1; visibility: visible; }\n  80% { opacity: 1; visibility: visible; }\n  100% { opacity: 0; visibility: hidden; }\n}\n<\/style>\n\n<script>\n(() => {\n  let shouldAnimate = false;\n\n  try {\n    shouldAnimate =\n      sessionStorage.getItem(\"fayReturnHandoff\") === \"1\";\n\n    if (shouldAnimate) {\n      sessionStorage.removeItem(\"fayReturnHandoff\");\n    }\n  } catch (e) {}\n\n  if (!shouldAnimate) return;\n\n  document.documentElement.classList.add(\"fay-return-arrival\");\n\n  const startArrival = () => {\n    if (document.querySelector(\".fay-return-arrival-overlay\")) return;\n\n    const overlay = document.createElement(\"div\");\n    overlay.className = \"fay-return-arrival-overlay\";\n\n    overlay.innerHTML = `\n      <div class=\"fay-return-arrival-overlay__eyebrow\">\n        Fay van der Steeg \u00b7 Visual storyteller\n      <\/div>\n      <div class=\"fay-return-arrival-overlay__word\">\n        OVER MIJ\n      <\/div>\n      <div class=\"fay-return-arrival-overlay__line\"><\/div>\n    `;\n\n    document.body.appendChild(overlay);\n\n    window.setTimeout(() => {\n      overlay.classList.add(\"is-leaving\");\n    }, 550);\n\n    window.setTimeout(() => {\n      overlay.remove();\n      document.documentElement.classList.remove(\"fay-return-arrival\");\n    }, 1800);\n  };\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", startArrival, { once: true });\n  } else {\n    startArrival();\n  }\n})();\n<\/script>\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-112-101 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-f-html-code-112-110 bde-f-html-code\">\n\n<section class=\"fay-overmij-werk\">\n  <div class=\"fay-werk-inhoud\">\n\n    <header class=\"fay-werk-kop\">\n      <span class=\"fay-werk-label\">FAY VAN DER STEEG &nbsp; \/ &nbsp; OVER MIJ<\/span>\n      <h2>De wereld<br>door <i>mijn ogen.<\/i><\/h2>\n      <p>Een kijkje in wie ik ben en wat mij inspireert.<\/p>\n    <\/header>\n\n    <article class=\"fay-werk-kaart fay-werk-kaart-1\">\n      <div class=\"fay-werk-foto foto-fay-1\">\n        <span class=\"fay-werk-nummer\">01<\/span>\n      <\/div>\n      <div class=\"fay-werk-bijschrift\">\n        <span>ACHTER DE CAMERA<\/span>\n        <h3>Verhalen zien<\/h3>\n      <\/div>\n    <\/article>\n\n    <article class=\"fay-werk-kaart fay-werk-kaart-2\">\n      <div class=\"fay-werk-foto foto-fay-2\">\n        <span class=\"fay-werk-nummer\">02<\/span>\n      <\/div>\n      <div class=\"fay-werk-bijschrift\">\n        <span>MIJN CREATIEVE WERELD<\/span>\n        <h3>Gevoel in beeld<\/h3>\n      <\/div>\n    <\/article>\n\n    <article class=\"fay-werk-kaart fay-werk-kaart-3\">\n      <div class=\"fay-werk-foto foto-fay-3\">\n        <span class=\"fay-werk-nummer\">03<\/span>\n      <\/div>\n      <div class=\"fay-werk-bijschrift\">\n        <span>WIE IK BEN<\/span>\n        <h3>Altijd nieuwsgierig<\/h3>\n      <\/div>\n    <\/article>\n\n  <\/div>\n<\/section>\n\n<style>\n.fay-overmij-werk,\n.fay-overmij-werk * {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  overflow-x: clip !important;\n}\n\n.fay-overmij-werk {\n  position: relative !important;\n  isolation: isolate;\n  display: flow-root;\n\n  \/* Fullscreen positionering *\/\n  width: 100vw !important;\n  max-width: 100vw !important;\n  left: 50% !important;\n  right: auto !important;\n  margin-left: -50vw !important;\n  margin-right: 0 !important;\n  transform: none !important;\n\n  min-height: 230vh;\n  padding: 13vh 7vw 12vh;\n  overflow: hidden;\n  background: #101010;\n  color: #f5f0ed;\n  font-family: Arial, sans-serif;\n}\n\n\/* Warme overgang vanuit de introductie *\/\n.fay-overmij-werk::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 38vh;\n  pointer-events: none;\n  background: linear-gradient(\n    to bottom,\n    #c87960 0%,\n    #75463f 24%,\n    rgba(38, 30, 30, .65) 58%,\n    transparent 100%\n  );\n  opacity: .75;\n}\n\n.fay-werk-inhoud {\n  position: relative;\n  width: 100%;\n  max-width: 1600px;\n  margin: 0 auto;\n}\n\n.fay-werk-kop {\n  position: relative;\n  z-index: 2;\n  margin-bottom: 12vh;\n}\n\n.fay-werk-label,\n.fay-werk-bijschrift > span {\n  display: block;\n  color: #c4b9b3;\n  font-size: 10px;\n  letter-spacing: 1.7px;\n  line-height: 1.6;\n}\n\n.fay-werk-kop h2 {\n  color: #f5f0ed;\n  font-family: Arial, sans-serif;\n  font-size: clamp(54px, 8vw, 112px);\n  font-weight: 400;\n  line-height: .92;\n  letter-spacing: -.065em;\n  margin: 7vh 0 28px;\n}\n\n.fay-werk-kop h2 i {\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-weight: 400;\n}\n\n.fay-werk-kop p {\n  color: #c4b9b3;\n  font-size: 13px;\n  line-height: 1.7;\n  margin: 0;\n}\n\n\/* De drie verspreide kaarten *\/\n.fay-werk-kaart {\n  position: absolute;\n  width: 31%;\n  opacity: 0;\n  transform: translateY(65px);\n  transition:\n    opacity 1s ease,\n    transform 1.1s cubic-bezier(.2,.7,.2,1);\n}\n\n.fay-werk-kaart.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.fay-werk-kaart-1 {\n  top: 48vh;\n  left: 0;\n}\n\n.fay-werk-kaart-2 {\n  top: 75vh;\n  right: 4%;\n  width: 27%;\n}\n\n.fay-werk-kaart-3 {\n  top: 130vh;\n  left: 35%;\n  width: 30%;\n}\n\n.fay-werk-foto {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4 \/ 5;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #29201f;\n  transition: filter .6s ease;\n}\n\n\n.foto-fay-1 {\n  background-image: url(\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/IMG_1500-2-scaled.jpg\");\n  background-size: cover;\n  background-position: center;\n}\n\n.foto-fay-2 {\n  background-image: url(\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/20250819_144008020_iOS-scaled.jpg\");\n  background-size: cover;\n  background-position: center;\n}\n\n.foto-fay-3 {\n  background-image: url(\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/AV-20240925-46-1-scaled.jpg\");\n  background-size: cover;\n  background-position: center;\n}\n\n\n.fay-werk-nummer {\n  color: rgba(255,245,239,.9);\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: clamp(36px, 5vw, 70px);\n  font-weight: 400;\n}\n\n.fay-werk-kaart:hover .fay-werk-foto {\n  filter: brightness(1.12);\n}\n\n.fay-werk-bijschrift {\n  padding-top: 16px;\n}\n\n.fay-werk-bijschrift h3 {\n  color: #f5f0ed;\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: clamp(22px, 2.4vw, 34px);\n  font-weight: 400;\n  line-height: 1.15;\n  margin: 8px 0 0;\n}\n\n\/* Mobiele weergave *\/\n@media (max-width: 767px) {\n  .fay-overmij-werk {\n    min-height: auto;\n    padding: 100px 7vw 90px;\n  }\n\n  .fay-overmij-werk::before {\n    height: 250px;\n  }\n\n  .fay-werk-kop {\n    margin-bottom: 55px;\n  }\n\n  .fay-werk-kop h2 {\n    font-size: clamp(48px, 12vw, 76px);\n    margin-top: 45px;\n    letter-spacing: -.055em;\n  }\n\n  .fay-werk-kaart,\n  .fay-werk-kaart-1,\n  .fay-werk-kaart-2,\n  .fay-werk-kaart-3 {\n    position: relative;\n    inset: auto;\n    width: 82%;\n    margin: 0 0 55px auto;\n    opacity: 1;\n    transform: none;\n  }\n\n  .fay-werk-kaart-2 {\n    width: 76%;\n    margin-left: 0;\n  }\n\n  .fay-werk-kaart-3 {\n    width: 86%;\n    margin-left: auto;\n  }\n\n  .fay-werk-foto,\n  .foto-fay-2,\n  .foto-fay-3 {\n    aspect-ratio: 4 \/ 5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fay-werk-kaart {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n}\n<\/style>\n\n<script>\n(() => {\n  function initFayWerk() {\n    document.querySelectorAll('.fay-overmij-werk').forEach(section => {\n      if (section.dataset.init === 'true') return;\n      section.dataset.init = 'true';\n\n      const cards = section.querySelectorAll('.fay-werk-kaart');\n\n      if (!('IntersectionObserver' in window)) {\n        cards.forEach(card => card.classList.add('is-visible'));\n        return;\n      }\n\n      const observer = new IntersectionObserver(entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            entry.target.classList.add('is-visible');\n            observer.unobserve(entry.target);\n          }\n        });\n      }, {\n        threshold: 0.08,\n        rootMargin: '0px 0px -5% 0px'\n      });\n\n      cards.forEach(card => observer.observe(card));\n    });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initFayWerk);\n  } else {\n    initFayWerk();\n  }\n})();\n<\/script>\n\n<\/div><div class=\"bde-f-html-code-112-111 bde-f-html-code\">\n\n<style>\n\/* =========================================\n   FAY \u2014 EDITORIAL CONNECTING ROUTE\n   Decoratieve verbinding tussen de 3 foto's\n   ========================================= *\/\n\n.fay-editorial-route {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  pointer-events: none;\n  overflow: visible;\n  color: #c98d76;\n}\n\n.fay-editorial-route svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n\/* De fijne, vloeiende hoofdlijn *\/\n.fay-route-main {\n  fill: none;\n  stroke: #b77d68;\n  stroke-width: 1.2;\n  stroke-linecap: round;\n  stroke-dasharray: 2 8;\n  opacity: .75;\n  vector-effect: non-scaling-stroke;\n}\n\n\/* Een subtiele tweede lijn *\/\n.fay-route-secondary {\n  fill: none;\n  stroke: #e0ae96;\n  stroke-width: .65;\n  stroke-dasharray: 1 12;\n  opacity: .45;\n  vector-effect: non-scaling-stroke;\n}\n\n\/* Kleine punten langs de route *\/\n.fay-route-dot {\n  fill: #d6a08a;\n  opacity: .8;\n}\n\n.fay-route-dot-small {\n  fill: #f0c6b4;\n  opacity: .55;\n}\n\n\/* Markeringen bij de foto's *\/\n.fay-route-marker {\n  fill: #101010;\n  stroke: #c98d76;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.fay-route-marker-inner {\n  fill: #d8a18b;\n}\n\n\/* Accentcirkel *\/\n.fay-route-orbit {\n  fill: none;\n  stroke: #b77d68;\n  stroke-width: .7;\n  stroke-dasharray: 2 5;\n  opacity: .75;\n  vector-effect: non-scaling-stroke;\n}\n\n\/* Lichtpunt dat langs de route beweegt *\/\n.fay-route-light {\n  fill: #f4c9b5;\n  filter: drop-shadow(0 0 4px rgba(226, 157, 128, .85));\n}\n\n\/* Scrollgestuurde lijnopbouw *\/\n.fay-route-draw {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1);\n}\n\n.fay-route-ready .fay-route-draw {\n  stroke-dashoffset: 0;\n}\n\n\/* Zachte introductie *\/\n.fay-route-decoration {\n  opacity: 0;\n  transition: opacity 1.2s ease;\n}\n\n.fay-route-ready .fay-route-decoration {\n  opacity: 1;\n}\n\n\/* Mobiel: minder decoratie, zodat de foto's centraal blijven *\/\n@media (max-width: 767px) {\n  .fay-editorial-route {\n    opacity: .55;\n  }\n\n  .fay-route-secondary {\n    display: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fay-route-draw,\n  .fay-route-decoration {\n    transition: none;\n  }\n\n  .fay-route-draw {\n    stroke-dashoffset: 0;\n  }\n\n  .fay-route-decoration {\n    opacity: 1;\n  }\n}\n<\/style>\n\n<script>\n(() => {\n  function initFayEditorialRoute() {\n    \/*\n      Zoek de bestaande sectie met de fotokaarten.\n      De SVG wordt daarin als decoratieve laag geplaatst.\n    *\/\n    const sections = document.querySelectorAll('.fay-overmij-werk');\n\n    sections.forEach(section => {\n      if (section.dataset.editorialRoute === 'true') return;\n      section.dataset.editorialRoute = 'true';\n\n      const cards = [\n        section.querySelector('.fay-werk-kaart-1'),\n        section.querySelector('.fay-werk-kaart-2'),\n        section.querySelector('.fay-werk-kaart-3')\n      ];\n\n      if (cards.some(card => !card)) return;\n\n      \/*\n        De route gebruikt de werkelijke posities van de kaarten.\n        Daardoor hoeft de bestaande layout niet aangepast te worden.\n      *\/\n      const route = document.createElement('div');\n      route.className = 'fay-editorial-route';\n      route.setAttribute('aria-hidden', 'true');\n\n      section.style.position = 'relative';\n\n      route.innerHTML = `\n        <svg viewBox=\"0 0 1000 1000\"\n             preserveAspectRatio=\"none\"\n             role=\"presentation\">\n\n          <defs>\n            <path id=\"fay-route-path\"\n              d=\"M 90 300\n                 C 240 300, 270 420, 420 430\n                 S 670 490, 820 590\n                 S 680 760, 500 830\" \/>\n\n            <path id=\"fay-route-secondary-path\"\n              d=\"M 90 315\n                 C 240 315, 280 435, 420 445\n                 S 660 505, 805 605\n                 S 665 775, 485 845\" \/>\n          <\/defs>\n\n          <!-- Hoofdlijn -->\n          <use href=\"#fay-route-path\"\n               class=\"fay-route-main fay-route-draw\"\n               pathLength=\"1\" \/>\n\n          <!-- Tweede, subtiele lijn -->\n          <use href=\"#fay-route-secondary-path\"\n               class=\"fay-route-secondary fay-route-decoration\" \/>\n\n          <!-- Kleine stippen op de route -->\n          <g class=\"fay-route-decoration\">\n            <circle class=\"fay-route-dot\" cx=\"165\" cy=\"316\" r=\"2.2\"\/>\n            <circle class=\"fay-route-dot-small\" cx=\"210\" cy=\"331\" r=\"1.4\"\/>\n            <circle class=\"fay-route-dot\" cx=\"270\" cy=\"365\" r=\"1.8\"\/>\n            <circle class=\"fay-route-dot-small\" cx=\"330\" cy=\"405\" r=\"1.4\"\/>\n            <circle class=\"fay-route-dot\" cx=\"410\" cy=\"430\" r=\"2.2\"\/>\n            <circle class=\"fay-route-dot-small\" cx=\"485\" cy=\"448\" r=\"1.4\"\/>\n            <circle class=\"fay-route-dot\" cx=\"570\" cy=\"466\" r=\"1.8\"\/>\n            <circle class=\"fay-route-dot-small\" cx=\"655\" cy=\"495\" r=\"1.4\"\/>\n            <circle class=\"fay-route-dot\" cx=\"740\" cy=\"540\" r=\"2.2\"\/>\n            <circle class=\"fay-route-dot-small\" cx=\"790\" cy=\"580\" r=\"1.4\"\/>\n            <circle class=\"fay-route-dot\" cx=\"765\" cy=\"660\" r=\"1.8\"\/>\n            <circle class=\"fay-route-dot-small\" cx=\"690\" cy=\"720\" r=\"1.4\"\/>\n            <circle class=\"fay-route-dot\" cx=\"605\" cy=\"780\" r=\"2.2\"\/>\n          <\/g>\n\n          <!-- Hoofdmarkeringen -->\n          <g class=\"fay-route-decoration\">\n            <circle class=\"fay-route-orbit\" cx=\"90\" cy=\"300\" r=\"17\"\/>\n            <circle class=\"fay-route-marker\" cx=\"90\" cy=\"300\" r=\"6\"\/>\n            <circle class=\"fay-route-marker-inner\" cx=\"90\" cy=\"300\" r=\"2\"\/>\n\n            <circle class=\"fay-route-orbit\" cx=\"820\" cy=\"590\" r=\"17\"\/>\n            <circle class=\"fay-route-marker\" cx=\"820\" cy=\"590\" r=\"6\"\/>\n            <circle class=\"fay-route-marker-inner\" cx=\"820\" cy=\"590\" r=\"2\"\/>\n\n            <circle class=\"fay-route-orbit\" cx=\"500\" cy=\"830\" r=\"17\"\/>\n            <circle class=\"fay-route-marker\" cx=\"500\" cy=\"830\" r=\"6\"\/>\n            <circle class=\"fay-route-marker-inner\" cx=\"500\" cy=\"830\" r=\"2\"\/>\n          <\/g>\n\n          <!-- Lichtpunt op de route -->\n          <circle class=\"fay-route-light\" r=\"3\">\n            <animateMotion\n              dur=\"8s\"\n              repeatCount=\"indefinite\"\n              rotate=\"auto\">\n              <mpath href=\"#fay-route-path\"\/>\n            <\/animateMotion>\n          <\/circle>\n\n        <\/svg>\n      `;\n\n      section.prepend(route);\n\n      \/*\n        Start de animatie zodra de sectie in beeld komt.\n      *\/\n      if ('IntersectionObserver' in window) {\n        const observer = new IntersectionObserver(entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              route.classList.add('fay-route-ready');\n              observer.unobserve(section);\n            }\n          });\n        }, { threshold: 0.05 });\n\n        observer.observe(section);\n      } else {\n        route.classList.add('fay-route-ready');\n      }\n    });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initFayEditorialRoute);\n  } else {\n    initFayEditorialRoute();\n  }\n})();\n<\/script>\n\n<\/div><div class=\"bde-f-html-code-112-112 bde-f-html-code\">\n\n<style>\n\/* FAY \u2014 subtiele scrollbeweging voor de fotokaarten *\/\n\n.fay-overmij-werk .fay-werk-kaart {\n  --fay-parallax-y: 0px;\n  will-change: transform;\n}\n\n.fay-overmij-werk .fay-werk-kaart.is-visible {\n  transform: translate3d(0, var(--fay-parallax-y), 0);\n}\n\n\/* Houd rekening met gebruikers die minder beweging willen *\/\n@media (prefers-reduced-motion: reduce) {\n  .fay-overmij-werk .fay-werk-kaart,\n  .fay-overmij-werk .fay-werk-kaart.is-visible {\n    transform: none !important;\n    will-change: auto;\n  }\n}\n\n\/* Mobiel: behoud de bestaande layout *\/\n@media (max-width: 767px) {\n  .fay-overmij-werk .fay-werk-kaart {\n    will-change: auto;\n  }\n\n  .fay-overmij-werk .fay-werk-kaart.is-visible {\n    transform: none;\n  }\n}\n<\/style>\n\n<script>\n(() => {\n  function initFayPhotoParallax() {\n    const sections = document.querySelectorAll(\".fay-overmij-werk\");\n\n    sections.forEach(section => {\n      if (section.dataset.fayParallaxInit === \"true\") return;\n      section.dataset.fayParallaxInit = \"true\";\n\n      const cards = [\n        {\n          element: section.querySelector(\".fay-werk-kaart-1\"),\n          speed: -0.07\n        },\n        {\n          element: section.querySelector(\".fay-werk-kaart-2\"),\n          speed: 0.055\n        },\n        {\n          element: section.querySelector(\".fay-werk-kaart-3\"),\n          speed: -0.045\n        }\n      ].filter(item => item.element);\n\n      let ticking = false;\n\n      function updateParallax() {\n        ticking = false;\n\n        if (\n          window.innerWidth <= 767 ||\n          window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n        ) {\n          cards.forEach(item => {\n            item.element.style.setProperty(\"--fay-parallax-y\", \"0px\");\n          });\n          return;\n        }\n\n        const sectionRect = section.getBoundingClientRect();\n        const viewportHeight = window.innerHeight;\n\n        if (\n          sectionRect.bottom < 0 ||\n          sectionRect.top > viewportHeight\n        ) {\n          return;\n        }\n\n        cards.forEach(item => {\n          const rect = item.element.getBoundingClientRect();\n\n          const cardCenter = rect.top + rect.height \/ 2;\n          const distanceFromCenter = cardCenter - viewportHeight \/ 2;\n\n          const movement = Math.max(\n            -38,\n            Math.min(38, -distanceFromCenter * item.speed)\n          );\n\n          item.element.style.setProperty(\n            \"--fay-parallax-y\",\n            movement.toFixed(2) + \"px\"\n          );\n        });\n      }\n\n      function requestUpdate() {\n        if (!ticking) {\n          ticking = true;\n          window.requestAnimationFrame(updateParallax);\n        }\n      }\n\n      window.addEventListener(\"scroll\", requestUpdate, { passive: true });\n      window.addEventListener(\"resize\", requestUpdate);\n\n      updateParallax();\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFayPhotoParallax\n    );\n  } else {\n    initFayPhotoParallax();\n  }\n})();\n<\/script>\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-112-102 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-f-html-code-112-115 bde-f-html-code\">\n<style>\n\/* ==================================================\n   STANZZA \u2014 FULLSCREEN EDITORIAL RECONSTRUCTION\n   Full viewport width \u2022 Breakdance-ready\n================================================== *\/\n\n#stz-reconstruction,\n#stz-reconstruction * {\n  box-sizing: border-box;\n}\n\n#stz-reconstruction {\n  --paper: #f4f3ec;\n  --ink: #292a2b;\n  --grid-line: rgba(75, 72, 62, .055);\n\n  \/* Break out of Breakdance's centered content container *\/\n  position: relative !important;\n  display: block !important;\n  width: 102vw !important;\n  max-width: none !important;\n  min-width: 0 !important;\n  left: 50% !important;\n  right: auto !important;\n  margin-left: -47vw !important;\n  margin-right: 0 !important;\n  padding: 0 !important;\n\n  overflow: clip;\n  background: var(--paper);\n  color: var(--ink);\n  font-family: \"Poppins\", sans-serif;\n  isolation: isolate;\n}\n\n#stz-reconstruction img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  object-fit: cover;\n}\n\n#stz-reconstruction figure,\n#stz-reconstruction p,\n#stz-reconstruction h2 {\n  margin: 0;\n}\n\n\/* FULL-WIDTH EDITORIAL CANVAS *\/\n\n#stz-reconstruction .stz-composition {\n  position: relative;\n  width: 100%;\n  height: 1550px;\n  overflow: hidden;\n  background: var(--paper);\n}\n\n#stz-reconstruction .stz-grid {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-image:\n    linear-gradient(\n      to right,\n      transparent calc(33.333% - .5px),\n      var(--grid-line) 33.333%,\n      transparent calc(33.333% + .5px)\n    ),\n    linear-gradient(\n      to right,\n      transparent calc(66.666% - .5px),\n      var(--grid-line) 66.666%,\n      transparent calc(66.666% + .5px)\n    );\n}\n\n\/* TITLE *\/\n\n#stz-reconstruction .stz-heading {\n  position: absolute;\n  z-index: 5;\n  top: 150px;\n  left: 50%;\n  width: min(90%, 430px);\n  text-align: center;\n  transform: translateX(-50%);\n}\n\n#stz-reconstruction .stz-eyebrow {\n  display: block;\n  margin-bottom: 18px;\n  font-size: 8px;\n  line-height: 1.4;\n  letter-spacing: 2px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n#stz-reconstruction .stz-heading h2 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: clamp(36px, 2.5vw, 49px);\n  line-height: .91;\n  font-weight: 400;\n  letter-spacing: -1.7px;\n}\n\n\/* PHOTO FRAMES *\/\n\n#stz-reconstruction .stz-motion {\n  will-change: transform;\n}\n\n#stz-reconstruction .stz-photo {\n  position: absolute;\n  z-index: 2;\n  overflow: hidden;\n  background: #e4e0d5;\n}\n\n#stz-reconstruction .stz-photo img {\n  transition: transform 1s cubic-bezier(.2, .65, .3, 1);\n}\n\n#stz-reconstruction .stz-photo:hover img {\n  transform: scale(1.025);\n}\n\n\/* Main vertical image *\/\n#stz-reconstruction .stz-photo--hero {\n  top: 350px;\n  left: 39.3%;\n  width: 14%;\n  height: 330px;\n}\n\n\/* Larger image on the left *\/\n#stz-reconstruction .stz-photo--left-top {\n  top: 600px;\n  left: 1.9%;\n  width: 9%;\n  height: 150px;\n}\n\n\/* Lower-left image \u2014 moved right to avoid text overlap *\/\n#stz-reconstruction .stz-photo--left-lower {\n  top: 920px;\n  left: 24%;\n  width: 17%;\n  height: 210px;\n}\n\n\/* Right-side image *\/\n#stz-reconstruction .stz-photo--right-top {\n  top: 790px;\n  right: 1.9%;\n  width: 12%;\n  height: 220px;\n}\n\n\/* Lower image *\/\n#stz-reconstruction .stz-photo--bottom {\n  top: 1110px;\n  left: 57%;\n  width: 17%;\n  height: 230px;\n}\n\n\/* TEXT BLOCKS *\/\n\n#stz-reconstruction .stz-copy {\n  position: absolute;\n  z-index: 3;\n  max-width: 340px;\n  font-size: 15px;\n  line-height: 1.55;\n  font-weight: 400;\n  letter-spacing: 0;\n}\n\n#stz-reconstruction .stz-copy--right {\n  top: 790px;\n  right: 17%;\n  width: 17%;\n}\n\n#stz-reconstruction .stz-copy--left {\n  top: 1060px;\n  left: 1.9%;\n  width: 20%;\n}\n\n\/* SMALLER DESKTOP \/ TABLET *\/\n\n@media (max-width: 1100px) and (min-width: 701px) {\n  #stz-reconstruction .stz-composition {\n    height: 1350px;\n  }\n\n  #stz-reconstruction .stz-heading {\n    top: 125px;\n  }\n\n  #stz-reconstruction .stz-photo--hero {\n    top: 315px;\n    left: 39%;\n    width: 13%;\n    height: 310px;\n  }\n\n  #stz-reconstruction .stz-photo--left-top {\n    top: 510px;\n    width: 9%;\n    height: 140px;\n  }\n\n  #stz-reconstruction .stz-photo--left-lower {\n    top: 790px;\n    left: 24%;\n    width: 17%;\n    height: 185px;\n  }\n\n  #stz-reconstruction .stz-photo--right-top {\n    top: 680px;\n    width: 12%;\n    height: 190px;\n  }\n\n  #stz-reconstruction .stz-photo--bottom {\n    top: 980px;\n    left: 55%;\n    width: 17%;\n    height: 215px;\n  }\n\n  #stz-reconstruction .stz-copy--right {\n    top: 680px;\n    right: 15%;\n    width: 17%;\n  }\n\n  #stz-reconstruction .stz-copy--left {\n    top: 970px;\n    width: 20%;\n  }\n}\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n  #stz-reconstruction .stz-composition {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px 14px;\n    height: auto;\n    padding: 75px 5% 65px;\n    overflow: hidden;\n  }\n\n  #stz-reconstruction .stz-grid {\n    display: none;\n  }\n\n  #stz-reconstruction .stz-heading,\n  #stz-reconstruction .stz-photo,\n  #stz-reconstruction .stz-copy {\n    position: relative;\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto;\n    max-width: none;\n    transform: none !important;\n    will-change: auto;\n  }\n\n  #stz-reconstruction .stz-heading {\n    grid-column: 1 \/ -1;\n    justify-self: center;\n    margin-bottom: 15px;\n  }\n\n  #stz-reconstruction .stz-heading h2 {\n    font-size: 38px;\n  }\n\n  #stz-reconstruction .stz-photo {\n    aspect-ratio: 3 \/ 4;\n  }\n\n  #stz-reconstruction .stz-photo--hero {\n    grid-column: 1 \/ -1;\n    width: 48%;\n    justify-self: center;\n  }\n\n  #stz-reconstruction .stz-photo--left-top,\n  #stz-reconstruction .stz-photo--right-top {\n    width: 100%;\n  }\n\n  #stz-reconstruction .stz-photo--left-lower {\n    width: 100%;\n    aspect-ratio: 1 \/ 1;\n  }\n\n  #stz-reconstruction .stz-photo--bottom {\n    grid-column: 1 \/ -1;\n    width: 65%;\n    justify-self: center;\n  }\n\n  #stz-reconstruction .stz-copy {\n    font-size: 12px;\n    line-height: 1.5;\n    align-self: center;\n  }\n\n  #stz-reconstruction .stz-copy--right {\n    grid-column: 1 \/ -1;\n    width: 78%;\n    justify-self: end;\n  }\n\n  #stz-reconstruction .stz-copy--left {\n    grid-column: 1 \/ -1;\n    width: 78%;\n  }\n}\n\n\/* ACCESSIBILITY *\/\n\n@media (prefers-reduced-motion: reduce) {\n  #stz-reconstruction .stz-motion {\n    will-change: auto;\n  }\n\n  #stz-reconstruction .stz-photo img {\n    transition: none;\n  }\n}\n<\/style>\n\n<section id=\"stz-reconstruction\">\n\n  <div class=\"stz-composition\">\n\n    <div class=\"stz-grid\" aria-hidden=\"true\"><\/div>\n\n    <header class=\"stz-heading\">\n      <span class=\"stz-eyebrow\">[ PERSPECTIEF ]<\/span>\n      <h2>Meer dan<br> alleen beeld. <\/h2>\n    <\/header>\n\n    <!-- Verwisselbare afbeeldingslinks -->\n\n    <figure class=\"stz-photo stz-photo--hero stz-motion\"\n            data-stz-speed=\"-0.18\">\n      <img decoding=\"async\"\n        src=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/S8.jpg\"\n        alt=\"Main interior photograph\">\n    <\/figure>\n\n    <figure class=\"stz-photo stz-photo--left-top stz-motion\"\n            data-stz-speed=\"0.24\">\n      <img decoding=\"async\"\n        src=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/IMG_0524-bewerkt-1-scaled.jpg\"\n        alt=\"Interior detail\">\n    <\/figure>\n\n    <figure class=\"stz-photo stz-photo--left-lower stz-motion\"\n            data-stz-speed=\"-0.13\">\n      <img decoding=\"async\"\n        src=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/FS-4321-scaled.jpg\"\n        alt=\"Material study\">\n    <\/figure>\n\n    <figure class=\"stz-photo stz-photo--right-top stz-motion\"\n            data-stz-speed=\"0.20\">\n      <img decoding=\"async\"\n        src=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/image00001-scaled.jpg\"\n        alt=\"Architectural detail\">\n    <\/figure>\n\n    <figure class=\"stz-photo stz-photo--bottom stz-motion\"\n            data-stz-speed=\"-0.23\">\n      <img decoding=\"async\"\n        src=\"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/wp-content\/uploads\/2026\/10\/FS-491-scaled.jpg\"\n        alt=\"Interior project\">\n    <\/figure>\n\n    <p class=\"stz-copy stz-copy--right stz-motion\"\n       data-stz-speed=\"0.07\">\n      Ik geloof dat de mooiste creaties ontstaan wanneer gevoel en creativiteit samenkomen. Door te experimenteren, details te ontdekken en anders te kijken, krijgt ieder project een eigen verhaal.\n    <\/p>\n\n    <p class=\"stz-copy stz-copy--left stz-motion\"\n       data-stz-speed=\"-0.07\">\n      Ik ben Fay, een creatieve maker met een passie voor beeld, vormgeving en het vertellen van verhalen. Ik haal inspiratie uit mensen, plekken en kleine details die iets bijzonders in zich dragen.\n      <br>\n      <br>\n      Met fotografie, video en grafisch ontwerp geef ik idee\u00ebn een visuele vorm. Mijn doel is om werk te cre\u00ebren dat niet alleen mooi is om naar te kijken, maar ook iets overbrengt en bijblijft.\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n<script>\n(() => {\n  const root = document.getElementById(\"stz-reconstruction\");\n\n  if (!root || root.dataset.stzInit === \"true\") return;\n  root.dataset.stzInit = \"true\";\n\n  const canvas = root.querySelector(\".stz-composition\");\n  const items = [...root.querySelectorAll(\"[data-stz-speed]\")];\n  const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\n  let raf = 0;\n\n  function updateParallax() {\n    raf = 0;\n\n    if (window.innerWidth <= 700 || reduceMotion.matches) {\n      items.forEach(el => {\n        el.style.transform = \"\";\n      });\n      return;\n    }\n\n    const rect = canvas.getBoundingClientRect();\n\n    if (rect.bottom < 0 || rect.top > window.innerHeight) return;\n\n    const viewportCenter = window.innerHeight \/ 2;\n    const canvasCenter = rect.top + rect.height \/ 2;\n    const distance = viewportCenter - canvasCenter;\n\n    items.forEach(el => {\n      const speed = Number(el.dataset.stzSpeed || 0);\n      const y = Math.max(-65, Math.min(65, distance * speed));\n\n      el.style.transform = `translate3d(0, ${y.toFixed(2)}px, 0)`;\n    });\n  }\n\n  function requestUpdate() {\n    if (raf) return;\n    raf = window.requestAnimationFrame(updateParallax);\n  }\n\n  window.addEventListener(\"scroll\", requestUpdate, { passive: true });\n  window.addEventListener(\"resize\", requestUpdate);\n  reduceMotion.addEventListener?.(\"change\", requestUpdate);\n\n  updateParallax();\n})();\n<\/script>\n<\/div><\/div>\n<\/section><section class=\"bde-section-112-113 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-icon-112-116 bde-icon fay-malta-plane\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><!--! Font Awesome Free 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d=\"M381 114.9L186.1 41.8c-16.7-6.2-35.2-5.3-51.1 2.7L89.1 67.4C78 73 77.2 88.5 87.6 95.2l146.9 94.5L136 240 77.8 214.1c-8.7-3.9-18.8-3.7-27.3 .6L18.3 230.8c-9.3 4.7-11.8 16.8-5 24.7l73.1 85.3c6.1 7.1 15 11.2 24.3 11.2H248.4c5 0 9.9-1.2 14.3-3.4L535.6 212.2c46.5-23.3 82.5-63.3 100.8-112C645.9 75 627.2 48 600.2 48H542.8c-20.2 0-40.2 4.8-58.2 14L381 114.9zM0 480c0 17.7 14.3 32 32 32H608c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32z\"\/><\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-f-html-code-112-117 bde-f-html-code\">\n\n<style>\n.fay-malta-plane {\n  cursor: pointer;\n  transform-origin: center;\n  animation: fayPlaneIdle 3s ease-in-out infinite;\n  will-change: transform;\n}\n\n.fay-malta-plane.fay-plane-launching {\n  animation: none !important;\n  z-index: 100002;\n}\n\n@keyframes fayPlaneIdle {\n  0%, 100% { transform: translateY(0) rotate(-2deg); }\n  50% { transform: translateY(-7px) rotate(2deg); }\n}\n\n.fay-malta-cinematic {\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n  overflow: hidden;\n  background: #050505;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 1.1s ease;\n  isolation: isolate;\n}\n\n.fay-malta-cinematic.is-active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.fay-malta-cinematic__black {\n  position: absolute;\n  inset: 0;\n  background: #050505;\n  opacity: 0;\n  transition: opacity 2.1s cubic-bezier(.65, 0, .35, 1);\n}\n\n.fay-malta-cinematic.is-active .fay-malta-cinematic__black {\n  opacity: 1;\n}\n\n.fay-malta-cinematic__light {\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(ellipse at 55% 45%,\n      rgba(210, 166, 99, .10),\n      transparent 48%);\n  opacity: 0;\n  transition: opacity 1.4s ease;\n}\n\n.fay-malta-cinematic.is-active .fay-malta-cinematic__light {\n  opacity: 1;\n}\n\n.fay-malta-cinematic__route {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  opacity: 1;\n  transition: opacity 1.15s ease;\n}\n\n.fay-malta-cinematic__route path {\n  fill: none;\n  stroke: rgba(236, 219, 188, .9);\n  stroke-width: 1.4;\n  stroke-dasharray: 2 9;\n  stroke-linecap: round;\n  vector-effect: non-scaling-stroke;\n}\n\n.fay-malta-cinematic__route path.fay-route-draw {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  animation: fayDrawRoute 1.35s cubic-bezier(.4, 0, .2, 1) forwards;\n}\n\n@keyframes fayDrawRoute {\n  to { stroke-dashoffset: 0; }\n}\n\n.fay-malta-cinematic__particles {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.fay-malta-cinematic__particle {\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n  background: #f2d6a2;\n  box-shadow: 0 0 12px 2px rgba(242, 214, 162, .45);\n  animation: fayParticle 1.8s ease-out forwards;\n}\n\n@keyframes fayParticle {\n  0% { opacity: 0; transform: scale(.3); }\n  25% { opacity: .9; }\n  100% { opacity: 0; transform: scale(0) translateY(-16px); }\n}\n\n.fay-malta-cinematic__flare {\n  position: absolute;\n  width: 180px;\n  height: 180px;\n  border-radius: 50%;\n  background: radial-gradient(circle,\n    rgba(244, 213, 162, .16),\n    rgba(244, 213, 162, .035) 34%,\n    transparent 70%);\n  transform: translate(-50%, -50%) scale(.4);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.fay-malta-cinematic.is-active .fay-malta-cinematic__flare {\n  animation: fayFlare 1.2s ease-out .5s forwards;\n}\n\n@keyframes fayFlare {\n  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }\n  45% { opacity: 1; }\n  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }\n}\n\n.fay-malta-title {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  text-align: center;\n  padding: 24px;\n  opacity: 0;\n  transform: translateY(12px);\n  transition:\n    opacity 1.1s ease,\n    transform 1.1s cubic-bezier(.2, .7, .2, 1);\n  color: #f5f1ea;\n}\n\n.fay-malta-cinematic.is-title-visible .fay-malta-title {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.fay-malta-title__eyebrow {\n  margin-bottom: 23px;\n  font-family: inherit;\n  font-size: clamp(10px, 1.1vw, 13px);\n  font-weight: 400;\n  letter-spacing: .19em;\n  text-transform: uppercase;\n  color: rgba(245, 241, 234, .75);\n}\n\n.fay-malta-title__word {\n  font-family: inherit;\n  font-size: clamp(48px, 10vw, 112px);\n  font-weight: 400;\n  line-height: .95;\n  letter-spacing: .16em;\n  padding-left: .16em;\n}\n\n.fay-malta-title__line {\n  width: 0;\n  height: 1px;\n  margin-top: 28px;\n  background: rgba(245, 241, 234, .75);\n  transition: width 1s ease .35s;\n}\n\n.fay-malta-cinematic.is-title-visible .fay-malta-title__line {\n  width: clamp(55px, 8vw, 105px);\n}\n\n.fay-malta-cinematic.is-route-fading .fay-malta-cinematic__route,\n.fay-malta-cinematic.is-route-fading .fay-malta-cinematic__particles {\n  opacity: 0;\n}\n\n.fay-malta-cinematic.is-final-black .fay-malta-cinematic__light {\n  opacity: 0;\n}\n\n.fay-malta-cinematic.is-final-black .fay-malta-title__eyebrow,\n.fay-malta-cinematic.is-final-black .fay-malta-title__word,\n.fay-malta-cinematic.is-final-black .fay-malta-title__line {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fay-malta-plane { animation: none; }\n}\n<\/style>\n\n<script>\n(() => {\n  const DESTINATION =\n    \"https:\/\/fayscreativestud-fj7kn7hihw.live-website.com\/malta\/\";\n\n  const init = () => {\n    const plane = document.querySelector(\".fay-malta-plane\");\n    if (!plane || plane.dataset.fayMaltaReady === \"true\") return;\n    plane.dataset.fayMaltaReady = \"true\";\n\n    \/\/ Laat de browser de bestemming alvast ophalen als dat mogelijk is.\n    const prefetch = document.createElement(\"link\");\n    prefetch.rel = \"prefetch\";\n    prefetch.href = DESTINATION;\n    document.head.appendChild(prefetch);\n\n    let running = false;\n\n    plane.addEventListener(\"click\", (event) => {\n      if (running) return;\n      running = true;\n\n      event.preventDefault();\n\n      const rect = plane.getBoundingClientRect();\n      const startX = rect.left + rect.width \/ 2;\n      const startY = rect.top + rect.height \/ 2;\n\n      const overlay = document.createElement(\"div\");\n      overlay.className = \"fay-malta-cinematic\";\n\n      overlay.innerHTML = `\n        <div class=\"fay-malta-cinematic__black\"><\/div>\n        <div class=\"fay-malta-cinematic__light\"><\/div>\n        <svg class=\"fay-malta-cinematic__route\"\n             viewBox=\"0 0 ${window.innerWidth} ${window.innerHeight}\"\n             preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"fay-route-draw\"\n            pathLength=\"1\"\n            d=\"M ${startX} ${startY}\n               C ${startX + 70} ${startY - 110},\n                 ${window.innerWidth * .40} ${window.innerHeight * .20},\n                 ${window.innerWidth * .55} ${window.innerHeight * .48}\n               S ${window.innerWidth * .82} ${window.innerHeight * .62},\n                 ${window.innerWidth + 80} ${window.innerHeight * .15}\" \/>\n        <\/svg>\n        <div class=\"fay-malta-cinematic__particles\"><\/div>\n        <div class=\"fay-malta-cinematic__flare\"\n             style=\"left:${startX}px;top:${startY}px\"><\/div>\n        <div class=\"fay-malta-title\">\n          <div class=\"fay-malta-title__eyebrow\">\n            Fay van der Steeg \u00b7 Visual storyteller\n          <\/div>\n          <div class=\"fay-malta-title__word\">MALTA<\/div>\n          <div class=\"fay-malta-title__line\"><\/div>\n        <\/div>\n      `;\n\n      document.body.appendChild(overlay);\n      plane.classList.add(\"fay-plane-launching\");\n\n      \/\/ Eerst de overlay activeren; de zwarte laag bouwt daarna rustig op.\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => overlay.classList.add(\"is-active\"));\n      });\n\n      \/\/ Kleine warme lichtdeeltjes rond het begin van de route.\n      const particleLayer = overlay.querySelector(\n        \".fay-malta-cinematic__particles\"\n      );\n\n      for (let i = 0; i < 13; i++) {\n        const particle = document.createElement(\"span\");\n        particle.className = \"fay-malta-cinematic__particle\";\n        particle.style.left = (startX + (Math.random() - .5) * 110) + \"px\";\n        particle.style.top = (startY + (Math.random() - .5) * 90) + \"px\";\n        particle.style.animationDelay = (Math.random() * .6) + \"s\";\n        particleLayer.appendChild(particle);\n      }\n\n      \/\/ Titel komt op nadat de reis visueel begonnen is.\n      window.setTimeout(() => {\n        overlay.classList.add(\"is-title-visible\");\n      }, 1250);\n\n      \/\/ Route en deeltjes verdwijnen terwijl de titel blijft staan.\n      window.setTimeout(() => {\n        overlay.classList.add(\"is-route-fading\");\n      }, 2250);\n\n      \/\/ Bewaar de handoff-status voor de volgende pagina in hetzelfde tabblad.\n      window.setTimeout(() => {\n        overlay.classList.add(\"is-final-black\");\n\n        try {\n          sessionStorage.setItem(\"fayMaltaHandoff\", \"1\");\n        } catch (e) {}\n      }, 2900);\n\n      \/\/ Totale overgang op de vertrekpagina: circa 4 seconden.\n      window.setTimeout(() => {\n        window.location.href = DESTINATION;\n      }, 4000);\n    });\n  };\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", init, { once: true });\n  } else {\n    init();\n  }\n})();\n<\/script>\n\n<\/div><\/div>\n<\/section><\/main>","protected":false},"excerpt":{"rendered":"<p>Home Portfolio Over Mij Contact Fayvan de steeg visual storyteller FAY VAN DER STEEG &nbsp; \/ &nbsp; OVER MIJ De werelddoor mijn ogen. Een kijkje in wie ik ben en wat mij inspireert. 01 ACHTER DE CAMERA Verhalen zien 02 MIJN CREATIEVE WERELD Gevoel in beeld 03 WIE IK BEN Altijd nieuwsgierig [ PERSPECTIEF ] [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":147,"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":1054,"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/pages\/112\/revisions\/1054"}],"wp:attachment":[{"href":"https:\/\/fscreates.nl\/en\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}