/* Pop-up "Hoe het werkt" (alleen op de skillpagina). Zelfde huisstijl als skills.css: kleuren, knoppen, lettergroottes en ronde hoeken komen uit die variabelen en regels; hier staat de indeling en de beweging. */
.hiw,.hiw-dialog{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1)}
.hiw{margin:18px 0 0}.hiw .btn{margin-top:0}.hiw:has(~#verstuurd:target){display:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.hiw-open{overflow:hidden}
.hiw-dialog{margin:auto;padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible}
.hiw-dialog::backdrop{background:rgba(10,10,10,.55)}
/* De beelden zijn complete 9:16-schermen (label, teller, titel en voettekst zitten erin). De kaart is zo hoog dat het beeld de volle breedte krijgt: hoogte = beeld + kop + knoppen. */
.hiw-card{--h:min(92vh,calc((92vw - 34px)*16/9 + 154px));display:flex;flex-direction:column;gap:12px;box-sizing:border-box;height:var(--h);width:calc((var(--h) - 154px)*9/16 + 34px);padding:16px;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transform-origin:center}
@supports (height:1dvh){.hiw-card{--h:min(92dvh,calc((92vw - 34px)*16/9 + 154px))}}
.hiw-head{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:48px}
.hiw-dots{display:flex;gap:10px;align-items:center}
.hiw-dot{width:10px;height:10px;border-radius:999px;background:var(--ink);opacity:.22;transition:opacity .18s var(--ease-out)}.hiw-dot.on{opacity:1;transform:scale(1.25)}
.hiw .btn,.hiw-card .btn{margin-top:0}
.hiw-card .hiw-x{width:48px;padding:0;font-size:28px;line-height:1}
.hiw-slides{flex:1 1 0;min-height:0;display:flex;touch-action:pan-y}
.hiw-slide{flex:1;min-width:0;display:flex;justify-content:center}.hiw-slide[hidden]{display:none}
/* Het beeld staat vier keer in lagen (label, teller, inhoud, voet), elk met een eigen uitsnede, zodat de delen na elkaar kunnen binnenkomen. De sneden liggen door lege achtergrond; in rust vormen de lagen één beeld. */
.hiw-fig{position:relative;height:100%;max-width:100%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--canvas);outline:1px solid var(--line);outline-offset:-1px}
.hiw-band{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.hiw-band.b1{clip-path:inset(0 50% 87% 0)}.hiw-band.b2{clip-path:inset(0 0 87% 50%)}.hiw-band.b3{clip-path:inset(13% 0 11.5% 0)}.hiw-band.b4{clip-path:inset(88.5% 0 0 0)}
.hiw-nav{display:flex;gap:12px;flex:none}.hiw-nav .btn{flex:1;padding-left:12px;padding-right:12px}
.hiw-card button:disabled{opacity:.35;cursor:default;transition:opacity .18s var(--ease-out)}.hiw-card button:disabled:hover{background:var(--ink);color:#fff}.hiw-card .btn.alt:disabled:hover{background:#fff;color:var(--ink)}
/* Telefoons hebben geen hover: skills.css kleurt knoppen bij :hover, en dat blijft na een tik plakken. Daarom hier terug naar de rustkleur; hover werkt alleen met een muis. */
@media (hover:none),(pointer:coarse){.hiw-card .btn:hover{background:var(--ink);color:#fff}.hiw-card .btn.alt:hover{background:#fff;color:var(--ink)}.hiw .btn.alt:hover{background:#fff;color:var(--ink)}}
/* Bureaublad: JavaScript zet .wide op de kaart (zie uitleg.js) als het venster minstens 900 px breed en 521 px hoog is en de liggende beelden (-breed) er zijn. De kaart is dan een 16:9-slide die de hoogte van het venster benut (94 %) en nooit breder is dan 94 % van de breedte; kop en knoppen houden dezelfde 154 px. De tekst in het beeld schaalt mee met de slide. Dezelfde vier lagen en dezelfde beweging; alleen de uitsneden liggen anders (kop, teller bovenin, inhoud tussen 18 % en 86 %, voet eronder). */
.hiw-card.wide{--w:min(94vw,calc((94vh - 154px)*16/9 + 34px));height:auto;width:var(--w)}
@supports (height:1dvh){.hiw-card.wide{--w:min(94vw,calc((94dvh - 154px)*16/9 + 34px))}}
.hiw-card.wide .hiw-slides{flex:none;aspect-ratio:16/9}
.hiw-card.wide .hiw-fig{width:100%;height:auto;max-width:none;aspect-ratio:16/9;border-radius:16px}
.hiw-card.wide .hiw-band.b1{clip-path:inset(0 50% 82% 0)}.hiw-card.wide .hiw-band.b2{clip-path:inset(0 0 82% 50%)}.hiw-card.wide .hiw-band.b3{clip-path:inset(18% 0 14% 0)}.hiw-card.wide .hiw-band.b4{clip-path:inset(86% 0 0 0)}
.hiw-card.wide .hiw-nav{justify-content:space-between}.hiw-card.wide .hiw-nav .btn{flex:0 0 200px}
/* Liggend op een telefoon is er geen hoogte voor kop en knoppen boven en onder het beeld: dan staan ze naast het beeld. */
@media (orientation:landscape) and (max-height:520px){
  .hiw-card{display:grid;grid-template-columns:auto minmax(120px,1fr);grid-template-rows:auto 1fr auto;column-gap:16px;row-gap:12px;height:92vh;height:92dvh;width:auto}
  .hiw-slides{grid-column:1;grid-row:1/4;width:calc((92vh - 34px)*9/16);width:calc((92dvh - 34px)*9/16)}
  .hiw-head{grid-column:2;grid-row:1}.hiw-nav{grid-column:2;grid-row:3;flex-direction:column}
}
/* Beweging: alleen transform en opacity. Tijden en curves volgen BEWEGING-hoe-het-werkt.md. */
@keyframes hiw-fade-in{from{opacity:0}}
@keyframes hiw-fade-out{to{opacity:0}}
.hiw-dialog[open]::backdrop{animation:hiw-fade-in .15s var(--ease-out) both}
.hiw-dialog[open] .hiw-card{animation:hiw-card-in .2s var(--ease-out) both}
.hiw-dialog.closing::backdrop{animation:hiw-fade-out .14s var(--ease-out) forwards}
.hiw-dialog.closing .hiw-card{animation:hiw-card-out .14s var(--ease-out) forwards}
/* Inhoud die instuift: 70 ms tussen de delen, 220 ms per deel. Volgorde: label, teller, inhoud, voet. */
.hiw-slide:not([hidden]) .hiw-band{animation:hiw-up .22s var(--ease-out) both}
.hiw-slide:not([hidden]) .hiw-band.b2{animation-delay:.07s}.hiw-slide:not([hidden]) .hiw-band.b3{animation-delay:.14s}.hiw-slide:not([hidden]) .hiw-band.b4{animation-delay:.21s}
@media (prefers-reduced-motion:no-preference){
  @keyframes hiw-card-in{from{opacity:0;transform:scale(.96)}}
  @keyframes hiw-card-out{to{opacity:0;transform:scale(.98)}}
  @keyframes hiw-up{from{opacity:0;transform:translateY(14px)}}
  .hiw-dot{transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
  .hiw .btn,.hiw-card .btn{transition:background .15s,color .15s,transform .12s var(--ease-out)}
  .hiw .btn:active,.hiw-card .btn:active{transform:scale(.97)}
}
/* Verminderde beweging: dezelfde volgorde en tijden, alleen fades, geen verplaatsing en geen schaal. */
@media (prefers-reduced-motion:reduce){
  @keyframes hiw-card-in{from{opacity:0}}
  @keyframes hiw-card-out{to{opacity:0}}
  @keyframes hiw-up{from{opacity:0}}
}