/* Rankkraft — portfolio
   ========================================================================
   Er zijn drie cases. Daarom geen raster: drie kolommen laten gaten vallen,
   of ze knijpen het werk zo klein dat er niets van te zien is. Elke case
   krijgt een volle strook, om en om links en rechts, zodat drie cases lezen
   als drie cases en niet als een half gevulde etalage. De teller "01 /03"
   zegt het er nog eens bij: dit is alles wat er is.

   Er zijn geen schermafdrukken. Elke case krijgt daarom een zelf getekende
   vorm uit drie inline SVG-lagen op verschillende diepte. Nul extra verzoeken.

   Nagerekend contrast (WCAG, sRGB):
     #E8EDF2 op --grond 16,6:1 · op --vlak-op 14,5:1
     --tekst-zacht op --grond 9,1:1 · op --vlak 8,5:1 · op --vlak-op 8,0:1
     --tekst-zacht op de accentwaas in de kop 6,9:1 (op een rasterlijn 6,0:1)
     --accent op --grond 12,7:1 · op --vlak 11,8:1 · knoptekst 10,7:1
   ======================================================================== */

/* ── 1. Kop ──
   Diepte uit twee verlopen en verder niets: een accentwaas achter de titel en
   een raster dat naar de randen wegvalt. Beide pointer-events:none en achter
   de inhoud. overflow:hidden omdat het verloop buiten de tekstbreedte steekt
   en nooit een horizontale schuifbalk mag opleveren. */
.pf-kop{position:relative;overflow:hidden;isolation:isolate}
.pf-kop-in{position:relative;z-index:1}
.pf-kop::before{
  content:"";position:absolute;left:-10%;right:-10%;top:-28%;height:34rem;
  pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%,var(--accent-waas),transparent 70%);
}
/* Raster op .05 alpha én uitgemaskerd. Sterker gaat het met de tekst
   concurreren; op het lichtste kruispunt houdt de inleiding nog 6,0:1. */
.pf-kop::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(232,237,242,.05) 1px,transparent 1px) 0 0/100% 5.5rem,
    linear-gradient(90deg,rgba(232,237,242,.05) 1px,transparent 1px) 0 0/5.5rem 100%;
  -webkit-mask-image:radial-gradient(68% 66% at 42% 34%,#000 12%,transparent 74%);
          mask-image:radial-gradient(68% 66% at 42% 34%,#000 12%,transparent 74%);
}
.pf-kop h1{max-width:16ch;margin-bottom:1.25rem}

/* ── De drie meetwaarden ──
   Een <dl>: het getal is de term, de omschrijving de definitie. Op smal scherm
   staat het getal náást het label; drie kolommen van 100px zouden op 360px
   woorden als "geïndexeerd" moeten afbreken. */
.pf-meetlat{display:grid;gap:.75rem;padding:0;margin:clamp(2.5rem,6vw,3.5rem) 0 0}
.pf-cijfer{
  position:relative;              /* .kantel heeft dit nodig voor de reflectie */
  display:flex;align-items:center;gap:1rem;padding:1.125rem 1.25rem;
  background:var(--vlak);border:1px solid var(--lijn);
  border-radius:var(--rond);      /* .kantel::after erft deze straal */
  transition:border-color var(--snel) ease;
}
.pf-cijfer:hover{border-color:var(--lijn-op)}
.pf-cijfer dt{
  flex:none;display:inline-flex;align-items:center;gap:.12em;
  font-family:var(--kop);font-weight:600;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.625rem,1.2rem + 1.5vw,2.25rem);
}
.pf-cijfer dd{margin:0;color:var(--tekst-zacht);font-size:.8125rem;line-height:1.45}
.pf-nu{color:var(--accent)}
.pf-van,.pf-teller-van{color:var(--tekst-zacht)}
/* Pijl getekend, geen tekstteken: de letters zijn bijgesneden tot latijn plus
   accenten, dus U+2192 komt uit een terugvalletter die gaat zwemmen. */
