/* Sectie 3: werk als hoofdstukken (uit mockups/sectie3-hoofdstukken.html).
   Links een vaste kolom met verticale voortgang en bijschrift, rechts grote beelden met blokscroll.
   Plus de site-brede kruisjescursor met colorpicker boven foto's. */

.work {
  --w-bg: #181818; --w-mute: #8A8A86; --w-ph: #222222;
  /* Beeldhoogte laat boven en onder 170 px vrij: genoeg voor het menu én de titel boven de eerste foto */
  --s: clamp(16px, 1.6vw, 28px); --gap-top: 170px; --h: min(calc(100vh - var(--gap-top) * 2), 52vw);
  --in: cubic-bezier(0.4, 0, 1, 1);
  --scroll-ease: cubic-bezier(0.37, 0, 0.63, 1);   /* ease-in-out (sinus), zelfde als de blokscroll */
  --scroll-dur: 1.3s;
  background: var(--w-bg); color: var(--white);
  font-size: 13px; line-height: 1.4;
}
.work { position: relative; }  /* de gele balk mag onderaan de hero piepen (uitnodiging om te scrollen); titel en bijschrift blijven onzichtbaar */
/* Parallax-achtergrond: stippenraster (1 px, om de 48 px, op de kolomlijnen), schuift mee met 40 % van de scroll
   (js/work.js). Zelfde als op de teampagina. De laag is 140 % hoog en de wrapper knipt af, zodat er nooit een gat
   valt en niets buiten het grijze vlak steekt. */
.work__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.work__dots {
  position: absolute; left: 0; right: 0; top: 0; height: 140%; will-change: translate;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 0.8px, transparent 1.2px);
  background-size: 48px 48px; background-position: calc(var(--margin) - 24px) -24px;
}
.work__in { position: relative; z-index: 1; max-width: 70vw; margin: 0 auto; padding: calc(var(--s) * 2 + 96px) var(--s) calc(var(--s) * 4); }
.work h2 { margin: 0; font-weight: 400; }
.work img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work .mute { color: var(--w-mute); }
.work .mono { font-size: 10px; line-height: 1.4; }

/* Titel net boven de eerste foto: als die in het midden vastklikt, staat de titel in hetzelfde beeld */
.work .work__title { font-size: 32px; line-height: 1; margin: 0 0 32px; }

.work__chapters { display: grid; grid-template-columns: 1fr 3fr; gap: var(--s); }
/* De vaste kolom (balk + bijschrift) mag bovenaan in de hero piepen, maar nooit onderaan uit de projecten
   over het gele CTA-vlak schuiven: knip enkel de onderkant af (boven 100vh speling). */
@media (min-width: 901px) { .work__chapters { clip-path: inset(-100vh -100vw 0 -100vw); } }

/* Vaste kolom, even hoog als een beeld en gecentreerd zoals de beelden vastklikken */
.work__stick { position: sticky; top: calc(50vh - var(--h) / 2); align-self: start; height: var(--h); display: grid; grid-template-columns: 1px 1fr; gap: var(--s); }
.work__bar { display: grid; gap: 6px; }
.work__bar i { width: 1px; background: #444; position: relative; overflow: hidden; }
/* Vulling per stuk (0–1) wordt door js/work.js gezet volgens de scrollpositie */
.work__bar i::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleY(var(--f, 0)); transform-origin: top; }

/* Bijschrift: losse laag naast het actieve balkstuk. Positie, fade en verschuiving zet js/work.js per scrollpositie. */
.work__capcol { position: relative; }
.work__cap { position: absolute; left: 0; right: 0; top: var(--y, 0px); display: grid; gap: 10px; will-change: transform, opacity; }
.work__cap .name { font-size: 22px; }
/* "Projecten" = de titel van de sectie (desktop). Rustpositie: boven de gele lijn, links gelijk met de lijn,
   32 px boven de eerste foto (zoals de vroegere titel). Op de hero staat het woord naast de bovenkant van de lijn;
   js/work.js zet --o (1 = hero, 0 = rust) volgens de scroll, dus het schuift mee omhoog naar zijn plaats. */
