/* Proeftuin — acht bewegingstechnieken op het beeld van Ensar Yufka.
   Alles met transform, opacity en clip-path. Geen bibliotheken, dus er gaat
   later niets stuk bij een update van iets anders. */

:root{
  --grond:#0D0B09; --grond-op:#15110E; --deeg:#F3EBDD; --deeg-zacht:#C9BFAF;
  --goud:#C9A227; --goud-licht:#E8CE73; --lijn:rgba(243,235,221,.14);
  --kop:"Cardo",Georgia,serif; --tekst:"Inter",system-ui,sans-serif;
  --breed:min(1180px,100% - 3rem);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--grond);color:var(--deeg);font-family:var(--tekst);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--goud-licht)}
h1,h2{font-family:var(--kop);font-weight:400;line-height:1.08;margin:0}

.labkop{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:1.5rem clamp(1.25rem,4vw,3rem);border-bottom:1px solid var(--lijn)}
.labkop img{height:44px;width:auto}
.labkop p{margin:0;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--deeg-zacht)}

.intro,.slot{width:var(--breed);margin:0 auto;padding:clamp(3rem,9vh,6rem) 0}
.intro h1{font-size:clamp(2.25rem,7vw,4.5rem);margin-bottom:1.5rem}
.intro p,.slot p{max-width:56ch;color:var(--deeg-zacht)}
.klein{font-size:.9375rem;color:rgba(201,191,175,.75)}
.slot{border-top:1px solid var(--lijn)}
.slot h2{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:1rem}

.proef{width:var(--breed);margin:0 auto;padding:clamp(3rem,8vh,5.5rem) 0;
  border-top:1px solid var(--lijn);
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  grid-template-columns:1fr}
@media(min-width:900px){.proef{grid-template-columns:.85fr 1.15fr}}
.nr{font-family:var(--kop);font-size:.9375rem;color:var(--goud);letter-spacing:.2em}
.uitleg h2{font-size:clamp(1.5rem,3vw,2rem);margin:.5rem 0 1rem}
.uitleg p{color:var(--deeg-zacht);font-size:.9375rem;max-width:38ch}
.kost{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--lijn);
  font-size:.875rem;color:rgba(201,191,175,.8)}
.kost b{color:var(--deeg);font-weight:600}

.doek{position:relative;min-height:clamp(280px,42vh,440px);
  display:grid;place-items:center;background:var(--grond-op);
  border:1px solid var(--lijn);border-radius:16px;overflow:hidden;padding:2rem}
.doek.breed{padding:0}

/* 01 — stapel die uit elkaar valt */
.stapel{position:relative;width:min(70%,300px);aspect-ratio:1}
.stapel .s{position:absolute;inset:0;
  filter:brightness(.78) drop-shadow(0 18px 36px rgba(0,0,0,.5));
  transition:transform .1s linear;will-change:transform}

/* 02 — kantelen onder de muis */
.kantel{width:min(70%,290px);perspective:900px}
.kantel img{transition:transform .18s ease-out;will-change:transform;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.55))}

/* 03 — draaiende ring */
.ring{position:relative;width:min(60%,240px);aspect-ratio:1;
  transform-style:preserve-3d;animation:draai 22s linear infinite}
.ring img{position:absolute;inset:0;backface-visibility:hidden;
  filter:brightness(.82) drop-shadow(0 16px 32px rgba(0,0,0,.5))}
.ring img:nth-child(1){transform:rotateY(0deg) translateZ(150px)}
.ring img:nth-child(2){transform:rotateY(90deg) translateZ(150px)}
.ring img:nth-child(3){transform:rotateY(180deg) translateZ(150px)}
.ring img:nth-child(4){transform:rotateY(270deg) translateZ(150px)}
@keyframes draai{to{transform:rotateY(360deg)}}

/* 04 — beeld door de letters heen.
   De kleur eronder is de terugval: kent een browser background-clip niet,
   dan staat er gewoon gouden tekst in plaats van niets. */
.doorletter{font-family:var(--kop);font-size:clamp(3.5rem,13vw,9rem);margin:0;
  letter-spacing:.02em;color:var(--goud-licht);
  background-image:url("/assets/img/hero-deeg.jpg");
  background-size:cover;background-position:center 40%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .doorletter{-webkit-text-fill-color:currentColor;background-image:none}
}

/* 05 — onthullen bij het scrollen.
   Zonder JavaScript staat het beeld gewoon helemaal open; de klasse js wordt
   in de head gezet, dus vóór het eerste schilderen. */
.onthul{width:100%;border-radius:10px;overflow:hidden}
.onthul img{width:100%;height:auto}
html.js .onthul img{clip-path:inset(0 100% 0 0)}

/* 06 — diepte in lagen */
.diepte{position:relative;width:100%;height:clamp(240px,36vh,360px);
  border-radius:10px;overflow:hidden}
.diepte img{position:absolute;will-change:transform}
.diepte .ver{left:0;top:-12%;width:100%;height:124%;object-fit:cover;filter:brightness(.55)}
.diepte .dichtbij{width:42%;left:29%;top:22%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}

/* 07 — band die meeschuift */
.band{display:flex;gap:1rem;padding:1rem;will-change:transform}
.band img{width:min(46vw,320px);height:auto;border-radius:10px;flex:none}

/* 08 — boogvorm */
.boog{width:min(72%,320px);aspect-ratio:3/4;overflow:hidden;
  border-radius:999px 999px 12px 12px}
.boog img{width:100%;height:100%;object-fit:cover;object-position:center 55%}

.labvoet{border-top:1px solid var(--lijn);padding:2rem clamp(1.25rem,4vw,3rem);
  text-align:center;color:rgba(201,191,175,.65);font-size:.875rem}
.labvoet p{margin:0}

/* Alles stopt zodra het besturingssysteem om minder beweging vraagt. Bij de
   ring blijft één vel staan in plaats van vier over elkaar. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .ring{transform:none;animation:none}
  .ring img:not(:first-child){display:none}
  .ring img:first-child{transform:none}
  html.js .onthul img{clip-path:none}
  .stapel .s,.diepte img,.band{transform:none !important}
}