/* =========================================================
   HOME - de gekozen richting
   Beeldvullend, mix tussen de twee foto's, kinetische tekst
   die invliegt aan de kant waar Willem níet zit. Monochroom:
   de foto's leveren de kleur, de interface blijft stil.
   ========================================================= */

.home { background: #000; }

/* Ruim opgezet: meer scrollafstand betekent meer leestijd per
   fase (de mix is in de tijdlijn juist kort gehouden zodat die
   overgang snel blijft). Na de fade to black: de multiviewer,
   de opdrachtgeversbalk, het logo en de zoom door de G. LET OP:
   deze hoogte moet gelijk zijn aan de VH-constante in js/home.js. */
.home .scroll-space { height: 1100vh; }

.home .stage { background: #000; }

/* ---------- laadscherm ----------
   Basisvorm staat in base.css. Hier alleen de plaatsing: de teller
   is een statusregel onderlangs, in dezelfde marge als de rest van
   de vaste interface. Midden op het scherm liep hij dwars door het
   grote watermerk heen en werd hij slecht leesbaar (01-08). */

.home .loader-box {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(var(--pad) * 0.85);
  width: auto;
}

.home .loader-row { margin-bottom: 0.55rem; }

/* ---------- de foto's ---------- */

.home .frames { position: absolute; inset: 0; }

.home .frame {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.home .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Willem zit links op beeld 1, rechts op beeld 2 */
.home .f1 img { object-position: 50% 60%; }

/* Beeld 2 werkt precies als beeld 1: beeldvullend, cover. Het
   bestand is de wijde Higgsfield-versie in de uitsnede die
   Willem als voorbeeld gaf: klok eraf, hij groter rechts, haar
   met een beetje ruimte en de handen op het paneel in beeld.
   Iets naar onder en naar hem toe verankerd, zodat op afwijkende
   vensters eerst wand sneuvelt en nooit zijn haar of handen. */
.home .f2 { opacity: 0; }

.home .f2 img { object-position: 60% 75%; }

/* ---------- leesbaarheid: scrims per fase ----------
   Beeld 1 krijgt donker aan de rechterkant (daar staat de
   tekst), beeld 2 aan de linkerkant. Ze wisselen mee met
   de mix. */

.home .scrim {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* iets donkerder aan de tekstkant dan eerst (31-07, Willems
   vraag: betere leesbaarheid, maar de foto moet zichtbaar blijven) */
.home .scrim-a {
  background:
    linear-gradient(265deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.52) 34%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(130% 100% at 48% 42%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.62) 100%);
}

.home .scrim-b {
  opacity: 0;
  background:
    linear-gradient(95deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.52) 34%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(130% 100% at 52% 42%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.62) 100%);
}

/* ---------- tekst ---------- */

.home .copy {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* breedte in vw, net als de kopgrootte: dan breken de regels
   op elk scherm op dezelfde plek */
.home .phase {
  position: absolute;
  top: 50%;
  transform: translateY(-56%);
  width: 36vw;
  opacity: 1;
}

/* fase 1: rechts verankerd, van rechts uitgelijnd */
.home .phase-a {
  right: var(--pad);
  text-align: right;
}

/* fase 2: links verankerd. Breder en met een kleinere kop dan
   fase 1: "Live Sport, Muziek & Entertainment" is veel langer
   dan "Willem Jongsma" en zijn regelval moet blijven staan */
.home .phase-b {
  left: var(--pad);
  width: 44vw;
  text-align: left;
  visibility: hidden;
}


/* Het labeltje boven de kop is een <p>, en kreeg daardoor de maat van
   de lopende tekst mee (base.css `.phase p` op --lead, of de mobiele
   override). Op een telefoon werd het daardoor 15px in plaats van een
   microlabel, en brak "Freelance Multicam & Technical Director" in
   stukken: bij fase 1 anders dan bij fase 2, omdat dat blok smaller
   is. Vandaar een eigen maat, en twee spans die elk heel blijven, zodat
   de regelval overal dezelfde is (01-08, door Willem gezien).
   Geen flex meer: het rode streepje ervoor staat op deze site uit, en
   als blok kunnen de twee spans gewoon netjes omlopen. */
.home .eyebrow {
  display: block;
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  /* base.css zet hier nowrap; dat moet hier los, anders kan de regel
     niet tussen de twee helften breken en steekt hij uit het tekstblok.
     En base.css geeft elke <p> in een fase max-width 46ch: gerekend in
     de mono-maat is dat 377px, net te smal voor het hele label, dus
     brak hij op een breed scherm onnodig in tweeen. */
  white-space: normal;
  max-width: none;
  /* iets witter dan --ink-soft, zelfde reden als de subtitel */
  color: rgba(242, 241, 238, 0.72);
  margin: 0 0 1.3rem;
}

.home .eyebrow span { white-space: nowrap; }

/* base.css zet hier een rood streepje voor; dit ontwerp is monochroom */
.home .eyebrow::before { display: none; }

.home .phase-a .eyebrow { justify-content: flex-end; }

.home .phase h2 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 5.2vw, 5.9rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
}

/* elke regel vliegt apart */
.home .phase h2 span { display: block; }

/* de kop van fase 2 is veel langer dan "Willem Jongsma": een
   fractie kleiner zodat hij niet uitsteekt (31-07, Willems
   vraag), en zijn regelval staat vast met nowrap. LET OP: deze
   regel moet NA .home .phase h2 staan, gelijke specificiteit
   betekent dat de laatste wint (één keer misgegaan). */
.home .phase-b h2 { font-size: clamp(1.6rem, 4vw, 4.6rem); }

.home .phase-b h2 span { white-space: nowrap; }

/* subtitel: klein en rustig onder de kop. Witter dan --ink-soft
   (31-07, Willems vraag: "niet super gemakkelijk te lezen").
   :not(.eyebrow), want het labeltje erboven is ook een <p> en moet
   mono-micro blijven; zonder die uitzondering kreeg het de leesmaat
   van de lopende tekst en brak het op een telefoon in stukken. */
.home .phase p:not(.eyebrow) {
  margin: 1.4rem 0 0;
  max-width: 42ch;
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  line-height: 1.6;
  font-weight: 400;
  color: rgba(242, 241, 238, 0.88);
}

/* de foto's zijn druk; een zachte schaduw houdt de tekst los van het beeld */
.home .phase h2,
.home .phase p,
.home .eyebrow {
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.8), 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* de alinea van fase 1 hangt aan de rechterrand van zijn blok.
   :not(.eyebrow) is hier nodig om de weegschaal gelijk te houden met
   de regel hierboven: die kreeg er door dezelfde uitzondering een
   klasse bij en won anders, waardoor de tekst links bleef plakken en
   niet meer onder de kop uitlijnde (01-08, door Willem gezien). */
.home .phase-a p:not(.eyebrow) { margin-left: auto; }

/* Elk vliegend deel heeft vanaf het begin een filter en een eigen
   laag. Zonder dit promoveert de browser het element pas op het
   moment dat de blur start, en dat geeft één frame flikkering. */
.home .fly {
  will-change: transform, opacity, filter;
  filter: blur(0px);
  transform: translateZ(0);
}

/* ---------- einde: fade to black en de markering ---------- */

.home .dip {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* ---------- de G-zoom en wat erachter ligt ---------- */

/* het logo van de huidige site, wit op zwart, beeldvullend als
   overlay; de viewBox is de camera en zoomt het oog van de g in */
.home .glogo {
  position: absolute;
  inset: 0;
  /* onzichtbaar tot home.js hem overneemt: vóór de scripts lopen
     zou dit beeldvullende witte letterlogo anders de eerste tekening
     zijn (01-08, als flits gezien na het laadscherm) */
  opacity: 0;
  /* ONDER de multiviewer (38), boven .next (36) en de dip (35).
     Het papier is beeldvullend zwart: lag deze laag boven de
     multiviewer, dan bedekt het papier bij een ondiepe parkeerstand
     de onderste vensterrij (twee keer misgegaan). Achter de
     multiviewer is zwart op zwart onzichtbaar, en de letters komen
     pas onder de vensterbodem uit; ze overlappen nooit. */
  z-index: 37;
  pointer-events: none;
}

.home .glogo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* het volgende hoofdstuk, zichtbaar zodra de plug opengaat.
   Ligt onder de glogo maar boven de dip. Productieblokken komen
   nog (Willems tekst); het contactblok onderaan is er alvast,
   naar het voorbeeld van de mailbar op zijn huidige site. */
.home .next {
  position: absolute;
  inset: 0;
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  /* dicht tot het logo het beeld dekt, anders prikt deze laag
     tijdens het doorscrollen door het gat tussen balk en logo;
     de links doen pas mee als de G opengaat (is-on via home.js) */
  opacity: 0;
  visibility: hidden;
}

.home .next.is-on { visibility: visible; }

/* ---------- het miniportfolio ----------
   Vijf categorieblokken met Willems producties (bron: zijn
   LinkedIn, alleen WJVideo en EMG/Gravity Media). Geen kaders of
   kaarten: elke categorie is een kolomkop met een haarlijn en een
   lijst eronder, in de taal van de mailbar. De rolcodes (MD/TD/
   IMAG) staan als mono-microlabels rechts, met de legenda in de
   kopregel. */
/* het portfolio vult de ruimte boven de mailbar; die staat in de
   flow (margin-top auto), dus door de lijsten heen zakken zoals
   met de absolute variant kan niet meer (31-07, door Willem
   gezien op de 27 inch) */
.home .port {
  flex: 1 1 auto;
  width: 100%;
  /* onder de vaste interface (bug links, contactknop rechts);
     de marge groeit mee met de vensterhoogte. --kop-vrij is de
     ondergrens: precies tot onder de bug plus lucht. Zonder die
     ondergrens dook de kop op een laag venster (liggende telefoon)
     achter de bug (01-08). */
  --kop-vrij: calc(var(--pad) + clamp(30px, 3.1vw, 42px) + 0.9rem);
  padding: max(var(--kop-vrij), calc(var(--pad) + clamp(3.6rem, 6vh, 4.5rem))) var(--pad) 1rem;
  text-align: left;
}

.home .port-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.home .port-meta { margin: 0; color: var(--ink-soft); }

/* de ondertitel onder de kop: zijn twee rollen voluit */
.home .port-sub {
  margin: 0.5rem 0 1.4rem;
  color: var(--ink-soft);
}

.home .port-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.1rem, 2.2vh, 1.8rem) clamp(1.6rem, 2.6vw, 3.2rem);
}

.home .cat-tv,
.home .cat-sport,
.home .cat-muziek { grid-column: span 6; }
.home .cat-esports,
.home .cat-events { grid-column: span 3; }

.home .cat-kop {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
}

.home .cat-kop h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.home .cat-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home .cat-lijst.k2 {
  column-count: 2;
  column-gap: clamp(1.4rem, 2.2vw, 2.6rem);
}

.home .cat-lijst li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.12rem 0;
  break-inside: avoid;
  font-size: clamp(0.66rem, 0.62vw + 0.42rem, 0.8rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), transform 0.22s var(--ease);
  white-space: nowrap;
}