.work__hint {
  position: absolute; left: calc(-1 * (var(--s) + 1px)); top: -64px; margin: 0; font-size: 32px; line-height: 1; pointer-events: none;
  translate: calc(var(--o, 0) * (var(--s) + 1px)) calc(var(--o, 0) * 64px);
}
.work__hint span { display: inline-block; }   /* komt binnen met de hero-intro (data-reveal, js/main.js) */
/* De h2 blijft voor schermlezers en zoekmachines, maar op desktop is het woord bij de lijn de zichtbare titel */
@media (min-width: 901px) {
  .work .work__title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .work__chapters { margin-top: 64px; }   /* ruimte die de titel vroeger innam */
}
.work__cap .sub { max-width: 36ch; line-height: 1.45; }
.work .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.work .tags span { border: 1px solid #444; padding: 3px 7px; }

.work__imgs { display: grid; gap: calc(var(--s) * 2); }
.work__shot { position: relative; display: block; height: var(--h); overflow: hidden; background: var(--w-ph); scroll-snap-align: center; scroll-snap-stop: always; }
/* 20 % extra hoogte als speling voor de parallax (js/work.js verschuift het beeld met 'translate') */
.work .work__shot img { position: absolute; left: 0; top: -10%; height: 120%; }
/* Zoom van het actieve beeld: zelfde duur en curve als de blokscroll (de parallax volgt de scroll zelf) */
.work__shot img { transform: scale(1.06); transition: transform var(--scroll-dur) var(--scroll-ease), scale 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.work__shot.active img { transform: scale(1); }
/* Hover-zoom apart via "scale" (0,4 s, ease-in-out cubic), los van de scroll-zoom (1,3 s) */
.work__shot:hover img { scale: 1.02; }

.work__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: calc(var(--s) * 3); padding-top: var(--s); border-top: 1px solid #333; }
.work__foot .lead { flex: 1; height: 1px; background: radial-gradient(circle, var(--white) 0.8px, transparent 1px) 0 0 / 6px 2px repeat-x; transform: translateY(-3px); }
/* Door de parallax kan de voet over het gele CTA-vlak schuiven: daar wordt alles zwart (js/work.js zet .on-yellow) */
.work__foot.on-yellow, .work__foot.on-yellow .mute { color: var(--black); border-top-color: var(--black); }
.work__foot.on-yellow .lead { background-image: radial-gradient(circle, var(--black) 0.8px, transparent 1px); }

/* ---------- Hero: venster met een project bij om het andere kruisje ---------- */
.peek { position: absolute; left: 0; top: 0; z-index: 6; width: 200px; color: var(--white); display: grid; gap: 8px; will-change: transform;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.12s cubic-bezier(0.4, 0, 1, 1); pointer-events: none; }   /* sluiten: snel */
.peek[data-ox="right"] { clip-path: inset(0 0 0 100%); }
.peek.on { clip-path: inset(0 0 0 0); transition: clip-path 0.3s var(--ease-out); }   /* openen: zelfde onthulling als het kleurlabel */
.peek__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #222; }
.peek__img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 0.8s var(--ease-out); }
.peek.on .peek__img img { transform: scale(1); }
.peek__row { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.peek__go { color: var(--yellow); }
/* Kruisjes met een project: iets dikkere lijnen (2 px, armen blijven 6 px) */
.hero .x.live { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.hero .x.live::before { top: 6px; height: 2px; }
.hero .x.live::after { left: 6px; width: 2px; }
/* Het kruisje waarbij het venster openstaat kleurt geel */
.hero .x.lit { opacity: 1 !important; }
.hero .x.lit::before, .hero .x.lit::after { background: var(--yellow); }

/* Touch op home: geen snap (js/work.js zet hem uit, gewone scroll). Desktop: js/work.js neemt de blokscroll over.
   Andere pagina's met deze css (team) houden op touch de native snap. */
html { scroll-snap-type: y proximity; }
@media (max-width: 900px) { html:has(.work) { scroll-snap-type: none; } }

/* ---------- Cursor: overal een geel kruisje; boven foto's een colorpicker (hex) ---------- */
@media (hover: hover) and (pointer: fine) { html, html * { cursor: none !important; } }
.xh { position: fixed; left: 0; top: 0; z-index: 61; width: 15px; height: 15px; margin: -7px 0 0 -7px; pointer-events: none; opacity: 0; transition: opacity 0.2s var(--ease-out); }
.xh::before, .xh::after { content: ""; position: absolute; background: var(--yellow); transition: transform 0.3s var(--ease-out); }
.xh::before { left: 0; right: 0; top: 7px; height: 1px; }
.xh::after { top: 0; bottom: 0; left: 7px; width: 1px; }
.xh.on { opacity: 1; }
/* Boven een foto draait het kruisje 45° rond zijn eigen middelpunt (de lijnen draaien, niet het element) */
.xh.hot::before, .xh.hot::after, .xh.link::before, .xh.link::after { transform: rotate(45deg); }
.pop { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }
.pop__box { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--white); color: var(--black); white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path 0.3s var(--ease-out); }
.pop__box .mono { font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.pop__sw { width: 11px; height: 11px; }
.pop.on .pop__box { clip-path: inset(0 0 0 0); }
@media (hover: none) { .pop, .xh { display: none; } }

@media (max-width: 900px) {
  .work__in { max-width: none; }
  .work__chapters { grid-template-columns: 1fr; }
  .work__stick { position: sticky; top: var(--nav-h); z-index: 5; height: auto; padding: 12px 0; background: var(--w-bg); grid-template-columns: 1fr; }   /* kleeft net onder de vaste menubalk */
  .work__bar { display: none; }   /* mobiel: geen voortgangsbalk (stond als lijnen onder elkaar en botste met het menu) */
  .work__cap { position: static; }
  .work__hint { display: none; }
  .work__shot { height: auto; aspect-ratio: 4 / 5; }
  /* Eerste scherm van de projecten = titel + bijschrift + eerste foto: daar klikt het vast (niet op het midden van foto 1) */
  .work .work__title { scroll-snap-align: start; scroll-margin-top: calc(var(--nav-h) + 24px); }
  .work__shot:first-child { scroll-snap-align: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work *, .work *::before, .work *::after { transition: none !important; }
  html { scroll-snap-type: none; }
}