:root {
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.22);
  --shadow: rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #000;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  background: #000;
  overflow-x: hidden;
}

/* Belangrijk: aparte vaste achtergrondlaag.
   Niet de canvas zelf laten meescrollen met de pagina. */
.fixed-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 42% 42%, rgba(25, 61, 215, 0.22), transparent 32%),
    radial-gradient(ellipse at 61% 48%, rgba(0, 22, 120, 0.20), transparent 44%),
    linear-gradient(90deg, #000 0%, #020415 43%, #000 100%);
  transform: translateZ(0);
}

.fixed-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.20), rgba(0,0,0,.88));
  pointer-events: none;
}

#swirl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.site-shell {
  position: relative;
  z-index: 1;
}

.hero {
  min-height: 100svh;
  padding: clamp(28px, 6vw, 90px);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 520px);
  align-items: center;
  gap: clamp(28px, 7vw, 120px);
}

.brand {
  text-shadow: 0 14px 40px var(--shadow);
}

.brand h1 {
  font-size: clamp(72px, 13vw, 180px);
  line-height: .82;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.brand h2 {
  font-size: clamp(38px, 6vw, 88px);
  line-height: .9;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.brand-line {
  height: clamp(3px, .45vw, 7px);
  width: min(100%, 620px);
  background: #fff;
  margin: clamp(12px, 2vw, 26px) 0 clamp(10px, 1.6vw, 20px);
  box-shadow: 0 8px 30px rgba(255,255,255,.25);
}

.intro-panel,
.photo-card,
.text-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
}

.intro-panel {
  padding: clamp(28px, 4vw, 52px);
  text-align: center;
  border-radius: 3px;
}

.intro-panel p {
  margin: 0 0 18px;
  font-size: clamp(18px, 2.2vw, 28px);
}

.intro-panel .en {
  opacity: .85;
  font-size: clamp(16px, 1.8vw, 23px);
}

.nav {
  margin-top: 38px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Menu verschijnt bovenaan tijdens scrollen */
.nav.is-sticky {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -120%);
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}

.nav.is-sticky.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav a,
.text-card a,
.email-placeholder a {
  color: #fff;
}

.nav a {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.32);
  text-decoration: none;
  background: rgba(255,255,255,.06);
}

.nav a:hover {
  background: rgba(255,255,255,.16);
}

.section {
  padding: clamp(70px, 9vw, 130px) clamp(28px, 7vw, 120px);
}

.section h2 {
  font-size: clamp(38px, 6vw, 82px);
  font-weight: 400;
  margin: 0 0 30px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.photo-card {
  margin: 0;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
    radial-gradient(circle at center, rgba(60,100,255,.22), transparent 55%);
}

.photo-card img:not([src]) {
  min-height: 220px;
}

.photo-card figcaption {
  padding: 18px 20px;
  font-size: 22px;
}

.text-card {
  padding: clamp(24px, 3vw, 42px);
}

.text-card p {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
}

@media (max-width: 850px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .nav.is-sticky {
    width: calc(100vw - 28px);
    max-width: 520px;
  }
}


/* Premium polish */
body {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Subtiele filmgrain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.032;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 17% 23%,
      rgba(255,255,255,.16) 0,
      rgba(255,255,255,.04) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 5px);
}

/* Extra zachte vignette boven content */
.site-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at center,
      transparent 38%,
      rgba(0,0,0,.28) 72%,
      rgba(0,0,0,.62) 100%);
}

/* Intro animatie */
.is-loading .brand,
.is-loading .intro-panel {
  opacity: 0;
  transform: translateY(24px);
}

.brand,
.intro-panel {
  transition: opacity 1.25s ease, transform 1.25s ease;
}

/* Secties fade-in */
.section {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1s ease, transform 1s ease;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Portfolio hover/parallax gevoel */
.photo-card {
  position: relative;
  isolation: isolate;
  transition: transform .7s ease, border-color .7s ease, background .7s ease;
}

.photo-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.14);
}

.photo-card img {
  transition: transform 1.4s ease, filter 1.4s ease;
  will-change: transform;
}

.photo-card:hover img {
  transform: scale(1.055);
  filter: contrast(1.05) saturate(1.04);
}

/* Zachte glans over foto's */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.18) 42%,
      transparent 62%);
  transform: translateX(-55%);
  transition: opacity .8s ease, transform 1.2s ease;
}

.photo-card:hover::after {
  opacity: .5;
  transform: translateX(55%);
}

.photo-card figcaption {
  position: relative;
  z-index: 2;
}

/* Ambient knop */
.ambient-toggle {
  margin-top: 22px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .35s ease, opacity .35s ease;
}

.ambient-toggle:hover {
  background: rgba(255,255,255,.14);
}

.ambient-toggle.is-on {
  background: rgba(60,100,255,.18);
}

/* Scroll-afhankelijk donkerder maken */
.fixed-bg {
  transition: filter .45s ease;
}

body.has-scrolled .fixed-bg {
  filter: brightness(.76) blur(1.5px);
}

body.has-scrolled .text-card,
body.has-scrolled .photo-card,
body.has-scrolled .intro-panel {
  background: rgba(255,255,255,.12);
}

/* Toegankelijkheid */
@media (prefers-reduced-motion: reduce) {
  .section,
  .brand,
  .intro-panel,
  .photo-card,
  .photo-card img,
  .nav.is-sticky {
    transition: none !important;
  }
}


/* Uitklapbare portfolio categorieën */
.gallery-category {
  padding: 0;
}

.gallery-trigger {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  display: block;
  position: relative;
  overflow: hidden;
}

.gallery-trigger img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.gallery-title {
  display: block;
  padding: 18px 20px;
  font-size: 24px;
}

.gallery-title::after {
  content: " +";
  opacity: .72;
}

.gallery-category.is-open .gallery-title::after {
  content: " −";
}

.gallery-panel {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0 18px 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  animation: galleryReveal .55s ease both;
}

.gallery-panel[hidden] {
  display: none;
}

.gallery-panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
    radial-gradient(circle at center, rgba(60,100,255,.22), transparent 55%);
}

.gallery-panel img:not([src]),
.gallery-trigger img:not([src]) {
  min-height: 190px;
}

@keyframes galleryReveal {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portfolio-categories {
  align-items: start;
}

@media (max-width: 850px) {
  .ambient-toggle.ambient-floating {
    top: 12px;
    right: 12px;
  }

  .gallery-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* FIX: uitklapfoto's niet meer als smalle kolommen binnen de categoriekaart */
.portfolio-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.gallery-category {
  overflow: visible;
}

.gallery-category.is-open {
  grid-column: 1 / -1;
}

.gallery-category.is-open .gallery-trigger {
  max-width: calc((100% - 44px) / 3);
}

.gallery-panel {
  width: 100%;
  padding: 22px 0 0;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.gallery-panel img {
  min-height: 220px;
}

@media (max-width: 850px) {
  .portfolio-categories {
    grid-template-columns: 1fr;
  }

  .gallery-category.is-open .gallery-trigger {
    max-width: 100%;
  }

  .gallery-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .gallery-panel {
    grid-template-columns: 1fr;
  }
}


/* Ultra premium motion pack */

/* Scroll snap, subtiel genoeg om niet irritant te worden */
html {
  scroll-snap-type: y proximity;
}

.snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Ultra premium intro */
.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}

body:not(.intro-active) .intro-loader {
  opacity: 0;
  visibility: hidden;
}

.intro-logo {
  color: #fff;
  text-align: center;
  transform: translateY(0);
  animation: introLogoFloat 2.4s ease both;
}

.intro-logo span {
  display: block;
  font-size: clamp(68px, 13vw, 160px);
  line-height: .82;
  letter-spacing: -.06em;
}

.intro-logo small {
  display: block;
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.04em;
}

.intro-logo i {
  display: block;
  height: 4px;
  width: 0;
  margin: 18px auto 14px;
  background: #fff;
  animation: introLine 1.6s .35s ease forwards;
}

@keyframes introLine {
  to { width: min(560px, 72vw); }
}

@keyframes introLogoFloat {
  from { opacity: 0; filter: blur(16px); transform: translateY(20px); }
  38% { opacity: 1; filter: blur(0); transform: translateY(0); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Floating particles canvas */
#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .55;
  mix-blend-mode: screen;
}

/* Progressive image loading */
.progressive-img {
  opacity: 0;
  filter: blur(18px) saturate(.9);
  transform: scale(1.015);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease;
}

.progressive-img.is-loaded,
.progressive-img.missing {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
}

.progressive-img:not([src]) {
  opacity: 1;
  filter: none;
}

/* Featured work hero blocks */
.featured-work {
  position: relative;
  min-height: 88svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(44px, 8vw, 120px);
  isolation: isolate;
}

.featured-work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.28), rgba(0,0,0,.74)),
    linear-gradient(0deg, rgba(0,0,0,.88), transparent 48%);
}

.featured-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 26s ease-in-out infinite alternate;
  transform-origin: center;
  z-index: 0;
  background:
    radial-gradient(circle at 45% 40%, rgba(65,110,255,.30), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
}

.featured-img:not([src]) {
  min-height: 88svh;
}