.home .cat-lijst li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* aanwijzen doet iets: de regel stapt een klein stukje naar
   voren en de rolcode licht mee op (01-08, Willems keuze voor
   "fysiek en tastbaar" in DESIGN.md) */
.home .cat-lijst li:hover {
  color: var(--ink);
  transform: translateX(4px);
}

/* De rolcode is inhoud en geen streepje: hij vertelt of Willem er
   als Director of als TD stond. Op --ink-faint (0.14) haalde die
   tekst 1,3:1 contrast en was hij praktisch onleesbaar. Op
   --ink-soft is het 5,8:1 en blijft hij toch duidelijk onder de
   productienaam staan, want die is groter, in Archivo en niet in
   kapitalen. --ink-faint is voor haarlijnen, niet voor tekst. */
.home .rol {
  margin-left: auto;
  font-style: normal;
  font-size: 0.56rem;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}

.home .cat-lijst li:hover .rol { color: var(--ink); }

/* krappe vensterhoogtes: iets compacter in plaats van afkappen,
   maar nooit zo hoog dat de kop onder de bug schuift */
@media (min-width: 701px) and (max-height: 760px) {
  .home .port { padding-top: var(--kop-vrij); }
  .home .port-sub { margin-bottom: 1.1rem; }
  .home .cat-lijst li { padding: 0.09rem 0; font-size: 0.64rem; }
}