.pf-pijl{width:1.15em;height:.64em;flex:none;color:var(--tekst-zacht)}
@media(min-width:640px){
  .pf-meetlat{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .pf-cijfer{flex-direction:column;align-items:flex-start;gap:.625rem;padding:1.5rem}
}

/* ── 2. De cases ── */
.pf-koptekst{margin-bottom:clamp(2rem,5vw,3rem)}
.pf-koptekst h2{margin-bottom:.875rem}
.pf-lijst{list-style:none;padding:0;margin:0;display:grid;gap:clamp(1.5rem,4vw,2.5rem)}

/* .gloed vraagt om een omhulling. Zijn ::before tekent bóven de achtergrond van
   het element waar de klasse op staat; direct op de kaart werd het een
   accentwaas over de tekst, contrast ongeveer 1,3:1. Op een omhulling van 1px
   ligt de dekkende kaart erbovenop en blijft over wat het hoort te zijn: een
   randje dat oplicht waar de cursor is. */
.pf-rand{padding:1px;border-radius:calc(var(--rond) + 7px)}
.pf-case{
  display:grid;align-items:center;
  gap:clamp(1.5rem,4vw,2.25rem);padding:clamp(1rem,3vw,1.75rem);
  background:var(--vlak);border:1px solid var(--lijn);
  border-radius:calc(var(--rond) + 6px);
  /* Negatieve spreiding: geen wolk onder de kaart maar een donkere voet, zodat
     het blok van de ondergrond loskomt zonder zichtbare schaduw. */
  box-shadow:0 30px 60px -42px rgba(0,0,0,.95);
}
@media(min-width:920px){
  .pf-case{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);padding:clamp(1.5rem,2.4vw,2.25rem)}
  /* Om en om, maar alleen visueel: in de bron staat het beeld op alle drie de
     blokken vóór de tekst, dus de voorleesvolgorde blijft gelijk. */
  .pf-lijst > li:nth-child(even) .pf-beeld{order:2}
  .pf-inhoud{padding-inline:clamp(.25rem,1.4vw,1.25rem)}
}

/* ── Het beeldvlak: drie lagen in één 3D-ruimte ──
   .kantel geeft dit vlak perspective(900px) en een rotatie zodra de muis erover
   gaat. Omdat transform-style op preserve-3d staat erven de lagen eronder die
   camera, en legt elke laag bij het kantelen een andere afstand af. Dat verschil
   ís het diepte-effect; geen WebGL, geen extra bestand.

   Bewust géén overflow:hidden hier: overflow, filter, mask en clip-path platten
   een 3D-context af en dan valt de gelaagdheid weg. Nodig is het ook niet: de
   tekeningen blijven binnen hun viewBox en de padding vangt de paar pixels op
   die de voorste laag door het perspectief naar buiten schuift. */
.pf-beeld{
  position:relative;display:grid;place-items:center;
  padding:clamp(1rem,3vw,1.5rem);
  border:1px solid var(--lijn);border-radius:var(--rond);
}
/* Drie keer dezelfde ingrediënten, drie keer een andere lichtinval: familie
   van elkaar, geen herhaling. */
.pf-beeld-a{background:linear-gradient(158deg,var(--vlak-op),var(--grond) 76%)}
.pf-beeld-b{background:linear-gradient(214deg,var(--vlak-op),var(--grond) 74%)}
.pf-beeld-c{background:linear-gradient(126deg,var(--vlak-op),var(--grond) 78%)}
.pf-vlak{display:block;position:relative;width:100%;aspect-ratio:4/3;transform-style:preserve-3d}
@media(min-width:920px){.pf-vlak{aspect-ratio:1}}
/* currentColor voor de lijntekeningen; de dekking per laag doet de rest. */
.pf-laag{position:absolute;inset:0;width:100%;height:100%;color:rgba(232,237,242,.62)}

/* Eigen dekkende ondergrond in de grondkleur, zodat het label losstaat van het
   verloop eronder en op alle drie de vlakken hetzelfde haalt: 12,7:1. */
.pf-soort{
  position:absolute;top:1rem;left:1rem;z-index:2;margin:0;
  padding:.375rem .75rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--grond);
  border:1px solid var(--lijn-op);border-radius:999px;
}

/* ── Tekstkolom ──
   De teller is geen versiering maar de eerlijkheid van deze pagina in twee
   getallen: dit is nummer één van drie, en er komt geen vierde. */