.featured-caption {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.featured-caption p {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  opacity: .72;
  margin: 0 0 12px;
}

.featured-caption h2 {
  font-size: clamp(54px, 10vw, 140px);
  line-height: .84;
  font-weight: 400;
  margin: 0 0 18px;
  letter-spacing: -.055em;
}

.featured-caption span {
  font-size: clamp(18px, 2.1vw, 28px);
  opacity: .86;
}

@keyframes kenBurns {
  from { transform: scale(1.04) translate3d(-1.2%, .8%, 0); }
  to { transform: scale(1.16) translate3d(1.4%, -1%, 0); }
}

/* Scroll driven storytelling */
.fixed-bg {
  --story-brightness: 1;
  --story-blur: 0px;
  --story-hue: 0deg;
  filter:
    brightness(var(--story-brightness))
    blur(var(--story-blur))
    hue-rotate(var(--story-hue));
}

@media (max-width: 850px) {
  html {
    scroll-snap-type: y proximity;
  }

  .featured-work {
    min-height: 78svh;
  }

  .gyro-toggle {
    top: 58px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
  }

  .featured-img {
    animation: none;
  }

  .intro-logo,
  .intro-logo i,
  .section.visible .text-card,
  .section.visible .photo-card,
  .featured-caption {
    animation: none !important;
  }
}


/* FIX: menu anchor navigatie mag niet door scroll-snap terugschieten */
html.snap-paused {
  scroll-snap-type: none !important;
}

#portfolio,
#diensten,
#over,
#contact,
.featured-work {
  scroll-margin-top: 96px;
}

/* FIX: categorie-tegels blijven altijd 3 kolommen; uitgeklapte foto's staan los eronder */
.portfolio-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.gallery-category,
.gallery-category.is-open {
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
  overflow: hidden;
}

.gallery-category.is-open .gallery-trigger {
  max-width: none !important;
}

.gallery-expanded-host {
  margin-top: 24px;
  width: 100%;
}

.gallery-expanded-host:empty {
  display: none;
}

.gallery-expanded-host .gallery-panel {
  display: grid !important;
  width: 100%;
  padding: 0;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 16px;
}

.gallery-expanded-host .gallery-panel[hidden] {
  display: none !important;
}

.gallery-expanded-host .gallery-panel img {
  width: 100%;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-category .gallery-panel {
  display: none !important;
}

@media (max-width: 850px) {
  .portfolio-categories {
    grid-template-columns: 1fr;
  }

  .gallery-expanded-host .gallery-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .gallery-expanded-host .gallery-panel {
    grid-template-columns: 1fr;
  }
}





/* Seamless intro: logo -> bokeh erachter -> logo schuift omhoog -> pagina fade-in */
body.intro-active {
  overflow: hidden;
}

body.intro-active .site-shell {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
}

.site-shell {
  transition:
    opacity 1.35s ease,
    transform 1.35s ease,
    filter 1.35s ease;
}

body.intro-reveal .site-shell,
body:not(.intro-active) .site-shell {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* De achtergrond/bokeh is er al, maar wordt pas zichtbaar achter het intro-logo */
body.intro-active .fixed-bg {
  opacity: 0;
  filter: brightness(.95) blur(6px);
  transform: scale(1.06) translateZ(0);
}

body.intro-bokeh .fixed-bg,
body.intro-reveal .fixed-bg,
body:not(.intro-active) .fixed-bg {
  opacity: 1;
  filter:
    brightness(var(--story-brightness, 1))
    blur(var(--story-blur, 0px))
    hue-rotate(var(--story-hue, 0deg));
  transform: scale(1) translateZ(0);
}

.fixed-bg {
  transition:
    opacity 1.6s ease,
    filter 1.7s ease,
    transform 1.7s ease;
}

/* Intro overlay blijft transparanter worden zodat bokeh naadloos zichtbaar blijft */
.intro-loader {
  background: rgba(0,0,0,1);
  transition:
    background 1.3s ease,
    opacity 1.25s ease,
    visibility 1.25s ease;
  animation: none !important;
}

body.intro-bokeh .intro-loader {
  background: rgba(0,0,0,.18);
}

body.intro-reveal .intro-loader {
  background: rgba(0,0,0,0);
}

body:not(.intro-active) .intro-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0,0,0,0);
}

/* Logo animatie in fases */
.intro-logo {
  will-change: transform, opacity, filter;
  animation: none !important;
  opacity: 0;
  transform: translateY(22px) scale(.985);
  filter: blur(14px);
  transition:
    opacity 1.1s ease,
    transform 1.35s cubic-bezier(.2,.75,.18,1),
    filter 1.1s ease;
}

body.intro-logo-visible .intro-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

body.intro-reveal .intro-logo {
  /* Meteen wegfaden tijdens het omhoog schuiven zodat je geen dubbele titel ziet */
  transform: translateY(clamp(-110px, -14vh, -64px)) scale(.90);
  opacity: 0;
  filter: blur(10px);
}

body:not(.intro-active) .intro-logo {
  opacity: 0;
  transform: translateY(clamp(-160px, -20vh, -90px)) scale(.84);
  filter: blur(14px);
}

.intro-logo i {
  width: 0;
  animation: none !important;
  transition: width 1.15s ease;
}

body.intro-logo-visible .intro-logo i {
  width: min(560px, 72vw);
}

/* Hero zelf komt iets later in zodat het voelt alsof intro-logo naar de hero overgaat */
body.intro-active .hero .brand,
body.intro-active .hero .intro-panel {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
}

body.intro-reveal .hero .brand,
body.intro-reveal .hero .intro-panel,
body:not(.intro-active) .hero .brand,
body:not(.intro-active) .hero .intro-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: .18s;
}

/* Bokeh mag tijdens intro sterker centraal achter het logo staan */
body.intro-bokeh #swirl,
body.intro-reveal #swirl {
  opacity: 1;
}

#swirl {
  transition: opacity 1.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.intro-active {
    overflow: auto;
  }

  body.intro-active .site-shell,
  body.intro-active .fixed-bg,
  .intro-logo,
  .intro-loader {
    transition: none !important;
  }
}


/* Hero begint dichter bij de intro-title maat zodat overgang natuurlijker voelt */
.hero .brand,
.hero .intro-panel {
  transform-origin: center top;
}


/* Cinematic upgrade pack */

/* Dynamic color extraction variables */
:root {
  --accent-r: 31;
  --accent-g: 88;
  --accent-b: 255;
  --accent-soft: rgba(var(--accent-r), var(--accent-g), var(--accent-b), .22);
}

/* Film dust + gate weave */
body::before {
  animation: filmDust 7s steps(2, end) infinite, gateWeave 5.5s ease-in-out infinite;
}

.site-shell {
  animation: gateWeaveSubtle 7s ease-in-out infinite;
}

@keyframes filmDust {
  0% { opacity: .024; }
  37% { opacity: .040; }
  62% { opacity: .028; }
  100% { opacity: .035; }
}

@keyframes gateWeave {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(.35px, -.45px, 0); }
  68% { transform: translate3d(-.3px, .25px, 0); }
}

@keyframes gateWeaveSubtle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -.6px, 0); }
}

/* Ambient moving shadows op glass panels */
.intro-panel,
.photo-card,
.text-card {
  position: relative;
  overflow: hidden;
  box-shadow:
    calc(var(--shadow-x, 0px) * 1px)
    calc(var(--shadow-y, 28px) * 1px)
    84px rgba(0,0,0,.38),
    0 0 42px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .08);
}

.intro-panel::before,
.photo-card::before,
.text-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: .23;
  background:
    radial-gradient(circle at var(--light-x, 50%) var(--light-y, 45%),
      rgba(255,255,255,.22),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .08) 26%,
      transparent 55%);
  transform: translate3d(var(--panel-drift-x, 0px), var(--panel-drift-y, 0px), 0);
  transition: transform .2s linear;
}

.intro-panel > *,
.photo-card > *,
.text-card > * {
  position: relative;
  z-index: 1;
}

/* Multilayer parallax */
.fixed-bg::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(circle at 36% 42%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .20),
      transparent 34%),
    radial-gradient(circle at 68% 54%,
      rgba(255,255,255,.08),
      transparent 26%);
  transform:
    translate3d(calc(var(--parallax-a, 0) * 1px), calc(var(--parallax-b, 0) * 1px), 0)
    scale(1.04);
}

#particles {
  transform: translate3d(calc(var(--parallax-c, 0) * 1px), calc(var(--parallax-d, 0) * 1px), 0);
}

/* Scroll reactive Ken Burns */
.featured-img {
  transform:
    scale(calc(1.04 + var(--kenburns-progress, 0) * .10))
    translate3d(
      calc((-1.2% + var(--kenburns-progress, 0) * 2.6%)),
      calc((.8% - var(--kenburns-progress, 0) * 1.8%)),
      0
    );
  animation: none !important;
  will-change: transform;
}

/* Fullscreen cinematic lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;
  background:
    radial-gradient(circle at center, rgba(var(--accent-r), var(--accent-g), var(--accent-b), .16), transparent 38%),
    rgba(0,0,0,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-stage {
  margin: 0;
  justify-self: center;
  max-width: min(86vw, 1500px);
  max-height: 86svh;
  display: grid;
  gap: 18px;
  place-items: center;
}

.lightbox-stage img {
  max-width: 100%;
  max-height: 78svh;
  object-fit: contain;
  box-shadow:
    0 34px 120px rgba(0,0,0,.62),
    0 0 80px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .12);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .45s ease, transform .45s ease;
}

.lightbox.is-open .lightbox-stage img {
  opacity: 1;
  transform: scale(1);
}

.lightbox-stage figcaption {
  color: rgba(255,255,255,.82);
  font-size: clamp(16px, 1.8vw, 22px);
  text-align: center;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  color: white;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  font-family: inherit;
  transition: background .25s ease, transform .25s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,.16);
  transform: scale(1.04);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 30px;
  line-height: 1;
}

.lightbox-prev,
.lightbox-next {
  justify-self: center;
  width: 54px;
  height: 78px;
  border-radius: 999px;
  font-size: 52px;
  line-height: .8;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 850px) {
  .lightbox {
    grid-template-columns: 1fr;
    padding: 74px 18px 32px;
  }

  .lightbox-prev,
  .lightbox-next {
    position: fixed;
    bottom: 18px;
    width: 48px;
    height: 56px;
    font-size: 42px;
  }

  .lightbox-prev {
    left: 24px;
  }

  .lightbox-next {
    right: 24px;
  }
}


/* Meer zichtbare maar subtiele bokeh/lightbeam parallax-lagen */
.lightbeam-layer {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .42;
  will-change: transform, opacity, filter;
  transition: opacity .25s linear;
}

