/* Proeftuin twee — nog acht bewegingen.
   Bouwt voort op lab.css. Alles op transform, opacity en clip-path. */

.doek.hoog{min-height:clamp(420px,62vh,620px);align-items:stretch;padding:0}

/* 09 — kaarten die op elkaar stapelen */
.stapelkaarten{width:100%;padding:1.25rem}
.sk{
  position:sticky;
  background:var(--grond-op);
  border:1px solid var(--lijn);
  border-radius:14px;
  padding:clamp(1.25rem,3vw,2rem);
  margin-bottom:1rem;
  box-shadow:0 -6px 24px rgba(0,0,0,.35);
}
/* Elke volgende kaart blijft een stukje lager plakken, zodat de rand van de
   vorige zichtbaar blijft. Anders zie je niet dat er een stapel is. */
.sk:nth-child(1){top:1rem}
.sk:nth-child(2){top:2.5rem}
.sk:nth-child(3){top:4rem}
.sk:nth-child(4){top:5.5rem}
.sknr{font-family:var(--kop);font-size:.875rem;color:var(--goud);letter-spacing:.16em}
.sk h3{font-family:var(--kop);font-weight:400;font-size:clamp(1.25rem,2.6vw,1.75rem);
  margin:.375rem 0 .5rem;color:var(--deeg)}
.sk p{margin:0;font-size:.9375rem;color:var(--deeg-zacht)}

/* 10 — woorden die opkomen */
.opkomer{margin:0;font-family:var(--kop);color:var(--deeg);text-align:center;
  font-size:clamp(1.75rem,5.5vw,3.25rem);line-height:1.15;max-width:16ch}
.opkomer .w{display:inline-block;opacity:0;transform:translateY(.6em);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.opkomer .w.aan{opacity:1;transform:none}
html:not(.js) .opkomer .w{opacity:1;transform:none}

/* 11 — tellend cijfer */
.tellers{display:grid;gap:clamp(1.25rem,4vw,2.5rem);text-align:center;
  grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));width:100%}
.teller{display:block;font-family:var(--kop);color:var(--deeg);line-height:1;
  font-size:clamp(1.75rem,5vw,3rem);font-variant-numeric:tabular-nums}
.tellers em{display:block;margin-top:.5rem;font-style:normal;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(201,191,175,.75)}

/* 12 — magnetische knop */
.magneetvlak{display:grid;place-items:center;width:100%;min-height:9rem}
.magneetknop{
  font:inherit;font-size:.9375rem;font-weight:600;
  background:var(--goud);color:#17130C;border:0;border-radius:999px;
  padding:.9375rem 1.75rem;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .2s ease;
  will-change:transform;
}
.magneetknop:hover{background:var(--goud-licht)}
.magneetknop:focus-visible{outline:2px solid var(--goud-licht);outline-offset:4px}

/* 13 — zaklamp.
   Zonder aanwijzer is er geen masker: op een aanraakscherm staat de foto
   gewoon open, want iets verstoppen dat je niet kunt onthullen is een val. */
.zaklamp{position:relative;width:100%;border-radius:10px;overflow:hidden}
.zaklamp img{width:100%;height:auto;display:block}
@media (hover:hover) and (pointer:fine){
  html.js .zaklamp img{
    filter:brightness(.22);
    transition:filter .3s ease;
  }
  html.js .zaklamp::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:var(--beeld);
    background-size:cover;background-position:center;
    -webkit-mask-image:radial-gradient(circle 8rem at var(--mx,50%) var(--my,50%),
      #000 0%,#000 42%,transparent 72%);
    mask-image:radial-gradient(circle 8rem at var(--mx,50%) var(--my,50%),
      #000 0%,#000 42%,transparent 72%);
    opacity:0;transition:opacity .25s ease;
  }
  html.js .zaklamp.aan::after{opacity:1}
}

/* 14 — achtergrond die van kleur wisselt */
.kleurdoek{transition:background-color .12s linear}
.kleurtekst{margin:0;font-family:var(--kop);font-size:clamp(1.5rem,4vw,2.5rem);
  color:var(--deeg);text-align:center}

/* 15 — lijn die zichzelf tekent */
.tekenlijn{width:min(100%,20rem);height:auto;color:var(--goud)}
html.js .tekenlijn path{stroke-dasharray:var(--lengte);stroke-dashoffset:var(--lengte)}

/* 16 — slepen met terugveren */
.sleepvlak{display:grid;place-items:center;width:100%;min-height:14rem;
  touch-action:none;cursor:grab}
.sleepvlak:active{cursor:grabbing}
.sleepvlak img{width:min(58%,240px);height:auto;user-select:none;
  filter:brightness(.85) drop-shadow(0 18px 36px rgba(0,0,0,.55));
  will-change:transform}

@media(prefers-reduced-motion:reduce){
  .sk{position:static;top:auto !important}
  .opkomer .w{opacity:1 !important;transform:none !important}
  html.js .tekenlijn path{stroke-dashoffset:0 !important}
  html.js .zaklamp img{filter:none !important}
  html.js .zaklamp::after{display:none}
  .magneetknop,.sleepvlak img{transform:none !important}
  .kleurdoek{transition:none}
}