/* ===== Video-lightbox ===== */
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(3,7,18,.92); backdrop-filter: blur(10px); }
.lightbox-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 94vw; transform: scale(.94); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.lightbox.is-open .lightbox-stage { transform: none; }
.lightbox-video { max-height: 82vh; max-width: 94vw; border-radius: var(--radius-sm); background: #000; box-shadow: 0 40px 120px -30px rgba(46,107,255,.5); }
.lightbox-caption { color: var(--ink-dim); font-size: 14px; letter-spacing: .02em; }
.lightbox-close {
  position: absolute; top: -8px; right: -8px; transform: translate(0, -100%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--stroke-strong); background: rgba(255,255,255,.08);
  color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s;
}
.lightbox-close:hover { background: var(--blue); }
@media (max-width: 600px) { .lightbox-close { top: 0; right: 0; transform: translate(-8px, 8px); background: rgba(0,0,0,.55); z-index: 2; } }

/* ===== Reviews-balk ===== */
.section-reviews { text-align: center; padding-top: 40px; padding-bottom: 40px; }
.section-reviews[hidden] { display: none; }
.reviews-stage { max-width: 780px; margin: 0 auto; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.reviews-item { margin: 0; animation: reviewIn .6s cubic-bezier(.2,.7,.2,1); }
@keyframes reviewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reviews-item blockquote { margin: 0 0 22px; font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 30px); line-height: 1.35; font-weight: 600; color: var(--ink); }
.reviews-item figcaption { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-dim); font-size: 15px; }
.reviews-item figcaption img { height: 28px; width: auto; max-width: 90px; object-fit: contain; }
.reviews-item figcaption strong { color: var(--ink); }
.reviews-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.reviews-dots[hidden] { display: none; }
.reviews-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--stroke-strong); cursor: pointer; transition: background .2s, transform .2s; }
.reviews-dots button.is-active { background: var(--blue-soft); transform: scale(1.3); }

/* ===== Klantkaarten: "Nieuw"-label + hover-preview ===== */
.client-tile-badge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  padding: 5px 11px; border-radius: 999px;
  background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 20px -4px rgba(46,107,255,.7);
}
.client-tile-thumb.is-alt { opacity: 0; transition: opacity .45s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter .4s; }
.client-tile-thumb.is-alt.is-on { opacity: 1; }
.client-tile:hover .client-tile-thumb.is-alt { transform: scale(1.46); filter: saturate(1) brightness(.95); }

/* ===== Vloeistof-achtergrond ===== */
.fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.ambient.has-fluid .fluid-canvas { opacity: 0.5; }
.ambient.has-fluid .blob { opacity: 0; transition: opacity 1.6s ease; }