.lightbeam-layer-a {
  background:
    radial-gradient(ellipse at 34% 46%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .26),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .08) 28%,
      transparent 56%),
    linear-gradient(105deg,
      transparent 18%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .16) 42%,
      rgba(255,255,255,.075) 50%,
      transparent 72%);
  filter: blur(28px);
  transform:
    translate3d(calc(var(--beam-a-x, 0) * 1px), calc(var(--beam-a-y, 0) * 1px), 0)
    rotate(calc(var(--beam-a-rot, -8) * 1deg))
    scale(1.08);
}

.lightbeam-layer-b {
  opacity: .32;
  background:
    radial-gradient(ellipse at 64% 52%,
      rgba(130,165,255,.22),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .075) 34%,
      transparent 62%),
    linear-gradient(72deg,
      transparent 20%,
      rgba(255,255,255,.06) 43%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .13) 54%,
      transparent 78%);
  filter: blur(38px);
  transform:
    translate3d(calc(var(--beam-b-x, 0) * 1px), calc(var(--beam-b-y, 0) * 1px), 0)
    rotate(calc(var(--beam-b-rot, 12) * 1deg))
    scale(1.16);
}

.lightbeam-layer-c {
  opacity: .24;
  background:
    linear-gradient(96deg,
      transparent 30%,
      rgba(255,255,255,.045) 45%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .12) 52%,
      transparent 68%),
    radial-gradient(ellipse at 52% 45%,
      rgba(80,125,255,.16),
      transparent 44%);
  filter: blur(52px);
  transform:
    translate3d(calc(var(--beam-c-x, 0) * 1px), calc(var(--beam-c-y, 0) * 1px), 0)
    rotate(calc(var(--beam-c-rot, -18) * 1deg))
    scale(1.25);
}

/* Canvas bokeh zelf iets transparanter zodat de lichtstralen leesbaar worden */
#swirl {
  opacity: .86;
}

/* Bij scroll iets meer diepte, niet te druk */
body.has-scrolled .lightbeam-layer-a {
  opacity: .50;
}

body.has-scrolled .lightbeam-layer-b {
  opacity: .38;
}

body.has-scrolled .lightbeam-layer-c {
  opacity: .29;
}

@media (max-width: 850px) {
  .lightbeam-layer {
    inset: -28%;
  }

  .lightbeam-layer-a,
  .lightbeam-layer-b,
  .lightbeam-layer-c {
    filter: blur(34px);
  }
}


/* PHOTO FIX 2026-05-14 */
.progressive-img {
  opacity: 1;
  filter: blur(10px) saturate(.95);
  transform: scale(1.008);
}

.progressive-img.is-loaded,
.progressive-img.missing {
  opacity: 1 !important;
  filter: blur(0) saturate(1) !important;
  transform: scale(1) !important;
}

.progressive-img:not([src]) {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.photo-card img[src],
.gallery-panel img[src],
.featured-img[src],
.lightbox-stage img[src] {
  opacity: 1;
  display: block;
}

img.missing {
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
    radial-gradient(circle at center, rgba(60,100,255,.22), transparent 55%);
}


/* EFFECTS RESTORED 2026-05-14 */
:root {
  --accent-r: 31;
  --accent-g: 88;
  --accent-b: 255;
  --accent-soft: rgba(var(--accent-r), var(--accent-g), var(--accent-b), .22);
  --beam-a-x: 0;
  --beam-a-y: 0;
  --beam-b-x: 0;
  --beam-b-y: 0;
  --beam-c-x: 0;
  --beam-c-y: 0;
  --kenburns-progress: 0;
}

/* Foto's blijven zichtbaar */
.progressive-img,
.progressive-img.is-loaded,
.photo-card img[src],
.gallery-panel img[src],
.featured-img[src] {
  opacity: 1 !important;
}

/* Floating particles */
#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .58;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--parallax-c, 0) * 1px), calc(var(--parallax-d, 0) * 1px), 0);
}

/* Subtiele lichtstraal/bokeh parallax */
.lightbeam-layer {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .42;
  will-change: transform, opacity, filter;
}

.lightbeam-layer-a {
  background:
    radial-gradient(ellipse at 34% 46%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .26),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .08) 28%,
      transparent 56%),
    linear-gradient(105deg,
      transparent 18%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .16) 42%,
      rgba(255,255,255,.075) 50%,
      transparent 72%);
  filter: blur(28px);
  transform:
    translate3d(calc(var(--beam-a-x) * 1px), calc(var(--beam-a-y) * 1px), 0)
    rotate(calc(var(--beam-a-rot, -8) * 1deg))
    scale(1.08);
}

.lightbeam-layer-b {
  opacity: .32;
  background:
    radial-gradient(ellipse at 64% 52%,
      rgba(130,165,255,.22),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .075) 34%,
      transparent 62%),
    linear-gradient(72deg,
      transparent 20%,
      rgba(255,255,255,.06) 43%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .13) 54%,
      transparent 78%);
  filter: blur(38px);
  transform:
    translate3d(calc(var(--beam-b-x) * 1px), calc(var(--beam-b-y) * 1px), 0)
    rotate(calc(var(--beam-b-rot, 12) * 1deg))
    scale(1.16);
}

.lightbeam-layer-c {
  opacity: .24;
  background:
    linear-gradient(96deg,
      transparent 30%,
      rgba(255,255,255,.045) 45%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .12) 52%,
      transparent 68%),
    radial-gradient(ellipse at 52% 45%,
      rgba(80,125,255,.16),
      transparent 44%);
  filter: blur(52px);
  transform:
    translate3d(calc(var(--beam-c-x) * 1px), calc(var(--beam-c-y) * 1px), 0)
    rotate(calc(var(--beam-c-rot, -18) * 1deg))
    scale(1.25);
}

/* Glass shadows/reflections */
.intro-panel,
.photo-card,
.text-card {
  box-shadow:
    calc(var(--shadow-x, 0) * 1px)
    calc(var(--shadow-y, 28) * 1px)
    84px rgba(0,0,0,.38),
    0 0 42px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .10);
}

.intro-panel::before,
.photo-card::before,
.text-card::before {
  background:
    radial-gradient(circle at var(--light-x, 50%) var(--light-y, 45%),
      rgba(255,255,255,.22),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .09) 26%,
      transparent 55%);
}

/* Scroll reactive Ken Burns */
.featured-img {
  animation: none !important;
  transform:
    scale(calc(1.04 + var(--kenburns-progress, 0) * .10))
    translate3d(
      calc((-1.2% + var(--kenburns-progress, 0) * 2.6%)),
      calc((.8% - var(--kenburns-progress, 0) * 1.8%)),
      0
    ) !important;
  will-change: transform;
}

/* Film dust / gate weave */
body::before {
  animation: filmDustRestored 7s steps(2, end) infinite, gateWeaveRestored 5.5s ease-in-out infinite;
}

@keyframes filmDustRestored {
  0% { opacity: .024; }
  37% { opacity: .040; }
  62% { opacity: .028; }
  100% { opacity: .035; }
}

@keyframes gateWeaveRestored {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(.35px, -.45px, 0); }
  68% { transform: translate3d(-.3px, .25px, 0); }
}

/* Fullscreen cinematic lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;
  background:
    radial-gradient(circle at center, rgba(var(--accent-r), var(--accent-g), var(--accent-b), .16), transparent 38%),
    rgba(0,0,0,.90);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-stage {
  margin: 0;
  justify-self: center;
  max-width: min(86vw, 1500px);
  max-height: 86svh;
  display: grid;
  gap: 18px;
  place-items: center;
}

.lightbox-stage img {
  max-width: 100%;
  max-height: 78svh;
  object-fit: contain;
  box-shadow:
    0 34px 120px rgba(0,0,0,.62),
    0 0 80px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .16);
  opacity: 1;
  transform: scale(1);
}

.lightbox-stage figcaption {
  color: rgba(255,255,255,.82);
  font-size: clamp(16px, 1.8vw, 22px);
  text-align: center;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  color: white;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  font-family: inherit;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 30px;
  line-height: 1;
}

.lightbox-prev,
.lightbox-next {
  justify-self: center;
  width: 54px;
  height: 78px;
  border-radius: 999px;
  font-size: 52px;
  line-height: .8;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 850px) {
  .lightbox {
    grid-template-columns: 1fr;
    padding: 74px 18px 32px;
  }

  .lightbox-prev,
  .lightbox-next {
    position: fixed;
    bottom: 18px;
    width: 48px;
    height: 56px;
    font-size: 42px;
  }

  .lightbox-prev { left: 24px; }
  .lightbox-next { right: 24px; }
}


/* =========================================================
   FILMISCHE KEN BURNS + GROTERE OPVALLENDERE BOKEH
   ========================================================= */

/* Meer opvallende, grotere bokeh / lichtvlekken */
#swirl {
  opacity: 1 !important;
  filter:
    saturate(1.25)
    brightness(1.18)
    blur(.4px);
}

/* Lichtstraal-lagen groter en aanweziger, maar nog zacht */
.lightbeam-layer {
  opacity: .62 !important;
  inset: -30% !important;
}

.lightbeam-layer-a {
  opacity: .72 !important;
  filter: blur(34px) saturate(1.25) brightness(1.16) !important;
  background:
    radial-gradient(ellipse at 34% 46%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .42),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .16) 30%,
      transparent 62%),
    linear-gradient(105deg,
      transparent 12%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .28) 38%,
      rgba(255,255,255,.13) 50%,
      transparent 78%) !important;
  transform:
    translate3d(calc(var(--beam-a-x, 0) * 1.25px), calc(var(--beam-a-y, 0) * 1.25px), 0)
    rotate(calc(var(--beam-a-rot, -8) * 1deg))
    scale(1.22) !important;
}

