/* Our team: 6 mensen, 2 per pagina (1 pagina = 1 scherm, 3 pagina's). Bron: mockups/team.html.
   Boven: foto links, tekst rechts. Onder: gespiegeld. Elke pagina klikt vast (scroll-snap).
   Een vaste laag (HUD) toont de titel en de teller 01 / 03. */

html { scroll-snap-type: y mandatory; }
.end { scroll-snap-align: start; }   /* eindscherm (CTA + footer) is het laatste blok */

.tm {
  --t-bg: #181818; --t-mute: #8A8A86; --t-ph: #222222;
  /* Blok van ±70 % breed, gecentreerd: zelfde randen als de projectfoto's op de homepagina
     (.work__in: max-width 70vw + binnenmarge --s). Titel, teller, kruisjes, foto's en tekst lijnen hierop uit,
     want ze gebruiken allemaal --margin. Het menu staat buiten .tm en houdt de gewone marge. */
  --s: clamp(16px, 1.6vw, 28px);
  --margin: calc(15vw + var(--s));
  --g: var(--s);                            /* tussenruimte, zelfde als bij de projecten */
  --top: 200px; --bot: 88px;                /* ruimte voor menu + titel, en voor de teller */
  --row: max(220px, calc((100vh - var(--top) - var(--bot) - var(--g)) / 2));
  position: relative; overflow: clip; background: var(--t-bg); color: var(--white); font-size: 15px; line-height: 1.5;
}
.tm .mute { color: var(--t-mute); }

/* Parallax-achtergrond: stippenraster (1 px, om de 48 px, op de kolomlijnen) dat met 40 % van de scroll meeschuift (js/team.js).
   140 % hoog, zodat er onderaan nooit een gat valt. */
.tm__dots {
  position: absolute; left: 0; right: 0; top: 0; height: 140%; z-index: 0; pointer-events: none; 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(clamp(24px, 5vw, 96px) - 24px) -24px;   /* site-raster, zoals op home */
}

/* HUD: blijft in beeld zolang je in de teamsectie bent en schuift mee weg met de laatste pagina */
.tm__hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tm__hudin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.tm__head { position: absolute; left: var(--margin); right: var(--margin); top: 112px; display: flex; justify-content: space-between; align-items: baseline; }
.tm__head h1 { margin: 0; font-size: 32px; line-height: 1; font-weight: 400; }
.tm__foot { position: absolute; left: var(--margin); right: var(--margin); bottom: 32px; display: flex; align-items: center; gap: 24px; }
.tm__bar { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: calc((100% - 5 * var(--g)) / 3 + var(--g)); }
.tm__bar i { height: 1px; background: #444; position: relative; overflow: hidden; }
/* Vulling per stuk (0–1) zet js/team.js volgens de scrollpositie, dus ze loopt mee met de blokscroll */
.tm__bar i::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleX(var(--f, 0)); transform-origin: left; }
.tm__count { margin-left: auto; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; white-space: pre; }
/* Teller: kolom 01 / 02 / 03 achter een venster van één regel. js/team.js zet --p (0 = pagina 1, 1 = pagina 2, …)
   volgens de scrollpositie, dus het cijfer rolt exact mee met de blokscroll.
   Het paginanummer is groot (Rawest), "/ 03" blijft mono. */
.tm__count { --nh: 56px; }
.tm__num { display: inline-block; height: var(--nh); overflow: hidden; margin-right: 8px; font-family: var(--font-sans); font-size: var(--nh); font-weight: 400; color: var(--white); }
.tm__roll { display: grid; translate: 0 calc(var(--p, 0) * -1 * var(--nh)); }
.tm__roll i { font-style: normal; height: var(--nh); line-height: var(--nh); }
@media (max-width: 900px) { .tm__count { --nh: 40px; } }

/* Een pagina = een scherm met 2 rijen op het 6-kolommenraster */
.tm__page {
  position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 600px;
  padding: var(--top) var(--margin) var(--bot);
  display: grid; grid-template-rows: var(--row) var(--row); row-gap: var(--g); align-content: start;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.tm__row { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--g); min-height: 0; --d: 0ms; }
/* Staande portretten (4:5): even hoog als de rij, breedte volgt uit de verhouding.
   Boven: foto tegen de linkermarge; onder: tegen de rechtermarge. De tekst staat in beide rijen in kolom 3–4,
   dus exact gespiegeld rond het midden en altijd op de kolomlijnen. */
.tm__row .tm__ph { grid-column: 1 / 3; grid-row: 1; justify-self: start; height: 100%; aspect-ratio: 4 / 5; }
.tm__row .tm__tx { grid-column: 3 / 5; grid-row: 1; }
.tm__row--flip { --d: 300ms; }   /* de onderste persoon start 300 ms later */
.tm__row--flip .tm__ph { grid-column: 5 / 7; justify-self: end; }