/* ===== Hero-titel: "Verhalen in beweging." komt met beweging binnen ===== */
body.intro-done .hero-title { animation: none; }
body.intro-done .hero-title span { will-change: transform, filter, opacity; }
body.intro-done .hero-title span:nth-child(1) {
  animation: titleInLeft 1.4s cubic-bezier(.16,.84,.3,1) 0.45s both;
}
body.intro-done .hero-title span:nth-child(2) {
  background: linear-gradient(100deg, #2e6bff 0%, #6ea0ff 30%, #ffffff 50%, #6ea0ff 70%, #2e6bff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    titleInRight 1.4s cubic-bezier(.16,.84,.3,1) 0.7s both,
    titleShimmer 7s ease-in-out 2.4s infinite;
}
@keyframes titleInLeft {
  0%   { opacity: 0; transform: translateX(-28vw) skewX(22deg); filter: blur(18px); letter-spacing: 0.12em; }
  60%  { opacity: 1; filter: blur(2px); }
  78%  { transform: translateX(1.2vw) skewX(-5deg); }
  100% { opacity: 1; transform: none; filter: blur(0); letter-spacing: -0.02em; }
}
@keyframes titleInRight {
  0%   { opacity: 0; transform: translateX(28vw) skewX(-22deg); filter: blur(18px); letter-spacing: 0.12em; }
  60%  { opacity: 1; filter: blur(2px); }
  78%  { transform: translateX(-1.2vw) skewX(5deg); }
  100% { opacity: 1; transform: none; filter: blur(0); letter-spacing: -0.02em; }
}
@keyframes titleShimmer {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.intro-done .hero-title span:nth-child(1),
  body.intro-done .hero-title span:nth-child(2) { animation: none; }
}

/* ===== Mijn werk: begin-animatie voor de hele pagina ===== */
body.page-werk:not(.page-client) .nav {
  animation: navDrop 0.9s cubic-bezier(.2,.7,.2,1) 0.05s both;
}
body.page-werk:not(.page-client) .werk-hero .eyebrow {
  animation: werkFadeUp 0.9s cubic-bezier(.2,.7,.2,1) 0.15s both;
}
body.page-werk:not(.page-client) .werk-title span:nth-child(1) {
  animation: titleInLeft 1.3s cubic-bezier(.16,.84,.3,1) 0.3s both;
}
body.page-werk:not(.page-client) .werk-title span:nth-child(2) {
  background: linear-gradient(100deg, #2e6bff 0%, #6ea0ff 30%, #ffffff 50%, #6ea0ff 70%, #2e6bff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    titleInRight 1.3s cubic-bezier(.16,.84,.3,1) 0.55s both,
    titleShimmer 7s ease-in-out 2.2s infinite;
}
body.page-werk:not(.page-client) .werk-sub {
  animation: werkFadeUp 1s cubic-bezier(.2,.7,.2,1) 0.9s both;
}

/* Klanttegels: vliegen één voor één omhoog. Gebruikt de losse eigenschappen
   translate/scale zodat de sorteer-animatie (transform) er niet mee botst. */
body.page-werk:not(.page-client) .client-tile {
  animation: tileIn 0.9s cubic-bezier(.16,.84,.3,1) calc(1.05s + var(--i, 12) * 0.09s) backwards;
}
.client-tile:nth-child(1)  { --i: 0; }
.client-tile:nth-child(2)  { --i: 1; }
.client-tile:nth-child(3)  { --i: 2; }
.client-tile:nth-child(4)  { --i: 3; }
.client-tile:nth-child(5)  { --i: 4; }
.client-tile:nth-child(6)  { --i: 5; }
.client-tile:nth-child(7)  { --i: 6; }
.client-tile:nth-child(8)  { --i: 7; }
.client-tile:nth-child(9)  { --i: 8; }
.client-tile:nth-child(10) { --i: 9; }
.client-tile:nth-child(11) { --i: 10; }
.client-tile:nth-child(12) { --i: 11; }

@keyframes werkFadeUp {
  from { opacity: 0; translate: 0 28px; filter: blur(10px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}
@keyframes tileIn {
  from { opacity: 0; translate: 0 70px; scale: 0.92; filter: blur(14px); }
  to   { opacity: 1; translate: 0 0;    scale: 1;    filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-werk:not(.page-client) .nav,
  body.page-werk:not(.page-client) .werk-hero .eyebrow,
  body.page-werk:not(.page-client) .werk-title span,
  body.page-werk:not(.page-client) .werk-sub,
  body.page-werk:not(.page-client) .client-tile { animation: none; }
}

/* ===== Mobiele swipe-carousel (homepage-video's) ===== */
.carousel-dots { display: none; }
@media (max-width: 820px) {
  #premium .grid-three {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 14px 14vw 22px;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
  }
  #premium .grid-three::-webkit-scrollbar { display: none; }
  #premium .grid-three .card {
    flex: 0 0 72vw;
    scroll-snap-align: center;
    transform: scale(0.9);
    opacity: 0.55;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s;
  }
  #premium .grid-three .card.is-active { transform: none; opacity: 1; }
  /* Safari (iPhone) negeert aspect-ratio bij flex-items en pakt dan de hoogte van de
     video zelf (breed zolang die nog laadt). Daarom een vaste 9:16-hoogte en een video
     die de kaart altijd vult. */
  #premium .grid-three .card { height: calc(72vw * 16 / 9); align-self: flex-start; }
  #premium .grid-three .card video { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* CMG in het midden: Crystal Palace links, FloatGym rechts */
  #premium .grid-three .card:nth-child(2) { order: 1; }
  #premium .grid-three .card:nth-child(1) { order: 2; }
  #premium .grid-three .card:nth-child(3) { order: 3; }
  .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--stroke-strong); transition: background .25s, transform .25s; cursor: pointer; }
  .carousel-dots span.is-active { background: var(--blue-soft); transform: scale(1.3); }
}

/* ===== Camera-build sectie (scroll-gestuurd) ===== */
.cam-build { position: relative; height: 300vh; }
.cam-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.cam-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 68% 50%, rgba(46,107,255,.30), transparent 55%);
}
.cam-canvas { position: absolute; inset: 0; }
.cam-canvas canvas { width: 100%; height: 100%; display: block; }
.cam-copy {
  position: absolute; left: clamp(20px, 6vw, 96px); bottom: 11vh; z-index: 2;
  max-width: 440px; pointer-events: none;
}
.cam-copy .section-title { font-size: clamp(28px, 4vw, 52px); text-align: left; margin: 12px 0 14px; }
.cam-copy .eyebrow { display: inline-block; }
.cam-sub { color: var(--ink-dim); font-size: 16px; line-height: 1.55; margin: 0 0 22px; }
.cam-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.cam-steps li {
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(157,176,207,.45); transition: color .35s, transform .35s;
}
.cam-steps li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: currentColor; vertical-align: 1px; }
.cam-steps li.is-done { color: var(--ink-dim); }
.cam-steps li.is-active { color: #fff; transform: translateX(4px); }
.cam-steps li.is-active::before { background: var(--blue-soft); box-shadow: 0 0 12px var(--blue-soft); }
.cam-progress { height: 3px; border-radius: 3px; background: var(--stroke); overflow: hidden; max-width: 320px; }
.cam-progress-bar { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-soft)); transform: scaleX(0); transform-origin: left; }
@media (max-width: 820px) {
  .cam-build { height: 270vh; }
  .cam-copy { left: 20px; right: 20px; bottom: 6vh; max-width: none; }
  .cam-copy .section-title { font-size: 26px; }
  .cam-sub { font-size: 14px; margin-bottom: 14px; }
  .cam-steps { gap: 6px 12px; }
  .cam-steps li { font-size: 11px; }
}
/* Geen WebGL of "minder beweging": korte, rustige versie zonder scroll-effect */
.cam-build.is-static { height: auto; }
.cam-build.is-static .cam-stage { position: relative; height: 80vh; min-height: 520px; }