/* ruime vensterhoogtes (zijn 27 inch): de lijsten groeien mee
   zodat de ruimte boven de mailbar gevuld wordt (31-07, "meer
   ruimte voor tekst") */
@media (min-width: 701px) and (min-height: 920px) {
  .home .port-sub { margin-bottom: 1.9rem; }
  .home .cat-lijst li { padding: 0.16rem 0; font-size: 0.84rem; }
  .home .rol { font-size: 0.62rem; }
  .home .cat-kop h3 { font-size: 0.92rem; }
}

@media (min-width: 701px) and (min-height: 1200px) {
  .home .port-sub { margin-bottom: 2.4rem; }
  .home .port-grid { row-gap: 2.8rem; }
  .home .cat-lijst li { padding: 0.26rem 0; font-size: 1.02rem; }
  .home .rol { font-size: 0.7rem; }
  .home .cat-kop h3 { font-size: 1rem; }
}

/* ---------- contactblok, onderaan het volgende hoofdstuk ---------- */

.home .mailbar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.6rem, 4vh, 2.6rem) var(--pad);
  border-top: 1px solid var(--ink-faint);
  text-align: left;
}

.home .mailbar-contact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.home .mailbar-link,
.home .mailbar-phone {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}

.home .mailbar-link { text-transform: lowercase; }