/* Kruisjes op de kolomlijnen, tussen de 2 rijen (stijl uit style.css); de wrapper telt niet mee in het raster */
.tm__xs { display: contents; }
.tm__page .x { top: calc(var(--top) + var(--row) + var(--g) / 2); top: round(nearest, calc(var(--top) + var(--row) + var(--g) / 2), 1px); opacity: .5; }

/* Foto met hoekhaken van een zoeker. PLACEHOLDER: initialen tot de portretten er zijn (<img> in .tm__ph). */
.tm__ph { position: relative; overflow: hidden; background: var(--t-ph); }
/* Portret vult het 4:5-kader exact (framing intact, niets weggesneden); geen parallax binnen het kader */
.tm__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm__ini { position: absolute; left: 0; right: 0; top: -10%; bottom: -10%; translate: 0 var(--py, 0px); display: grid; place-items: center; font-size: clamp(64px, 7vw, 140px); font-weight: 600; line-height: 1; color: #2E2E2E; }
.tm__lab { position: absolute; left: 40px; bottom: 14px; color: var(--t-mute); }
.tm__ph .c { position: absolute; z-index: 1; width: 16px; height: 16px; border: 0 solid var(--white); transition: transform 400ms cubic-bezier(.65, 0, .35, 1); }
.tm__ph .c:nth-of-type(1) { left: 12px; top: 12px; border-width: 1px 0 0 1px; }
.tm__ph .c:nth-of-type(2) { right: 12px; top: 12px; border-width: 1px 1px 0 0; }
.tm__ph .c:nth-of-type(3) { left: 12px; bottom: 12px; border-width: 0 0 1px 1px; }
.tm__ph .c:nth-of-type(4) { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
.tm__ph:hover .c:nth-of-type(1) { transform: translate(8px, 8px); }
.tm__ph:hover .c:nth-of-type(2) { transform: translate(-8px, 8px); }
.tm__ph:hover .c:nth-of-type(3) { transform: translate(8px, -8px); }
.tm__ph:hover .c:nth-of-type(4) { transform: translate(-8px, -8px); }

/* Tekst: naam bovenaan en contact onderaan, gelijk met de foto */
.tm__tx { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 12px; min-height: 0; }
.tm__tx h2 { margin: 0; font-size: clamp(24px, 1.9vw, 40px); line-height: 1; font-weight: 600; }
.tm__tx .role { color: var(--t-mute); }
.tm__tx .bio { max-width: 38ch; margin-top: 12px; }
.tm__tx .ct { display: grid; gap: 2px; font-size: 13px; }
.tm__tx .ct a { justify-self: start; transition: color 200ms; }
.tm__tx .ct a:hover { color: var(--yellow); }

/* Binnenkomen van een pagina (js/team.js zet .in op de rij): foto opent van boven (400 ms) en wordt scherp (focus pull),
   tekst 24 px omhoog met 100 ms tussen de regels */
.js .tm__ph { clip-path: inset(0 0 100% 0); }
.js .tm__ph > :not(.c) { filter: blur(16px); transform: scale(1.06); }
.js .tm__tx > * { opacity: 0; transform: translateY(24px); }
.tm__row.in .tm__ph { clip-path: inset(0 0 0 0); transition: clip-path 400ms var(--ease-out) var(--d); }
.tm__row.in .tm__ph > :not(.c) { filter: blur(0); transform: none; transition: filter 900ms var(--ease-out) calc(var(--d) + 200ms), transform 1200ms var(--ease-out) var(--d); }
.tm__row.in .tm__tx > * { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(var(--d) + 200ms + var(--i) * 100ms); }

/* Mobiel: alles onder elkaar, foto 3:2 boven de tekst, geen vastklikken */
@media (max-width: 900px) {
  .tm { --margin: clamp(24px, 5vw, 96px); }
  html { scroll-snap-type: none; }
  .tm { padding-top: 120px; }
  .tm__hud { position: static; padding: 0 var(--margin); }
  .tm__hudin { position: static; height: auto; }
  .tm__head { position: static; }
  .tm__foot { display: none; }
  .tm__page { height: auto; min-height: 0; padding: 48px var(--margin); grid-template-rows: none; row-gap: 64px; }
  .tm__page .x { display: none; }
  .tm__row, .tm__row--flip { grid-template-columns: 1fr; row-gap: 20px; --d: 0ms; }
  .tm__row .tm__ph, .tm__row--flip .tm__ph, .tm__row .tm__tx, .tm__row--flip .tm__tx { grid-column: 1; grid-row: auto; }
  .tm__ph, .tm__row .tm__ph { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .tm__tx .bio { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: y proximity; }
  .tm *, .tm *::before, .tm *::after { transition: none !important; }
}