.lightbeam-layer-b {
  opacity: .52 !important;
  filter: blur(48px) saturate(1.2) brightness(1.12) !important;
  background:
    radial-gradient(ellipse at 64% 52%,
      rgba(130,165,255,.34),
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .13) 34%,
      transparent 66%),
    linear-gradient(72deg,
      transparent 14%,
      rgba(255,255,255,.10) 43%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .24) 54%,
      transparent 82%) !important;
  transform:
    translate3d(calc(var(--beam-b-x, 0) * 1.35px), calc(var(--beam-b-y, 0) * 1.35px), 0)
    rotate(calc(var(--beam-b-rot, 12) * 1deg))
    scale(1.32) !important;
}

.lightbeam-layer-c {
  opacity: .42 !important;
  filter: blur(62px) saturate(1.18) brightness(1.10) !important;
  background:
    linear-gradient(96deg,
      transparent 22%,
      rgba(255,255,255,.085) 44%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .22) 52%,
      transparent 76%),
    radial-gradient(ellipse at 52% 45%,
      rgba(80,125,255,.25),
      transparent 50%) !important;
  transform:
    translate3d(calc(var(--beam-c-x, 0) * 1.45px), calc(var(--beam-c-y, 0) * 1.45px), 0)
    rotate(calc(var(--beam-c-rot, -18) * 1deg))
    scale(1.42) !important;
}

/* Bokeh canvas zelf iets grootser laten voelen */
.fixed-bg::before {
  opacity: .46 !important;
  filter: blur(18px) saturate(1.25);
  transform:
    translate3d(calc(var(--parallax-a, 0) * 1.3px), calc(var(--parallax-b, 0) * 1.3px), 0)
    scale(1.18) !important;
}

/* Filmische featured blocks */
.featured-work {
  min-height: 92svh;
  background: #000;
  overflow: hidden;
}

.featured-work::before {
  z-index: 2;
  background:
    radial-gradient(circle at 58% 42%,
      transparent 0%,
      rgba(0,0,0,.16) 44%,
      rgba(0,0,0,.56) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.86),
      rgba(0,0,0,.28) 44%,
      rgba(0,0,0,.74)),
    linear-gradient(0deg,
      rgba(0,0,0,.92),
      transparent 52%) !important;
}

/* Pure CSS Ken Burns, zodat het altijd zichtbaar werkt */
.featured-img {
  position: absolute !important;
  inset: -3% !important;
  width: 106% !important;
  height: 106% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;

  animation:
    kenBurnsCinematic 22s cubic-bezier(.42, 0, .18, 1) infinite alternate !important;

  filter:
    saturate(1.06)
    contrast(1.06)
    brightness(.94) !important;

  opacity: 1 !important;
}

/* Voor de tweede featured foto een andere richting, minder herhaling */
#featured-two .featured-img {
  animation-name: kenBurnsCinematicAlt !important;
  animation-duration: 26s !important;
}

/* Caption iets filmischer over de featured photo */
.featured-caption {
  z-index: 3 !important;
  text-shadow:
    0 18px 55px rgba(0,0,0,.80),
    0 0 44px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .15);
}

.featured-caption h2 {
  letter-spacing: -.065em;
}

.featured-caption p {
  opacity: .82;
}

/* Lightbox mag ook profiteren van de filmische accentkleur */
.lightbox {
  background:
    radial-gradient(circle at center,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .22),
      transparent 40%),
    rgba(0,0,0,.91) !important;
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .featured-img,
  #featured-two .featured-img {
    animation: none !important;
    transform: scale(1.08) !important;
  }
}


/* =========================================================
   SMOOTH BOKEH + ZICHTBARE KEN BURNS FIX
   ========================================================= */

/* Achtergrond: geen harde transition op scroll-vars; requestAnimationFrame stuurt dit vloeiend */
.lightbeam-layer,
.fixed-bg::before,
#particles {
  transition: none !important;
  will-change: transform, opacity, filter;
}

/* Lichtstralen iets rustiger dan vorige versie, maar nog zichtbaar */
.lightbeam-layer-a {
  opacity: .58 !important;
  filter: blur(42px) saturate(1.16) brightness(1.08) !important;
}

.lightbeam-layer-b {
  opacity: .42 !important;
  filter: blur(56px) saturate(1.12) brightness(1.06) !important;
}

.lightbeam-layer-c {
  opacity: .30 !important;
  filter: blur(72px) saturate(1.10) brightness(1.04) !important;
}

#swirl {
  opacity: .92 !important;
  filter:
    saturate(1.16)
    brightness(1.08)
    blur(.8px) !important;
}

/* Featured image: maak de foto écht groter dan het frame zodat pan/zoom zichtbaar is */
.featured-work {
  overflow: hidden !important;
  position: relative !important;
  min-height: 94svh !important;
}

.featured-work .featured-img,
.featured-img.progressive-img,
img.featured-img {
  position: absolute !important;
  inset: -10% !important;
  width: 120% !important;
  height: 120% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter:
    saturate(1.08)
    contrast(1.07)
    brightness(.93) !important;
  transform-origin: center center !important;
  will-change: transform !important;
  animation: arafoKenBurnsVisible 16s ease-in-out infinite alternate !important;
  transition: none !important;
}

/* Tweede featured blok beweegt andersom */
#featured-two .featured-img {
  animation-name: arafoKenBurnsVisibleAlt !important;
  animation-duration: 19s !important;
}

/* Sterker dan eerder: zichtbaar, maar nog filmisch */
/* Ken Burns test-hint: hover versnelt kort zodat je meteen ziet dat het werkt */
.featured-work:hover .featured-img {
  animation-duration: 8s !important;
}

/* Als oudere CSS nog --kenburns-progress transform probeert te gebruiken: neutraliseer via animatie */
#featured-two @media (prefers-reduced-motion: reduce) {
  .featured-work .featured-img,
  .featured-img.progressive-img,
  img.featured-img {
    animation: none !important;
    transform: translate3d(0,0,0) scale(1.08) !important;
  }
}


/* =========================================================
   BULLETPROOF KEN BURNS FIX
   Werkt ook als transform elders overschreven wordt:
   - foto is groter dan kader
   - object-position animeert zichtbaar
   - transform animeert aanvullend
   ========================================================= */

.featured-work {
  position: relative !important;
  overflow: hidden !important;
  min-height: 94svh !important;
  isolation: isolate;
}

.featured-work .featured-img,
img.featured-img,
.featured-img.progressive-img {
  position: absolute !important;

  /* groter canvas zodat er echt pan/zoom ruimte is */
  inset: -12% !important;
  width: 124% !important;
  height: 124% !important;

  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  display: block !important;
  object-fit: cover !important;

  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.06) brightness(.94) !important;

  transform-origin: center center !important;
  will-change: transform, object-position !important;

  animation:
    arafoObjectKenBurns 14s ease-in-out infinite alternate !important;
}

/* Tweede featured image andere richting */
#featured-two .featured-img {
  animation-name: arafoObjectKenBurnsAlt !important;
  animation-duration: 16s !important;
}

/* Object-position zorgt dat je beweging ziet, zelfs als transform door browser/cache niet zichtbaar is */
/* Test: hover versnelt zodat je direct ziet of het live werkt */
.featured-work:hover .featured-img {
  animation-duration: 6s !important;
}

/* Maak overlay iets minder zwaar zodat beweging zichtbaarder is */
.featured-work::before {
  background:
    radial-gradient(circle at 58% 42%,
      transparent 0%,
      rgba(0,0,0,.10) 44%,
      rgba(0,0,0,.46) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.76),
      rgba(0,0,0,.18) 44%,
      rgba(0,0,0,.62)),
    linear-gradient(0deg,
      rgba(0,0,0,.84),
      transparent 52%) !important;
}

/* Bokeh iets vloeiender en zichtbaarder */
#swirl {
  opacity: .96 !important;
  filter: saturate(1.18) brightness(1.12) blur(.8px) !important;
}

.lightbeam-layer {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .featured-work .featured-img,
  img.featured-img,
  .featured-img.progressive-img {
    animation: none !important;
    transform: scale(1.08) !important;
    object-position: center center !important;
  }
}


/* =========================================================
   SUBTIELE HORIZONTALE KEN BURNS FIX
   Featured 1: subtiel, vooral horizontaal
   Featured 2: eigen expliciete animatie, ook zichtbaar
   ========================================================= */

/* Basis: niet extreem groot meer, anders wordt het te dramatisch */
.featured-work .featured-img,
img.featured-img,
.featured-img.progressive-img {
  inset: -5% !important;
  width: 110% !important;
  height: 110% !important;
  object-fit: cover !important;
  object-position: center center;
  animation: arafoKenBurnsHorizontalSubtle 34s ease-in-out infinite alternate !important;
  transform-origin: center center !important;
  will-change: transform, object-position !important;
}

/* Featured 1: horizontale drift links -> rechts, nauwelijks verticaal */
#featured-one .featured-img {
  animation-name: arafoKenBurnsHorizontalSubtle !important;
  animation-duration: 34s !important;
}

/* Featured 2: andere horizontale richting, iets zichtbaarder zodat hij niet stil lijkt */
#featured-two .featured-img {
  animation-name: arafoKenBurnsHorizontalSubtleAlt !important;
  animation-duration: 30s !important;
}

/* Subtieler dan vorige versie: weinig zoom, bijna alleen horizontale pan */
/* Hover test blijft, maar subtieler dan voorheen */
.featured-work:hover .featured-img {
  animation-duration: 12s !important;
}

/* Minder zware overlay zodat subtiele beweging beter waarneembaar blijft */
.featured-work::before {
  background:
    radial-gradient(circle at 58% 42%,
      transparent 0%,
      rgba(0,0,0,.08) 46%,
      rgba(0,0,0,.42) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.70),
      rgba(0,0,0,.14) 44%,
      rgba(0,0,0,.56)),
    linear-gradient(0deg,
      rgba(0,0,0,.80),
      transparent 54%) !important;
}


