/* De hero: het speelveld op een flip-overvel. Zonder JavaScript of bij minder beweging staat alles stil
   en komt de positie gewoon onder de hero. Met .film erop (hero.js) wordt het één verhaal op scroll. */
.hero{position:relative}
.hero-podium{position:relative;overflow:hidden}
.hero-vel{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--papier) 0%,var(--mist-licht) 55%,var(--mist) 100%)}
.hero-vel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px;opacity:.7;-webkit-mask-image:radial-gradient(ellipse 42% 60% at 74% 56%,var(--zwart) 0%,var(--zwart-50) 55%,transparent 100%);mask-image:radial-gradient(ellipse 42% 60% at 74% 56%,var(--zwart) 0%,var(--zwart-50) 55%,transparent 100%)}
.hero-foto,.foto-notitie{display:none}
.hero.film .hero-foto{display:block;position:absolute;inset:0;z-index:0;opacity:0;will-change:transform,opacity}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hero-foto svg{position:absolute;inset:0;width:100%;height:100%}
/* de foto iets dieper, zodat de tekening en de notitie lezen */
.hero.film .hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--diep-35),var(--diep-12) 40%,var(--diep-22))}
.hero.film .foto-notitie{display:block;position:absolute;z-index:2;margin:0;max-width:11ch;color:var(--papier);font-size:var(--t-3);line-height:1;text-align:right;text-shadow:0 2px 0 var(--petrol),0 0 20px var(--diep-85);opacity:0;visibility:hidden;pointer-events:none}

.hero-inhoud{position:relative;z-index:3;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s5);align-items:center;padding-top:calc(var(--kop-h) + var(--s4));padding-bottom:var(--s5)}
.voor-wie{display:flex;align-items:center;gap:var(--s2);font-weight:600;font-size:var(--t-klein);line-height:1.2;color:var(--petrol-zacht);margin-bottom:var(--s4)}
.voor-wie::before{content:"";width:32px;height:2px;background:var(--framboos);border-radius:2px}
.hero h1{font-size:var(--t-display);line-height:.9;letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96;color:var(--petrol)}
.hero h1 .r1,.hero h1 .r2{display:block;padding-bottom:.04em}
.hero .lede{font-size:var(--t-lede);line-height:1.5;max-width:31ch;margin-top:var(--s4);color:var(--petrol);text-wrap:balance}
.feiten{list-style:none;margin:var(--s5) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--mist-diep);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);max-width:560px}
.feiten li{display:grid;gap:var(--s0);align-content:start}
.feiten b{font-family:var(--f-kop);font-weight:700;font-size:var(--t-lede);line-height:1.1;font-variation-settings:"wdth" 85;letter-spacing:-.01em}
.feiten span{font-size:var(--t-label);line-height:1.35;color:var(--petrol-zacht);text-wrap:balance}
.hero-tekst .knoppen{margin-top:var(--s4)}

/* het vel met de tekening en Marinde */
.speelveld-wrap{position:relative;width:100%;max-width:min(760px,calc((100svh - var(--kop-h) - 72px) * 600 / 760));aspect-ratio:600/760;justify-self:center;will-change:transform}
.speelveld{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.marinde-cirkel{position:absolute;margin:0;left:calc(28 / 600 * 100%);top:calc(488 / 760 * 100%);width:calc(184 / 600 * 100%);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 18px 40px var(--diep-22)}
.marinde-naam{position:absolute;left:calc(28 / 600 * 100%);width:calc(184 / 600 * 100%);top:calc(686 / 760 * 100%);display:grid;justify-items:center;text-align:center;gap:2px;font-size:var(--t-klein);line-height:1.25;white-space:nowrap}
.marinde-naam b{font-weight:700}
.marinde-naam span{color:var(--petrol-zacht);font-size:var(--t-label)}
.marinde-cirkel img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* de positie: eerst onder de hero, in de film over de foto heen */
.hero-slot{position:relative;z-index:4;padding:var(--s8) 0}
.slot-marinde{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-klein);color:var(--op-donker)}
.slot-marinde span{text-wrap:balance}
.slot-marinde img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 2px var(--op-donker-zacht)}
.slot-marinde b{color:var(--papier)}
.slot-binnen{display:grid;gap:var(--s4);justify-items:start}
.slot-veld{width:clamp(160px,18vw,260px);height:auto;overflow:visible}
.hero-slot h2{font-size:var(--t-display);line-height:.92;letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96;color:var(--papier);max-width:none}
.hero-slot .regel{display:block;overflow:hidden;padding-bottom:.06em}
.hero-slot .r{display:inline-block}
.slot-rest{display:grid;gap:var(--s4)}
.hero-slot .lede{font-size:var(--t-lede);line-height:1.5;max-width:46ch;color:var(--op-donker)}
.hero.film .hero-slot{position:absolute;inset:0;z-index:5;display:grid;align-items:center;padding:calc(var(--kop-h) + var(--s4)) 0 var(--s5);clip-path:inset(100% 0 0 0)}

@media (max-height:820px) and (min-width:901px){
  .slot-veld{width:110px}
  .hero-slot h2{font-size:var(--t-display)}
  .slot-binnen,.slot-rest{gap:var(--s3)}
}
@media (max-width:900px){
  .hero-inhoud{grid-template-columns:1fr;align-content:start;gap:var(--s3);padding-top:calc(var(--kop-h) + var(--s3));padding-bottom:var(--s3)}
  .voor-wie{margin-bottom:var(--s2)}
  .hero .lede{margin-top:var(--s2);font-size:var(--t-tekst);max-width:34ch}
  .hero-tekst .knoppen{margin-top:var(--s3)}
  .hero .knop{padding:var(--s2) var(--s3);font-size:var(--t-klein)}
  .hero-tekst .feiten{display:none}
  .marinde-naam{display:none}
  .speelveld-wrap{max-width:min(460px,max(240px,calc((100svh - 480px) * 600 / 760)))}
}