/* Cases als geanimeerde beeldfragmenten — opzet naar Codrops' Animated Image Pieces */
.cp{--cp-kleur:#E8294A;position:relative;max-width:1180px;margin:0 auto;
  display:flex;flex-direction:column-reverse;
  overflow:hidden;border-radius:18px;}

/* paneel met de fragmenten */
.cp-paneel{position:relative;border-radius:18px;width:100%;aspect-ratio:3/2;}
.cp-pieces{position:absolute;inset:0;border-radius:18px;overflow:hidden;}
.cp-stuk{position:absolute;background-repeat:no-repeat;pointer-events:none;
  will-change:transform,opacity;filter:grayscale(.32) contrast(1.06) saturate(1.14);}
.cp-tint{position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,var(--cp-kleur) 0%,transparent 58%),
             linear-gradient(330deg,rgba(15,14,12,.6) 0%,transparent 62%);
  mix-blend-mode:soft-light;opacity:.9;transition:background .5s ease;}
.cp-scrim{position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:3;
  display:none;background:linear-gradient(180deg,rgba(15,14,12,.5) 0%,
  rgba(15,14,12,.2) 44%,rgba(15,14,12,.72) 100%);}
.cp-rand{position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:4;
  border:1px solid transparent;}
.cp-link{position:absolute;inset:0;z-index:5;border-radius:18px;display:block;
  text-decoration:none;outline-offset:4px;}
.cp-link::after{content:"Bekijk case \2192";position:absolute;right:20px;bottom:20px;
  padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.22);color:#0F0E0C;font-size:11px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;opacity:0;transform:translateY(6px);
  transition:opacity .2s,transform .2s;}
.cp-link:hover::after,.cp-link:focus-visible::after{opacity:1;transform:translateY(0);}

/* tekst */
.cp-tekst{position:relative;z-index:6;pointer-events:none;margin:0 0 22px;padding:0 4px;
  display:flex;flex-direction:column;justify-content:space-between;}
.cp-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono,monospace);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-subtle,#6B6866);}
.cp-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#E8294A;}
.cp-titel{font-family:var(--ff-disp,sans-serif);font-weight:800;letter-spacing:-2px;
  line-height:.9;margin:14px 0 0;color:var(--c-ink,#0F0E0C);font-size:clamp(30px,8.2vw,42px);}

/* namen achter elkaar, gescheiden door //, chiptekst lichter */
.cp-lijst{pointer-events:auto;margin-top:16px;font-size:16px;}
.cp-item{display:inline;padding:0;margin:0;border:none;background:none;cursor:pointer;
  font-family:var(--ff-disp,sans-serif);font-weight:800;letter-spacing:-.6px;
  line-height:1.24;color:rgba(15,14,12,.34);transition:color .2s ease;}
.cp-item:hover{color:rgba(15,14,12,.72);}
.cp-item.is-actief{color:#0F0E0C;}
.cp-item:not(:last-child)::after{content:"\00a0//\00a0";font-weight:400;letter-spacing:0;
  color:rgba(15,14,12,.2);}
.cp-item-c{font-weight:400;letter-spacing:-.2px;opacity:.55;margin-left:.32em;}
.cp-item.is-actief .cp-item-c{opacity:.66;}
.cp-item:focus-visible{outline:2px solid #E8294A;outline-offset:3px;border-radius:4px;}

/* desktop: beeld vult de sectie, tekst eroverheen */
@media(min-width:820px){
  .cp{min-height:min(78vh,640px);display:flex;flex-direction:row;}
  .cp-paneel{position:absolute;inset:0;width:auto;aspect-ratio:auto;}
  .cp-scrim{display:block;}
  .cp-tekst{flex:1;margin:0;padding:42px 46px;}
  .cp-eyebrow{color:rgba(255,255,255,.72);}
  .cp-titel{color:#fff;font-size:clamp(52px,7vw,84px);}
  .cp-lijst{margin-top:0;font-size:clamp(19px,2.4vw,32px);max-width:86%;}
  .cp-item{color:rgba(255,255,255,.4);}
  .cp-item:hover{color:rgba(255,255,255,.8);}
  .cp-item.is-actief{color:#fff;}
  .cp-item:not(:last-child)::after{color:rgba(255,255,255,.22);}
}
@media (prefers-reduced-motion:reduce){.cp-link::after{transition:none;}}