/* =========================================================
   FEATURED FRAME SLIDE FIX
   De foto zelf is breder dan het frame en schuift horizontaal.
   Dit werkt ook als de foto het frame al volledig vult.
   ========================================================= */

.featured-work {
  position: relative !important;
  overflow: hidden !important;
  min-height: 94svh !important;
}

/* Maak het beeld breder dan het zichtbare frame */
.featured-work .featured-img,
img.featured-img,
.featured-img.progressive-img {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;

  /* Links iets buiten beeld starten */
  left: -14% !important;

  /* Extra breed, zodat er ruimte is om horizontaal te schuiven */
  width: 128% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;
  display: block !important;

  transform-origin: center center !important;
  will-change: transform !important;

  /* Horizontale frame-slide */
  animation: featuredFrameSlideLeftToRight 26s ease-in-out infinite alternate !important;

  filter:
    saturate(1.06)
    contrast(1.05)
    brightness(.94) !important;

  transition: none !important;
}

/* Featured 1: links naar rechts */
#featured-one .featured-img {
  left: -14% !important;
  animation-name: featuredFrameSlideLeftToRight !important;
  animation-duration: 28s !important;
}

/* Featured 2: rechts naar links */
#featured-two .featured-img {
  left: -14% !important;
  animation-name: featuredFrameSlideRightToLeft !important;
  animation-duration: 28s !important;
}

/* Beweging gebeurt met translateX, niet met object-position */
/* Hover test: iets sneller zodat je direct ziet dat het werkt */
.featured-work:hover .featured-img {
  animation-duration: 10s !important;
}

/* Overlay minder zwaar zodat beweging zichtbaar blijft */
.featured-work::before {
  z-index: 2 !important;
  background:
    radial-gradient(circle at 58% 42%,
      transparent 0%,
      rgba(0,0,0,.07) 46%,
      rgba(0,0,0,.38) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.66),
      rgba(0,0,0,.12) 44%,
      rgba(0,0,0,.52)),
    linear-gradient(0deg,
      rgba(0,0,0,.78),
      transparent 54%) !important;
}

.featured-caption {
  z-index: 3 !important;
}

/* Zet eerdere object-position animaties feitelijk buitenspel */
@media (prefers-reduced-motion: reduce) {
  .featured-work .featured-img,
  img.featured-img,
  .featured-img.progressive-img {
    animation: none !important;
    transform: translate3d(-7%, 0, 0) scale(1.03) !important;
  }
}


/* =========================================================
   CANONICAL FINAL OVERRIDES - conflict cleaned 2026-05-14
   Dit blok staat bewust helemaal onderaan en is leidend.
   ========================================================= */

/* Foto's mogen nooit onzichtbaar blijven door progressive loading */
.progressive-img,
.progressive-img.is-loaded,
.progressive-img.missing,
.photo-card img[src],
.gallery-panel img[src],
.featured-img[src] {
  opacity: 1 !important;
}

/* Featured frame-slide: enige actieve Ken Burns/slide animatie */
.featured-work {
  position: relative !important;
  overflow: hidden !important;
  min-height: 94svh !important;
  isolation: isolate;
}

.featured-work .featured-img,
.featured-img.progressive-img,
img.featured-img {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -14% !important;

  width: 128% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;
  filter: saturate(1.06) contrast(1.05) brightness(.94) !important;

  transform-origin: center center !important;
  will-change: transform !important;
  transition: none !important;

  animation-name: featuredFrameSlideLeftToRightFinal !important;
  animation-duration: 28s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-play-state: running !important;
}

#featured-one .featured-img {
  animation-name: featuredFrameSlideLeftToRightFinal !important;
}

#featured-two .featured-img {
  animation-name: featuredFrameSlideRightToLeftFinal !important;
}

/* Hover-test: tijdelijk sneller */
.featured-work:hover .featured-img {
  animation-duration: 10s !important;
}

/* Featured overlay: zichtbaar maar niet te zwaar */
.featured-work::before {
  z-index: 2 !important;
  background:
    radial-gradient(circle at 58% 42%,
      transparent 0%,
      rgba(0,0,0,.07) 46%,
      rgba(0,0,0,.38) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.66),
      rgba(0,0,0,.12) 44%,
      rgba(0,0,0,.52)),
    linear-gradient(0deg,
      rgba(0,0,0,.78),
      transparent 54%) !important;
}

.featured-caption {
  z-index: 3 !important;
}

/* Bokeh/lightbeams vloeiend en zonder CSS transitions op scroll-variabelen */
.lightbeam-layer,
.fixed-bg::before,
#particles {
  transition: none !important;
  will-change: transform, opacity, filter;
}

#swirl {
  opacity: .94 !important;
  filter: saturate(1.15) brightness(1.10) blur(.8px) !important;
}

.lightbeam-layer-a {
  opacity: .54 !important;
  filter: blur(42px) saturate(1.14) brightness(1.07) !important;
}

.lightbeam-layer-b {
  opacity: .38 !important;
  filter: blur(56px) saturate(1.10) brightness(1.05) !important;
}

.lightbeam-layer-c {
  opacity: .27 !important;
  filter: blur(72px) saturate(1.08) brightness(1.03) !important;
}

/* Lightbox altijd boven alles */
.lightbox {
  z-index: 200 !important;
}

@media (prefers-reduced-motion: reduce) {
  .featured-work .featured-img,
  .featured-img.progressive-img,
  img.featured-img {
    animation: none !important;
    transform: translate3d(-7%, 0, 0) scale(1.03) !important;
  }
}


/* =========================================================
   STRONG FRAME-SLIDE KEN BURNS TEST/FIX
   De foto is 160% breed en schuift duidelijk horizontaal.
   Als dit niet zichtbaar is, wordt de CSS niet geladen of overschreven.
   ========================================================= */

.featured-work {
  position: relative !important;
  overflow: hidden !important;
  min-height: 94svh !important;
}

/* Zeer bewust overbreed: 160%.
   Hierdoor is er altijd voldoende ruimte om horizontaal te schuiven. */
.featured-work .featured-img,
.featured-img.progressive-img,
img.featured-img {
  position: absolute !important;

  top: 0 !important;
  bottom: 0 !important;
  left: -30% !important;

  width: 160% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;

  transform-origin: center center !important;
  will-change: transform !important;
  transition: none !important;

  animation-duration: 18s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-play-state: running !important;

  filter:
    saturate(1.06)
    contrast(1.05)
    brightness(.94) !important;
}

/* Featured 1: van links naar rechts door het frame */
#featured-one .featured-img {
  animation-name: featuredHardSlideOne !important;
}

/* Featured 2: van rechts naar links door het frame */
#featured-two .featured-img {
  animation-name: featuredHardSlideTwo !important;
}

/* Door width 160% en left -30% kan -30% translate heel zichtbaar bewegen */
/* Hover = snelle zichtbaarheidstest */
.featured-work:hover .featured-img {
  animation-duration: 5s !important;
}

/* Maak overlay lichter zodat je beweging beter ziet */
.featured-work::before {
  z-index: 2 !important;
  background:
    radial-gradient(circle at 58% 42%,
      transparent 0%,
      rgba(0,0,0,.04) 48%,
      rgba(0,0,0,.28) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.55),
      rgba(0,0,0,.08) 44%,
      rgba(0,0,0,.42)),
    linear-gradient(0deg,
      rgba(0,0,0,.70),
      transparent 56%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .featured-work .featured-img,
  .featured-img.progressive-img,
  img.featured-img {
    animation: none !important;
    transform: translate3d(-15%, 0, 0) scale(1.02) !important;
  }
}


/* =========================================================
   JS-DRIVEN FEATURED SLIDE
   Geen CSS keyframes meer nodig; JavaScript zet transform direct.
   ========================================================= */

.featured-work {
  position: relative !important;
  overflow: hidden !important;
  min-height: 94svh !important;
}

/* Foto blijft bewust veel breder dan het frame */
.featured-work .featured-img,
.featured-img.progressive-img,
img.featured-img {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -30% !important;

  width: 160% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;

  animation: none !important;
  transition: none !important;
  will-change: transform !important;

  filter:
    saturate(1.06)
    contrast(1.05)
    brightness(.94) !important;
}

/* Debug-lijn iets subtieler, maar nog zichtbaar */
.featured-work::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 5;
  background: rgba(80,140,255,.55);
  pointer-events: none;
}


/* =========================================================
   PREMIUM PORTFOLIO OVERVIEW GALLERY
   Een geopend onderwerp wordt een groot editorial overzicht,
   geen kleine thumbnail-strip.
   ========================================================= */

#portfolio {
  position: relative;
}

.portfolio-categories {
  align-items: stretch;
}

/* Actieve categorie subtiel highlighten */
.gallery-category {
  transition:
    opacity .55s ease,
    transform .55s ease,
    border-color .55s ease,
    background .55s ease;
}

.gallery-category.is-open {
  border-color: rgba(255,255,255,.42) !important;
  background: rgba(255,255,255,.145) !important;
}

.portfolio-categories.has-open .gallery-category:not(.is-open) {
  opacity: .56;
  transform: scale(.985);
}

/* De uitklap host wordt een eigen overzichtsblok */
.gallery-expanded-host {
  margin-top: clamp(28px, 5vw, 72px) !important;
  width: 100%;
  opacity: 1;
}

.gallery-expanded-host:empty {
  display: none;
}

.gallery-overview {
  position: relative;
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 22% 18%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .18),
      transparent 34%),
    rgba(255,255,255,.075);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 34px 120px rgba(0,0,0,.38),
    0 0 80px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .08);
  animation: portfolioOverviewIn .75s ease both;
  overflow: hidden;
}