.pf-teller{
  display:flex;align-items:baseline;gap:.15em;margin:0 0 .75rem;
  font-family:var(--kop);font-weight:600;font-size:.9375rem;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.pf-teller-nu{color:var(--tekst);font-size:1.375rem;letter-spacing:-.02em}
.pf-inhoud h3{margin-bottom:.75rem}
.pf-sub{color:var(--tekst-zacht);font-weight:600}
.pf-tekst{color:var(--tekst-zacht);max-width:52ch}

/* Uitdaging en tijdlijn zijn term en toelichting, dus een <dl>. Onder 560px
   onder elkaar: een labelkolom van negen tekens laat op 360px te weinig over. */
.pf-feiten{
  display:grid;gap:.375rem .875rem;margin:1.25rem 0;padding-top:1.25rem;
  border-top:1px solid var(--lijn);font-size:.875rem;
}
.pf-feiten dt{
  color:var(--accent);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6;
}
.pf-feiten dd{margin:0 0 .625rem;color:var(--tekst-zacht)}
.pf-feiten dd:last-child{margin-bottom:0}
@media(min-width:560px){
  .pf-feiten{grid-template-columns:auto minmax(0,1fr);align-items:baseline}
  .pf-feiten dd{margin-bottom:0}
}

.pf-merken{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0}
.pf-merken li{
  display:inline-flex;align-items:center;padding:.375rem .75rem;
  font-size:.75rem;font-weight:600;color:var(--tekst);
  background:var(--vlak-op);border:1px solid var(--lijn);border-radius:999px;
}
.pf-pijl-klein{width:1.1em;height:.62em;margin-inline:.2em}

/* De omlijnde knop uit het fundament staat op --lijn-op en haalt op deze
   vlakken 1,9:1, terwijl de begrenzing van een bedieningselement 3:1 moet
   halen. Alleen de rand opgehoogd: .38 wit geeft 3,2:1 op --vlak, .42 geeft
   3,6:1 op het lichtere slotvlak. De rest van de knop blijft van basis.css. */
.pf-inhoud .knop-lijn{border-color:rgba(232,237,242,.38)}
.pf-cta .knop-lijn{border-color:rgba(232,237,242,.42)}

/* Eén regel, geen vierde kaart met "jouw project hier". Een lege plek opmaken
   als case is precies de etalage-truc die deze pagina niet gebruikt. */
.pf-volgend{
  max-width:44ch;margin:clamp(2.5rem,6vw,3.5rem) auto 0;
  padding-top:1.5rem;border-top:1px dashed var(--lijn-op);
  text-align:center;color:var(--tekst-zacht);font-size:.9375rem;
}

/* ── 3. Slot ── */
.pf-cta{
  padding:clamp(1.75rem,5vw,3.25rem) clamp(1.25rem,4vw,2.5rem);text-align:center;
  background:linear-gradient(150deg,var(--vlak-op),var(--vlak) 70%);
  border:1px solid var(--lijn);border-radius:calc(var(--rond) + 6px);
}
.pf-cta p{color:var(--tekst-zacht);max-width:54ch;margin:1rem auto 0}
.pf-cta-knoppen{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.75rem}

/* ── Kleuren in de tekeningen ──
   Alles uit de tokens, één accent, verder alleen dekking; de cases verschillen
   al in vorm. Hoe verder weg hoe zwakker, zodat het ook als afstand leest op
   een telefoon waar niets kantelt. */
.pf-ver{opacity:.5}
.pf-mid{opacity:.72}
.pf-vol{fill:var(--accent)}
.pf-grijs{fill:rgba(232,237,242,.34)}
.pf-ring{fill:none;stroke:var(--accent);stroke-width:1.5}
.pf-kaart{fill:var(--vlak-op);stroke:var(--accent);stroke-width:1.5}
/* De 28 die er stonden: contour. De 19 erbij: vol en vooraan. */
.pf-oud{fill:var(--vlak-op);stroke:var(--accent);stroke-width:1.3}
.pf-nieuw{fill:var(--accent);stroke:none}

/* ── Gelaagdheid onder de aanwijzer ──
   translateZ doet niets zolang er geen perspectief is, en dat zet basis.js pas
   bij pointermove en alleen als bewegen mag. Het staat dus vanzelf stil op een
   aanraakscherm, bij rustige weergave en zonder JavaScript. De waarden blijven
   klein: op 900px perspectief vergroot 38px de voorste laag met 4,4%, en meer
   duwt de tekening over de rand van het vlak.

   Alle waarden positief, en dat is geen smaak: het vlak eromheen is zelf de
   3D-context en zijn dekkende verloop ligt op z=0. Met translateZ(-12px) werd
   de achterste laag daarachter gesorteerd en dus afgedekt; de cirkels, de
   horizon en het stippelkader waren spoorloos terwijl DOM en stijlen klopten. */
@media (hover:hover) and (pointer:fine){
  html.js .pf-ver{transform:translateZ(4px)}
  html.js .pf-mid{transform:translateZ(18px)}
  html.js .pf-bij{transform:translateZ(38px)}
  html.js .pf-soort{transform:translateZ(30px)}
}

/* Twee keer uitgeschreven, niet samengevoegd tot één selectorlijst: een browser
   die de media-query niet kent gooit anders ook de klassevariant weg. */
@media(prefers-reduced-motion:reduce){
  .pf-ver,.pf-mid,.pf-bij,.pf-soort{transform:none !important}
}
html.rustig .pf-ver,
html.rustig .pf-mid,
html.rustig .pf-bij,
html.rustig .pf-soort{transform:none !important}

/* Alleen voor voorleessoftware: "28 naar 47", "minder dan 2s", "01 van 03" en
   de waarschuwing bij een link naar een nieuw tabblad. De getekende pijl is
   aria-hidden; zonder deze tekst klinkt er "28 47". */
.pf-vw{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}