.home .mailbar-link:hover,
.home .mailbar-phone:hover { color: var(--ink); }

.home .socials {
  display: flex;
  gap: 0.85rem;
}

.home .soc {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  transition: border-color 0.3s ease, transform 0.16s var(--ease);
}

.home .soc:hover { border-color: var(--ink-soft); transform: translateY(-2px); }

/* de iconen zijn zwart in het bestand; invert maakt ze wit,
   net als op de huidige site */
.home .soc img { display: block; filter: invert(1); opacity: 0.9; }

.home .foot-note { margin: 0; }

/* in Archivo, niet mono (30-07, Willems vraag) */
.home .foot-note span {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (max-width: 700px) {
  /* het miniportfolio past niet in één telefoonscherm: de laag
     scrolt daar zelf (natieve touch-scroll, Lenis stuurt alleen
     het document aan) en de mailbar loopt onderaan gewoon mee */
  /* Deze laag scrolt op een telefoon zelf, en dan schuift de tekst
     onder de vaste bug en contactknop door. Een uitfadende band
     bovenlangs lost dat op in de taal van de site: de regels lossen
     op voordat ze de hoeken raken, in plaats van er half achter te
     verdwijnen (01-08 gezien op het contactbeeld). */
  .home .next {
    display: block;
    /* dicht tot de pagina klaar is, zie .is-scrollbaar hieronder */
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    --kopband: calc(var(--pad) + clamp(30px, 3.1vw, 42px) + 0.35rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--kopband), #000 calc(var(--kopband) + 2.1rem));
    mask-image: linear-gradient(180deg, transparent 0, transparent var(--kopband), #000 calc(var(--kopband) + 2.1rem));
  }

  .home .port { padding-top: calc(var(--pad) + 3.4rem); }

  .home .port-top {
    flex-direction: column;
    gap: 0.3rem;
  }

  .home .port-sub { margin-bottom: 1.3rem; }

  .home .port-grid { display: block; }

  .home .cat { margin-bottom: 1.5rem; }

  .home .cat-lijst.k2 { column-count: 1; }

  .home .cat-lijst li { font-size: 0.78rem; }

  .home .mailbar {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  /* 44px is de ondergrens voor een duim */
  .home .soc { width: 2.75rem; height: 2.75rem; }

  .home .sectiekop { font-size: 0.98rem; }
}

/* ---------- wie mag er scrollen ----------
   Op een telefoon scrolt deze laag zelf. Maar zolang de zoom door de
   G nog loopt, hoort een veeg de pagina af te maken en niet de lijst
   te verschuiven: anders sta je te lezen terwijl de G half open achter
   je blijft hangen en de rest van de reis nooit afgaat. home.js zet
   deze klasse pas zodra de tijdlijn op zijn eind is (01-08, Willems
   melding over scrollproblemen op het contactblok). */
.home .next.is-scrollbaar {
  overflow-y: auto;
  /* geen overscroll-behavior: contain hier. Dat blokkeert precies de
     weg terug: sta je bovenaan de lijst, dan moet een veeg omlaag de
     pagina weer omhoog nemen (nagemeten 01-08). */
}

/* Lage vensters (liggende telefoon, of een half scherm): het
   portfolio past niet in beeld en de contactbalk viel eronder weg,
   zonder manier om erbij te komen. De laag scrolt daar zelf, net
   als op de telefoon (01-08 gevonden op 844x390). */
@media (max-height: 620px) {
  .home .next {
    display: block;
    /* dicht tot de pagina klaar is, zie .is-scrollbaar hieronder */
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    --kopband: calc(var(--pad) + clamp(30px, 3.1vw, 42px) + 0.35rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--kopband), #000 calc(var(--kopband) + 2.1rem));
    mask-image: linear-gradient(180deg, transparent 0, transparent var(--kopband), #000 calc(var(--kopband) + 2.1rem));
  }

  .home .mailbar { position: static; }
}

/* ---------- de scrollrail ----------
   Doorzichtige voortgangsbalk rechts, in de marge tussen de
   paginarand en de vaste interface (contactknop en mixer staan op
   --pad, de rail zit daarbuiten). Duim in beeldwit-zacht die
   oplicht zolang er gescrold wordt; verder geen kleur, geen rand.
   Vervangt de verborgen echte scrollbalk (01-08, Willems vraag). */

.home .rail {
  position: fixed;
  top: var(--pad);
  bottom: var(--pad);
  right: clamp(5px, 0.5vw, 9px);
  width: 3px;
  z-index: 55;
  border-radius: 2px;
  background: rgba(242, 241, 238, 0.08);
  pointer-events: none;
}

.home .rail i {
  display: block;
  width: 100%;
  border-radius: 2px;
  background: rgba(242, 241, 238, 0.34);
  transition: background 0.45s var(--ease);
  will-change: transform;
}

.home .rail.is-actief i { background: rgba(242, 241, 238, 0.62); }

@media (max-width: 700px) {
  .home .rail { right: 3px; width: 2px; }
}

/* ---------- zuinige standen ----------
   q1 mag de meting in home.js onderweg zetten (onzichtbaar: korrel
   en bewegingsblur). q2 en qstil zijn zichtbaar en komen ALLEEN bij
   de start, als de browser met de processor tekent (of via ?q=low):
   runtime verdween anders midden in de sessie de blur achter de
   previewkaart en versprong de eerste foto (13-08, door Willem
   gezien). De opbouw blijft in elke stand identiek; alleen de
   duurste effecten vallen weg, van buiten naar binnen. Wat blijft:
   het zwart, de foto's, de scrims, de typografie, de tally en alle
   beweging die het verhaal draagt (01-08). */

/* q1: de korrel is de grootste beeldvullende laag van de site en
   het eerste dat je kunt missen zonder dat de opbouw verandert.
   De bewegingsblur van de zoom staat als inline stijl, vandaar
   het uitroepteken. */
.q1 .grain { display: none; }
.q1 #gScene { filter: none !important; }

/* q2: alle defocus eruit. De mix wordt een gewone dissolve en het
   paneel lost op in dekking in plaats van in onscherpte. De zware
   lagen worden ook niet meer apart bewaard, wat op een machine
   zonder kaartversnelling geheugen en kopieerwerk scheelt. */
.q2 .home .frame,
.q2 .home .mv,
.q2 .home .mv-card .mv-blur { filter: none !important; }

.q2 .home .frame { will-change: auto; }

.q2 .home .mv-grid {
  box-shadow:
    0 0 0 max(0.5cqw, 7px) #101214,
    0 0 0 calc(max(0.5cqw, 7px) + 1px) #383c41;
}

.q2 .home .fly { will-change: auto; }

/* Zonder kaartversnelling is elke schaalstap op een beeldvullende
   foto een complete hertekening: op 2560x1440 de duurste post die er
   nog over is. In qstil staan de foto's daarom stil; de mix, de
   scrims en de tekst blijven gewoon werken. LET OP: qstil wordt
   alleen bij de start gezet (softwaretekenaar of ?q=low), nooit
   runtime. Midden in een sessie is transform none een zichtbare
   sprong van ingezoomd naar origineel; dat gebeurde op Willems pc
   toen de bewaking vlak na het laden q2 pakte (13-08). */
.qstil .home .frame { transform: none !important; }

/* het meterkastje van ?fps; zonder die parameter bestaat het niet */
.home .meter {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad) * 0.85);
  transform: translateX(-50%);
  z-index: 75;
  margin: 0;
  padding: 0.5em 0.9em;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

/* ---------- hover: direct aanslaan, rustig loslaten ----------
   Eén patroon voor de hele site: de reactie op aanwijzen komt in
   ~0.12s (voelt als direct), het terugvallen houdt de rustige
   0.2-0.45s van de basisregel. Zonder dit voelden de hovers traag
   bij snel bewegen: je muis was al weg voordat de animatie op
   stoom kwam (01-08, Willems melding). */
.home .cat-lijst li:hover,
.home .cat-lijst li:hover .rol,
.home .mailbar-link:hover,
.home .mailbar-phone:hover,
.home .bug-link:hover,
.home .contact-knop:hover,
.home .soc:hover,
.home .mv-src:hover .mv-laag {
  transition-duration: 0.12s;
}

/* ---------- vaste interface ---------- */

/* sectiekoppen: één systeem, met meer aanwezigheid (30-07:
   "niet opvallend genoeg"): vette kapitalen. De strepen ervoor
   zijn op Willems verzoek weer weg (30-07: geen streepjes voor
   teksten op de site). Mono micro blijft voor micro-informatie. */
.home .sectiekop {
  display: flex;
  align-items: center;
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.7rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* de bug: linksboven, wit; rood zodra een bron van de
   multiviewer op Program staat (de tally van de site).
   Hij is ook een knop: klik = fade terug naar het begin. */
.home .bug-link {
  position: fixed;
  top: var(--pad);
  left: var(--pad);
  z-index: 60;
  display: block;
  width: clamp(30px, 3.1vw, 42px);
  transition: transform 0.35s var(--ease);
}

/* het tekeningetje is op een telefoon 30px; deze onzichtbare rand
   maakt er een aanraakvlak van 44px van zonder iets te verschuiven */
.home .bug-link::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.home .bug-link:hover { transform: scale(1.12); }
.home .bug-link:active { transform: scale(1.03); }

.home .bug-link .bug {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

.home .bug { color: var(--ink); }
.home .bug.is-live { color: var(--tally); }

/* de zwarte overgang voor de bug- en contactsprong */
.home .fadeover {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* de contactknop rechtsboven: snelweg naar het contactblok.
   In Archivo, niet mono (30-07, Willems vraag); mono blijft voor
   micro-informatie. Blend difference houdt hem leesbaar als de
   witte G voorbijkomt. */
.home .contact-knop {
  position: fixed;
  top: calc(var(--pad) + 0.35rem);
  right: var(--pad);
  z-index: 60;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-decoration: none;
  mix-blend-mode: difference;
  transition: color 0.35s var(--ease);
}

/* de tekst zelf is maar 15px hoog; deze onzichtbare rand maakt er
   een aanraakvlak van ruim 44px van, zonder de tekst te verplaatsen */
.home .contact-knop::before {
  content: "";
  position: absolute;
  inset: -15px -12px;
}

.home .contact-knop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.45em;
  height: 1px;
  background: var(--ink);
  transition: right 0.4s var(--ease);
}

.home .contact-knop:hover { color: var(--ink); }
.home .contact-knop:hover::after { right: 0; }

/* het transitieblok: de rode draad van de site. Het blijft de
   hele pagina staan en schakelt mee met elke overgang (MIX bij
   de fotomix, DIP bij de fade to black, DVE bij de zoom door de
   G); home.js verplaatst de .on-klasse. Wipe komt nooit aan de
   beurt, en cut is geen optie. Geen pointer-events: het blok
   mag geen kliks afvangen boven de multiviewer. Blend
   difference houdt het leesbaar als de witte G voorbijkomt. */
.home .mixer {
  pointer-events: none;
  position: fixed;
  right: var(--pad);
  bottom: calc(var(--pad) * 0.85);
  z-index: 70;
  display: flex;
  align-items: baseline;
  gap: 1.05rem;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

.home .mixer span {
  position: relative;
  color: var(--ink-faint);
  transition: color 0.45s var(--ease);
}

.home .mixer span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5em;
  height: 1px;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.home .mixer .on { color: var(--ink); }

.home .mixer .on::after { opacity: 1; }

/* ---------- responsief ---------- */

@media (max-width: 980px) {
  .home .phase { width: 46vw; }
  .home .phase h2 { font-size: clamp(2.3rem, 6.6vw, 4.6rem); }
}

@media (max-width: 700px) {
  .home .f1 img { object-position: 42% 55%; }

  /* op een telefoon de staande foto, vrij van zijn gezicht */
  .home .f2 img {
    height: 100%;
    object-position: 54% 40%;
  }

  .home .phase {
    width: 66vw;
    top: 45%;
  }

  .home .phase-b { width: 58vw; }

  .home .phase h2 { font-size: clamp(1.9rem, 8.2vw, 2.9rem); }

  /* de lange kop en eyebrow van zijn definitieve tekst passen op
     een telefoon alleen kleiner en met wrappen toegestaan */
  .home .phase-b h2 { font-size: clamp(1.2rem, 6vw, 1.8rem); }

  .home .phase-b h2 span { white-space: normal; }

  /* kleiner op een telefoon, zodat beide helften in het smalste
     tekstblok passen en de regelval bij beide foto's gelijk is */
  .home .eyebrow { font-size: clamp(0.62rem, 3vw, 0.78rem); }

  /* LET OP: de eyebrow is ook een <p>, en die moet mono-micro
     blijven. Zonder :not() kreeg het labeltje hier de leesmaat van
     de lopende tekst (14,7px in plaats van 10px). Daardoor brak
     "Freelance Multicam & Technical Director" op een telefoon in twee
     tot vier regels, en bij fase 2 anders dan bij fase 1 omdat dat
     blok smaller is. Willem zag dat verschil (01-08). */
  .home .phase p:not(.eyebrow) { font-size: 0.92rem; }

  .home .scrim-a {
    background:
      linear-gradient(233deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0) 72%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.75) 100%);
  }

  .home .scrim-b {
    background:
      linear-gradient(127deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0) 72%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.75) 100%);
  }

  .home .mixer { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .home .phase { width: min(38ch, 52vw); }
  .home .phase h2 { font-size: clamp(1.9rem, 5.6vw, 3rem); }
  .home .phase p:not(.eyebrow) { display: none; }
}

/* ---------- minder beweging ---------- */

/* de tastbare hovers houden hun kleurwissel, maar bewegen niet.
   Deze regels staan hier en niet in base.css: de hoverregels zelf
   zijn .home-gebonden en winnen anders op specificiteit. */
@media (prefers-reduced-motion: reduce) {
  .home .cat-lijst li:hover,
  .home .bug-link:hover,
  .home .bug-link:active,
  .home .soc:hover { transform: none; }
}