.gallery-overview::before {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  opacity: .24;
  background:
    linear-gradient(112deg,
      transparent 26%,
      rgba(255,255,255,.10) 44%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .11) 52%,
      transparent 70%);
  filter: blur(34px);
}

.gallery-overview-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(22px, 3vw, 38px);
}

.gallery-overview-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .68;
}

.gallery-overview-title {
  margin: 0;
  font-size: clamp(46px, 8vw, 110px);
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.06em;
}

.gallery-overview-description {
  margin: 16px 0 0;
  max-width: 720px;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.5;
  opacity: .82;
}

.gallery-overview-close {
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: inherit;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.gallery-overview-close:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

/* Groot editorial grid */
.gallery-expanded-host .gallery-panel,
.gallery-overview-grid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 24px);
  width: 100%;
  padding: 0 !important;
}

.gallery-overview-grid img,
.gallery-expanded-host .gallery-panel img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  opacity: 1 !important;
  filter: saturate(1.02) contrast(1.02);
  transition:
    transform 1.2s ease,
    filter 1.2s ease,
    opacity 1.2s ease;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
    radial-gradient(circle at center, rgba(60,100,255,.22), transparent 55%);
}

.gallery-overview-grid img:hover,
.gallery-expanded-host .gallery-panel img:hover {
  transform: scale(1.025);
  filter: saturate(1.08) contrast(1.06);
}

/* Masonry/editorial compositie per 4 foto's */
.gallery-overview-grid img:nth-child(1),
.gallery-expanded-host .gallery-panel img:nth-child(1) {
  grid-column: span 7;
  aspect-ratio: 16 / 10;
}

.gallery-overview-grid img:nth-child(2),
.gallery-expanded-host .gallery-panel img:nth-child(2) {
  grid-column: span 5;
  aspect-ratio: 4 / 5;
}

.gallery-overview-grid img:nth-child(3),
.gallery-expanded-host .gallery-panel img:nth-child(3) {
  grid-column: span 5;
  aspect-ratio: 5 / 4;
}

.gallery-overview-grid img:nth-child(4),
.gallery-expanded-host .gallery-panel img:nth-child(4) {
  grid-column: span 7;
  aspect-ratio: 16 / 9;
}

/* Als je later meer dan 4 foto's toevoegt */
.gallery-overview-grid img:nth-child(n+5),
.gallery-expanded-host .gallery-panel img:nth-child(n+5) {
  grid-column: span 4;
  aspect-ratio: 4 / 3;
}

@keyframes portfolioOverviewIn {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Oude kleine gridregels neutraliseren */
.gallery-expanded-host .gallery-panel {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

/* Mobiel: mooi overzicht, geen minuscule thumbnails */
@media (max-width: 850px) {
  .gallery-overview {
    padding: 22px;
  }

  .gallery-overview-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .gallery-overview-close {
    justify-self: start;
  }

  .gallery-expanded-host .gallery-panel,
  .gallery-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .gallery-overview-grid img,
  .gallery-expanded-host .gallery-panel img,
  .gallery-overview-grid img:nth-child(n),
  .gallery-expanded-host .gallery-panel img:nth-child(n) {
    grid-column: 1 / -1 !important;
    aspect-ratio: 4 / 3;
  }

  .gallery-overview-grid img:nth-child(2),
  .gallery-expanded-host .gallery-panel img:nth-child(2) {
    aspect-ratio: 4 / 5;
  }
}


/* =========================================================
   PORTFOLIO OVERVIEW FULL WIDTH + MOBILE FIX
   - opent altijd onder de categorieën
   - gebruikt volledige sectiebreedte
   - mobile: brede enkele kolom
   ========================================================= */

#portfolio {
  width: 100%;
  overflow: visible;
}

/* Categoriekaarten blijven bovenaan als 3 tegels */
.portfolio-categories {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  align-items: stretch !important;
}

/* De overview-host staat onder de grid en pakt volledige sectiebreedte */
#gallery-expanded-host,
.gallery-expanded-host {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(32px, 5vw, 76px) 0 0 0 !important;
  padding: 0 !important;
  clear: both;
  grid-column: 1 / -1 !important;
}

.gallery-expanded-host:empty {
  display: none !important;
}

/* Het overzicht zelf is full width */
.gallery-overview {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  border-radius: 0;
}

/* Maak de overview visueel breed en editorial */
.gallery-overview-header {
  width: 100%;
  max-width: none;
}

.gallery-overview-grid,
.gallery-expanded-host .gallery-panel {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 28px) !important;
}

/* Grote desktop compositie */
.gallery-overview-grid img:nth-child(1),
.gallery-expanded-host .gallery-panel img:nth-child(1) {
  grid-column: span 8 !important;
  aspect-ratio: 16 / 9 !important;
}

.gallery-overview-grid img:nth-child(2),
.gallery-expanded-host .gallery-panel img:nth-child(2) {
  grid-column: span 4 !important;
  aspect-ratio: 4 / 5 !important;
}

.gallery-overview-grid img:nth-child(3),
.gallery-expanded-host .gallery-panel img:nth-child(3) {
  grid-column: span 5 !important;
  aspect-ratio: 5 / 4 !important;
}

.gallery-overview-grid img:nth-child(4),
.gallery-expanded-host .gallery-panel img:nth-child(4) {
  grid-column: span 7 !important;
  aspect-ratio: 16 / 9 !important;
}

.gallery-overview-grid img:nth-child(n+5),
.gallery-expanded-host .gallery-panel img:nth-child(n+5) {
  grid-column: span 4 !important;
  aspect-ratio: 4 / 3 !important;
}

/* Voorkom dat oude gallery-panel regels hem als smalle thumbnails tonen */
.gallery-category .gallery-panel {
  display: none !important;
}

.gallery-expanded-host .gallery-panel {
  display: grid !important;
}

/* Mobile/tablet */
@media (max-width: 850px) {
  .portfolio-categories {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #gallery-expanded-host,
  .gallery-expanded-host {
    margin-top: 28px !important;
    width: 100% !important;
  }

  .gallery-overview {
    padding: 22px !important;
    border-radius: 0;
  }

  .gallery-overview-header {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
  }

  .gallery-overview-title {
    font-size: clamp(42px, 14vw, 74px) !important;
  }

  .gallery-overview-description {
    font-size: 17px !important;
  }

  .gallery-overview-close {
    justify-self: start;
  }

  .gallery-overview-grid,
  .gallery-expanded-host .gallery-panel {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .gallery-overview-grid img,
  .gallery-expanded-host .gallery-panel img,
  .gallery-overview-grid img:nth-child(n),
  .gallery-expanded-host .gallery-panel img:nth-child(n) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .gallery-overview-grid img:nth-child(2),
  .gallery-expanded-host .gallery-panel img:nth-child(2) {
    aspect-ratio: 4 / 5 !important;
  }
}

/* Zeer smal mobiel */
@media (max-width: 520px) {
  #portfolio.section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gallery-overview {
    padding: 18px !important;
  }

  .gallery-overview-grid,
  .gallery-expanded-host .gallery-panel {
    gap: 14px !important;
  }
}


/* =========================================================
   FINAL CLEAN OVERRIDES - 2026-05-14
   Leidende regels onderaan om conflicten te voorkomen.
   ========================================================= */

/* Foto's mogen nooit onzichtbaar blijven door progressive loading */
.progressive-img,
.progressive-img.is-loaded,
.progressive-img.missing,
.photo-card img[src],
.gallery-panel img[src],
.featured-img[src] {
  opacity: 1 !important;
}

/* Featured images: JS-driven horizontale living photograph beweging.
   CSS-keyframes staan uit om conflicten te vermijden. */
.featured-work {
  position: relative !important;
  overflow: hidden !important;
  min-height: 94svh !important;
  isolation: isolate;
}

.featured-work .featured-img,
.featured-img.progressive-img,
img.featured-img {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -30% !important;

  width: 160% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;

  animation: none !important;
  transition: none !important;
  will-change: transform !important;

  filter: saturate(1.06) contrast(1.05) brightness(.94) !important;
}

/* Geen debug-lijn meer */
.featured-work::after {
  display: none !important;
}

/* Featured overlay */
.featured-work::before {
  z-index: 2 !important;
  background:
    radial-gradient(circle at 58% 42%,
      transparent 0%,
      rgba(0,0,0,.05) 48%,
      rgba(0,0,0,.32) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.58),
      rgba(0,0,0,.10) 44%,
      rgba(0,0,0,.46)),
    linear-gradient(0deg,
      rgba(0,0,0,.72),
      transparent 56%) !important;
}

.featured-caption {
  z-index: 3 !important;
}

/* Portfolio overview altijd onder categorieën en full-width */
#portfolio {
  width: 100%;
  overflow: visible;
}

.portfolio-categories {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  align-items: stretch !important;
}

#gallery-expanded-host,
.gallery-expanded-host {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(32px, 5vw, 76px) 0 0 0 !important;
  padding: 0 !important;
  clear: both;
  grid-column: 1 / -1 !important;
}

.gallery-expanded-host:empty {
  display: none !important;
}

.gallery-overview {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  border-radius: 0;
}

.gallery-expanded-host .gallery-panel,
.gallery-overview-grid {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 28px) !important;
  padding: 0 !important;
}

.gallery-category .gallery-panel {
  display: none !important;
}

.gallery-expanded-host .gallery-panel {
  display: grid !important;
}

.gallery-overview-grid img:nth-child(1),
.gallery-expanded-host .gallery-panel img:nth-child(1) {
  grid-column: span 8 !important;
  aspect-ratio: 16 / 9 !important;
}

.gallery-overview-grid img:nth-child(2),
.gallery-expanded-host .gallery-panel img:nth-child(2) {
  grid-column: span 4 !important;
  aspect-ratio: 4 / 5 !important;
}