/* ===== Logo-showreel op telefoon: kleinere logo's, zodat er meer tegelijk in beeld zijn ===== */
@media (max-width: 820px) {
  .logo-row { gap: 18px; padding: 0 9px; }
  .logo-cell { height: 54px; }
  .logo-cell img { height: 26px; max-width: 96px; }
  .logo-packrats img { max-width: 104px; }
  .logo-nador img { max-width: 110px; }
  .logo-knvb img { transform: scale(1.15); }
  .logo-crystalpalace img { transform: scale(1.2); }
  .logo-lijpe img { transform: scale(1.15); }
  .logo-rebalance img { transform: scale(1.15); }
}

/* Eyebrow-labels blijven op telefoon op één regel */
@media (max-width: 820px) {
  .eyebrow {
    white-space: nowrap;
    font-size: clamp(9px, 2.7vw, 12px);
    letter-spacing: 0.14em;
    padding: 6px 12px;
    max-width: 100%;
  }
}

/* ===== "Mijn video's": filmische entree als de sectie in beeld komt ===== */
#premium.vid-anim .grid-three { perspective: 1400px; }
#premium.vid-anim .section-head > *,
#premium.vid-anim .grid-three .card { opacity: 0; }
#premium.vid-anim.is-in .section-head .eyebrow { animation: vidFade 0.9s cubic-bezier(.2,.7,.2,1) 0s both; }
#premium.vid-anim.is-in .section-head .section-title { animation: vidTitle 1.2s cubic-bezier(.16,.84,.3,1) 0.1s both; }
#premium.vid-anim.is-in .section-head .section-sub { animation: vidFade 1s cubic-bezier(.2,.7,.2,1) 0.35s both; }
/* kaarten: links uit de diepte van links, midden omhoog, rechts uit de diepte van rechts */
#premium.vid-anim.is-in .grid-three .card:nth-child(1) { animation: vidFromLeft 1.4s cubic-bezier(.16,.84,.3,1) 0.45s both; }
#premium.vid-anim.is-in .grid-three .card:nth-child(2) { animation: vidFromBelow 1.4s cubic-bezier(.16,.84,.3,1) 0.6s both; }
#premium.vid-anim.is-in .grid-three .card:nth-child(3) { animation: vidFromRight 1.4s cubic-bezier(.16,.84,.3,1) 0.75s both; }
/* lichtflits die na het landen over elke kaart glijdt */
#premium.vid-anim .grid-three .card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(170,205,255,0.45) 50%, transparent 65%);
  translate: -120% 0; opacity: 0;
}
#premium.vid-anim.is-in .grid-three .card:nth-child(1)::after { animation: vidShine 1.1s ease-out 1.55s both; }
#premium.vid-anim.is-in .grid-three .card:nth-child(2)::after { animation: vidShine 1.1s ease-out 1.7s both; }
#premium.vid-anim.is-in .grid-three .card:nth-child(3)::after { animation: vidShine 1.1s ease-out 1.85s both; }