.gallery-overview-grid img:nth-child(3),
.gallery-expanded-host .gallery-panel img:nth-child(3) {
  grid-column: span 5 !important;
  aspect-ratio: 5 / 4 !important;
}

.gallery-overview-grid img:nth-child(4),
.gallery-expanded-host .gallery-panel img:nth-child(4) {
  grid-column: span 7 !important;
  aspect-ratio: 16 / 9 !important;
}

.gallery-overview-grid img:nth-child(n+5),
.gallery-expanded-host .gallery-panel img:nth-child(n+5) {
  grid-column: span 4 !important;
  aspect-ratio: 4 / 3 !important;
}

/* Bokeh/lightbeams vloeiend */
.lightbeam-layer,
.fixed-bg::before,
#particles {
  transition: none !important;
  will-change: transform, opacity, filter;
}

#swirl {
  opacity: .94 !important;
  filter: saturate(1.15) brightness(1.10) blur(.8px) !important;
}

.lightbeam-layer-a {
  opacity: .54 !important;
  filter: blur(42px) saturate(1.14) brightness(1.07) !important;
}

.lightbeam-layer-b {
  opacity: .38 !important;
  filter: blur(56px) saturate(1.10) brightness(1.05) !important;
}

.lightbeam-layer-c {
  opacity: .27 !important;
  filter: blur(72px) saturate(1.08) brightness(1.03) !important;
}

/* Lightbox altijd boven alles */
.lightbox {
  z-index: 200 !important;
}

@media (max-width: 850px) {
  .portfolio-categories {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #gallery-expanded-host,
  .gallery-expanded-host {
    margin-top: 28px !important;
    width: 100% !important;
  }

  .gallery-overview {
    padding: 22px !important;
    border-radius: 0;
  }

  .gallery-overview-header {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
  }

  .gallery-overview-title {
    font-size: clamp(42px, 14vw, 74px) !important;
  }

  .gallery-overview-description {
    font-size: 17px !important;
  }

  .gallery-overview-close {
    justify-self: start;
  }

  .gallery-overview-grid,
  .gallery-expanded-host .gallery-panel {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .gallery-overview-grid img,
  .gallery-expanded-host .gallery-panel img,
  .gallery-overview-grid img:nth-child(n),
  .gallery-expanded-host .gallery-panel img:nth-child(n) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .gallery-overview-grid img:nth-child(2),
  .gallery-expanded-host .gallery-panel img:nth-child(2) {
    aspect-ratio: 4 / 5 !important;
  }
}

@media (max-width: 520px) {
  #portfolio.section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gallery-overview {
    padding: 18px !important;
  }

  .gallery-overview-grid,
  .gallery-expanded-host .gallery-panel {
    gap: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-work .featured-img,
  .featured-img.progressive-img,
  img.featured-img {
    transform: translate3d(-10%, 0, 0) scale(1.02) !important;
  }
}


/* =========================================================
   MENU / LINK JUMP FIX + SUBTLE ARRIVAL EFFECT
   ========================================================= */

/* Alle ankerdoelen houden rekening met sticky menu */
#home,
#portfolio,
#diensten,
#over,
#contact,
#featured-one,
#featured-two,
.snap-section,
.section,
.featured-work {
  scroll-margin-top: 96px;
}

/* Tijdelijk scroll-snap uit tijdens menu-klikken */
html.snap-paused {
  scroll-snap-type: none !important;
}

/* Actieve menu-link */
.nav a.is-active {
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(255,255,255,.52) !important;
  box-shadow:
    0 0 22px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .24),
    inset 0 0 18px rgba(255,255,255,.04));
}

/* Subtiele aankomst-pulse op sectie */
.anchor-arrived {
  animation: anchorArrivalGlow 1.25s ease both;
}

@keyframes anchorArrivalGlow {
  0% {
    filter: brightness(1.18);
  }
  45% {
    filter: brightness(1.06);
  }
  100% {
    filter: brightness(1);
  }
}

/* Kleine lichtlijn bij aankomst */
.anchor-arrived::before {
  animation: anchorSweep 1.05s ease both;
}

@keyframes anchorSweep {
  0% {
    opacity: .0;
    transform: translateX(-20px);
  }
  30% {
    opacity: .32;
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Zorg dat secties pseudo overlay kunnen gebruiken zonder layout te breken */
.section,
.featured-work,
.hero {
  position: relative;
}

/* Niet elke bestaande ::before overschrijven; alleen sections zonder zware backgrounds krijgen effect via outline */
.section.anchor-arrived {
  outline: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), .26);
  outline-offset: -1px;
}

@media (max-width: 850px) {
  #home,
  #portfolio,
  #diensten,
  #over,
  #contact,
  #featured-one,
  #featured-two,
  .snap-section,
  .section,
  .featured-work {
    scroll-margin-top: 82px;
  }
}


/* =========================================================
   SMOOTHER LONG MENU SCROLL
   Vermindert stotter bij lange sprongen zoals Contact.
   ========================================================= */

html.anchor-scrolling,
html.anchor-scrolling * {
  scroll-behavior: auto !important;
}

/* Tijdens lange menu-scroll iets minder zware filters/animaties */
html.anchor-scrolling .fixed-bg,
html.anchor-scrolling .lightbeam-layer,
html.anchor-scrolling #particles {
  transition: none !important;
}

html.anchor-scrolling .lightbeam-layer {
  opacity: .22 !important;
}

html.anchor-scrolling #swirl {
  filter: saturate(1.05) brightness(1.02) blur(1.2px) !important;
}

html.anchor-scrolling body::before {
  animation-play-state: paused !important;
}

/* Aankomst effect iets lichter */
.anchor-arrived {
  animation: anchorArrivalGlowSoft .85s ease both !important;
}

@keyframes anchorArrivalGlowSoft {
  0% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}


/* FAST NO-ZOOM VERSION
   Lightbox/zoom uit met minimale overhead. */
.lightbox {
  display: none !important;
}

.photo-card img,
.gallery-panel img,
.gallery-overview-grid img,
.gallery-expanded-host .gallery-panel img,
.featured-img {
  cursor: default !important;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Hover-zoom alleen uit voor portfolio/overview; andere effecten blijven behouden */
.gallery-overview-grid img:hover,
.gallery-expanded-host .gallery-panel img:hover,
.photo-card:hover img {
  transform: none !important;
}

/* Geen zware filters bij hover */
.gallery-overview-grid img:hover,
.gallery-expanded-host .gallery-panel img:hover {
  filter: saturate(1.02) contrast(1.02) !important;
}


/* =========================================================
   SMOOTH MOBILE PERFORMANCE MODE
   Beveiliging verwijderd + scroll performance verbeterd.
   ========================================================= */

/* Beeldbeveiliging volledig uit: normale browserinteractie weer toegestaan */
img {
  -webkit-user-drag: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
}

/* Lightbox/zoom blijft voor nu uit zoals gevraagd in vorige stap,
   maar zonder zware click intercept of beveiliging. */
.lightbox {
  display: none !important;
}

/* Minder dure effecten tijdens scrollen */
html.anchor-scrolling .fixed-bg,
html.anchor-scrolling .lightbeam-layer,
html.anchor-scrolling #particles,
html.anchor-scrolling #swirl {
  filter: none !important;
  transition: none !important;
}

/* Glass blur iets lichter voor betere mobiele performance */
.intro-panel,
.photo-card,
.text-card,
.gallery-overview {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Bokeh/lightbeams minder GPU-heavy, vooral op mobiel */
.lightbeam-layer-a {
  filter: blur(30px) saturate(1.05) brightness(1.04) !important;
  opacity: .42 !important;
}

.lightbeam-layer-b {
  filter: blur(38px) saturate(1.04) brightness(1.03) !important;
  opacity: .28 !important;
}

.lightbeam-layer-c {
  filter: blur(46px) saturate(1.02) brightness(1.02) !important;
  opacity: .18 !important;
}

#swirl {
  filter: saturate(1.08) brightness(1.06) blur(.4px) !important;
  opacity: .88 !important;
}

/* Minder repaint bij grote secties */
.section,
.featured-work,
.hero,
.gallery-overview,
.photo-card {
  contain: layout paint;
}

/* Featured beweging blijft, maar met compositor-friendly transform */
.featured-work .featured-img,
.featured-img.progressive-img,
img.featured-img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Mobiel: nog lichter, geen dure gate-weave/film dust animatie */
@media (max-width: 850px) {
  body::before {
    animation: none !important;
    opacity: .018 !important;
  }

  .site-shell {
    animation: none !important;
  }

  .lightbeam-layer-a {
    filter: blur(24px) !important;
    opacity: .34 !important;
  }

  .lightbeam-layer-b {
    filter: blur(30px) !important;
    opacity: .20 !important;
  }

  .lightbeam-layer-c {
    display: none !important;
  }

  #particles {
    opacity: .30 !important;
  }

  #swirl {
    opacity: .78 !important;
    filter: saturate(1.04) brightness(1.03) blur(.2px) !important;
  }

  .intro-panel,
  .photo-card,
  .text-card,
  .gallery-overview {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* Scroll snap kan op oudere mobieltjes stotteren */
  html {
    scroll-snap-type: none !important;
  }
}

/* Extra oude/zwakke toestellen of reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none !important;
  }

  #particles,
  .lightbeam-layer-c {
    display: none !important;
  }

  .lightbeam-layer-a,
  .lightbeam-layer-b {
    opacity: .18 !important;
    filter: blur(18px) !important;
  }
}


/* Tijdens actieve scroll nog iets minder laagjes */
html.is-scrolling.mobile-performance .lightbeam-layer-b,
html.is-scrolling.mobile-performance #particles {
  opacity: .12 !important;
}

html.is-scrolling.mobile-performance #swirl {
  opacity: .68 !important;
}


/* =========================================================
   PROGRESSIVE IMAGE SEQUENCING
   Beelden komen rustig na elkaar in beeld.
   ========================================================= */