@keyframes vidFade {
  from { opacity: 0; translate: 0 24px; filter: blur(8px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes vidTitle {
  from { opacity: 0; translate: 0 40px; filter: blur(14px); letter-spacing: 0.1em; }
  to   { opacity: 1; translate: 0 0; filter: blur(0); letter-spacing: normal; }
}
@keyframes vidFromLeft {
  0%   { opacity: 0; translate: -60% 12% ; rotate: y 38deg; scale: 0.82; filter: blur(16px) brightness(1.8); }
  60%  { opacity: 1; filter: blur(0) brightness(1.15); }
  100% { opacity: 1; translate: 0 0; rotate: y 0deg; scale: 1; filter: blur(0) brightness(1); }
}
@keyframes vidFromRight {
  0%   { opacity: 0; translate: 60% 12%; rotate: y -38deg; scale: 0.82; filter: blur(16px) brightness(1.8); }
  60%  { opacity: 1; filter: blur(0) brightness(1.15); }
  100% { opacity: 1; translate: 0 0; rotate: y 0deg; scale: 1; filter: blur(0) brightness(1); }
}
@keyframes vidFromBelow {
  0%   { opacity: 0; translate: 0 45%; rotate: x 28deg; scale: 0.8; filter: blur(16px) brightness(1.8); }
  60%  { opacity: 1; filter: blur(0) brightness(1.15); }
  100% { opacity: 1; translate: 0 0; rotate: x 0deg; scale: 1; filter: blur(0) brightness(1); }
}
@keyframes vidShine {
  0%   { opacity: 0; translate: -120% 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; translate: 120% 0; }
}
/* telefoon: alles komt omhoog, zonder zijwaartse vlucht (de carousel staat al naast elkaar) */
@media (max-width: 820px) {
  #premium.vid-anim.is-in .grid-three .card:nth-child(n) { animation: vidFromBelow 1.2s cubic-bezier(.16,.84,.3,1) both; }
  #premium.vid-anim.is-in .grid-three .card:nth-child(1) { animation-delay: 0.45s; }
  #premium.vid-anim.is-in .grid-three .card:nth-child(2) { animation-delay: 0.3s; }
  #premium.vid-anim.is-in .grid-three .card:nth-child(3) { animation-delay: 0.6s; }
}
@media (prefers-reduced-motion: reduce) {
  #premium.vid-anim .section-head > *, #premium.vid-anim .grid-three .card { opacity: 1; animation: none !important; }
  #premium.vid-anim .grid-three .card::after { display: none; }
}