.sequenced-img,
.photo-card img,
.gallery-overview-grid img,
.gallery-expanded-host .gallery-panel img,
.featured-img,
.profile-photo {
  opacity: 0;
  filter: blur(16px) saturate(.92);
  transform: translateY(18px) scale(1.012);
  transition:
    opacity 1.15s ease,
    filter 1.15s ease,
    transform 1.15s ease;
  transition-delay: var(--sequence-delay, 0ms);
}

.sequenced-img.is-sequenced,
.photo-card img.is-sequenced,
.gallery-overview-grid img.is-sequenced,
.gallery-expanded-host .gallery-panel img.is-sequenced,
.featured-img.is-sequenced,
.profile-photo.is-sequenced,
.progressive-img.is-loaded {
  opacity: 1 !important;
  filter: blur(0) saturate(1) !important;
  transform: translateY(0) scale(1) !important;
}

/* Featured afbeeldingen gebruiken eigen JS-transform; sequencing mag die niet permanent overschrijven */
.featured-img.is-sequenced {
  transform: none;
}

/* Mobile: sneller en lichter */
@media (max-width: 850px) {
  .sequenced-img,
  .photo-card img,
  .gallery-overview-grid img,
  .gallery-expanded-host .gallery-panel img,
  .featured-img,
  .profile-photo {
    filter: blur(8px) saturate(.96);
    transform: translateY(10px) scale(1.006);
    transition-duration: .75s;
  }
}

/* =========================================================
   UITGEBREIDE CONTACTSECTIE MET PROFIELFOTO
   ========================================================= */

.contact-section {
  position: relative;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}

.section-kicker {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .68;
}

.contact-copy h2 {
  margin: 0;
  font-size: clamp(48px, 8vw, 112px);
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.065em;
}

.contact-lead {
  max-width: 760px;
  margin: clamp(22px, 3vw, 36px) 0 0;
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.45;
  opacity: .86;
}

.contact-details {
  margin-top: clamp(28px, 4vw, 52px);
  display: grid;
  gap: 14px;
}

.contact-details p {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.16);
}

.contact-details p:last-child {
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.contact-details span {
  opacity: .55;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-details strong,
.contact-details a {
  color: #fff;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px);
}

.profile-card {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 35% 25%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), .18),
      transparent 44%),
    rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 34px 120px rgba(0,0,0,.38),
    0 0 80px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .08);
}

.profile-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
    radial-gradient(circle at center, rgba(60,100,255,.22), transparent 55%);
}

.profile-photo.missing {
  min-height: 420px;
}

.profile-card figcaption {
  padding: 22px;
  display: grid;
  gap: 8px;
}

.profile-card figcaption strong {
  font-size: 24px;
  font-weight: 400;
}

.profile-card figcaption span {
  line-height: 1.5;
  opacity: .72;
}

@media (max-width: 850px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-details p {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .profile-card {
    max-width: 520px;
  }

  .profile-photo.missing {
    min-height: 340px;
  }
}


/* =========================================================
   DYNAMIC CATEGORY AMBIENT
   Subtiele kleurverschuiving per geopende categorie.
   ========================================================= */

:root {
  --ambient-r: 80;
  --ambient-g: 120;
  --ambient-b: 255;
}

/* Grote ambient wash achter site */
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: -2;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .16) 0%,
      rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .09) 24%,
      rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .03) 48%,
      transparent 72%);

  filter: blur(90px) saturate(1.08);
  opacity: .95;

  transition:
    background 2.8s ease,
    opacity 2.4s ease,
    filter 2.8s ease;

  transform: translateZ(0);
  will-change: background, opacity, filter;
}

/* Open categorie krijgt subtiele glow */
.gallery-category.is-open {
  box-shadow:
    0 0 0 1px rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .22),
    0 0 60px rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .10) !important;
}

/* Overview krijgt ambient tint */
.gallery-overview {
  background:
    radial-gradient(circle at 22% 18%,
      rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .18),
      transparent 34%),
    rgba(255,255,255,.075) !important;

  box-shadow:
    0 34px 120px rgba(0,0,0,.38),
    0 0 80px rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .10) !important;

  transition:
    background 1.8s ease,
    box-shadow 1.8s ease;
}

/* Bokeh reageert subtiel mee */
.lightbeam-layer-a {
  background:
    radial-gradient(circle at center,
      rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .18),
      transparent 68%) !important;
}

.lightbeam-layer-b {
  background:
    radial-gradient(circle at center,
      rgba(var(--ambient-r), var(--ambient-g), var(--ambient-b), .12),
      transparent 72%) !important;
}

/* Mobiel iets subtieler */
@media (max-width: 850px) {
  body::after {
    opacity: .62;
    filter: blur(60px) saturate(1.04);
  }
}


/* =========================================================
   ABOUT PHOTOGRAPHER BLOCK
   ========================================================= */

.about-photographer {
  margin-top: clamp(26px, 4vw, 44px);
  max-width: 760px;
  display: grid;
  gap: 18px;
}

.about-kicker {
  margin: 0;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .58;
}

.about-photographer p {
  margin: 0;
  line-height: 1.72;
  font-size: clamp(16px, 1.3vw, 19px);
  opacity: .84;
}

.about-photographer p + p {
  opacity: .74;
}

@media (max-width: 850px) {
  .about-photographer {
    gap: 16px;
  }

  .about-photographer p {
    line-height: 1.65;
    font-size: 16px;
  }
}


/* =========================================================
   SAFARI / IOS STABILITY MODE
   Minder geheugen- en GPU-druk om spontaan herladen te voorkomen.
   ========================================================= */

/* Safari/iOS houdt niet van veel grote fixed blur/filter lagen tegelijk */
@supports (-webkit-touch-callout: none) {
  html {
    scroll-snap-type: none !important;
  }

  body::before {
    animation: none !important;
    opacity: .012 !important;
  }

  .site-shell {
    animation: none !important;
  }

  .fixed-bg {
    transform: translateZ(0);
    filter: none !important;
  }

  .lightbeam-layer-a {
    opacity: .28 !important;
    filter: blur(20px) !important;
  }

  .lightbeam-layer-b {
    opacity: .14 !important;
    filter: blur(24px) !important;
  }

  .lightbeam-layer-c {
    display: none !important;
  }

  #particles {
    opacity: .18 !important;
  }

  #swirl {
    opacity: .64 !important;
    filter: none !important;
  }

  .intro-panel,
  .photo-card,
  .text-card,
  .gallery-overview,
  .profile-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.095) !important;
  }

  .gallery-overview,
  .profile-card,
  .photo-card {
    box-shadow: 0 22px 70px rgba(0,0,0,.34) !important;
  }

  .featured-work .featured-img,
  .featured-img.progressive-img,
  img.featured-img {
    will-change: auto !important;
  }
}

/* Tijdens scrollen op alle browsers effecten terugschakelen */
html.is-scrolling .lightbeam-layer-b,
html.is-scrolling .lightbeam-layer-c,
html.is-scrolling #particles {
  opacity: .08 !important;
}

html.is-scrolling #swirl {
  opacity: .56 !important;
}

/* Minder zware image sequencing op mobiel */
@media (max-width: 850px) {
  .sequenced-img,
  .photo-card img,
  .gallery-overview-grid img,
  .gallery-expanded-host .gallery-panel img,
  .featured-img,
  .profile-photo {
    filter: none !important;
    transition-duration: .45s !important;
  }
}


/* =========================================================
   PERFORMANCE OPTIMIZED - 2026-05-14
   Doorvoert optimalisaties 1, 2, 3 en 5:
   1. Blur radius omlaag
   2. Eén ambient/lightbeam laag verwijderd
   3. Geen backdrop-filter op mobiel
   5. Minder particles op mobiel
   ========================================================= */

/* 1. Full-screen blur lagen fors lichter */
body::after {
  filter: blur(40px) saturate(1.04) !important;
}

.fixed-bg::before {
  filter: blur(12px) saturate(1.08) !important;
}

.lightbeam-layer-a {
  filter: blur(22px) saturate(1.08) brightness(1.04) !important;
  opacity: .36 !important;
}

.lightbeam-layer-b {
  filter: blur(28px) saturate(1.06) brightness(1.03) !important;
  opacity: .22 !important;
}

/* 2. Derde ambient laag volledig uit, ook als oude CSS/HTML hem nog bevat */
.lightbeam-layer-c {
  display: none !important;
}

/* 3. Mobiel: backdrop-filter helemaal uit voor stabiliteit/smoothness */
@media (max-width: 850px) {
  .intro-panel,
  .photo-card,
  .text-card,
  .gallery-overview,
  .profile-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.10) !important;
  }

  /* mobiele blur nog lichter */
  body::after {
    filter: blur(28px) saturate(1.02) !important;
    opacity: .48 !important;
  }

  .fixed-bg::before {
    filter: blur(8px) !important;
  }

  .lightbeam-layer-a {
    filter: blur(16px) !important;
    opacity: .24 !important;
  }

  .lightbeam-layer-b {
    filter: blur(20px) !important;
    opacity: .12 !important;
  }

  #particles {
    opacity: .20 !important;
  }

  #swirl {
    opacity: .68 !important;
    filter: none !important;
  }
}

/* 5. Tijdens actieve scroll op mobiel particles/beam nog verder terug */
html.is-scrolling.mobile-performance #particles {
  opacity: .06 !important;
}

html.is-scrolling.mobile-performance .lightbeam-layer-b {
  opacity: .06 !important;
}

/* Reduced motion: bijna alle zware ambience uit */
@media (prefers-reduced-motion: reduce) {
  #particles,
  .lightbeam-layer-b,
  .lightbeam-layer-c {
    display: none !important;
  }

  .lightbeam-layer-a {
    opacity: .14 !important;
    filter: blur(12px) !important;
  }
}