/* ============================================================
   DEEL 3 — GEDEELDE BASIS (de drie kaarten die openklappen)
   ------------------------------------------------------------
   Het vlak zelf, de kop, de drie kaarten en de tellers. Beide
   varianten laden dit bestand en zetten er alleen hun eigen
   klap-mechaniek bovenop (scharnier, perspectief, volgorde).

   Maten die het regelpaneel bijstelt komen binnen als custom
   properties op :root — --k-perspectief, --k-breedte, --k-hoogte,
   --k-tussen. Alles wat tekst is loopt via typografie.css.
   ============================================================ */

/* ============================================================
   HET VLAK
   Effen wit, net als de lamellen die er net overheen gingen
   (--stripe), zodat het vlak naadloos onder het lamellenvlak
   vandaan komt. Het trionn-verloop naar #D2D2D2 is eruit
   (Leon, 8/9 sep 2026).
   ============================================================ */
#klapvlak{
  position:relative;z-index:20;
  min-height:100dvh;
  background:#FFFFFF;   /* effen wit: de lamellen erboven zijn ook wit (Leon, 9 sep) */
  color:var(--lijn-d);
  padding:var(--sp-sectie-top-ruim) 0 var(--sp-sectie-bot-ruim);
  overflow-x:clip;
}

/* --- kop ---------------------------------------------------- */
#klapvlak .kopblok{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.5rem;margin-bottom:var(--sp-blok);
}
#klapvlak .kopblok h2{color:var(--lijn-d)}
#klapvlak .kopblok h2 .punt{color:var(--rood)}   /* de rode punt, zoals bij CADviTool. */
#klapvlak .kopblok .sub{color:#5c5c5c;font-size:var(--fs-klein);line-height:var(--lh-klein)}
/* woorden van de kop worden door de JS in .w gewikkeld */
#klapvlak .kopblok .w{display:inline-block;will-change:transform,filter,opacity}

/* ============================================================
   DE RIJ — het 3D-veld waarin de kleppen hangen
   ============================================================ */
.kaartenrij{
  perspective:var(--k-perspectief,1400px);
  transform-style:preserve-3d;
  display:flex;gap:var(--k-tussen,1.5rem);
  justify-content:center;align-items:flex-start;
}
/* groeien tot de ingestelde breedte, maar meekrimpen zodra de rij
   niet meer past — anders loopt de buitenste kaart het vlak uit */
.klapkaart{
  flex:1 1 0;min-width:0;
  width:100%;max-width:var(--k-breedte,24.75rem);
  height:var(--k-hoogte,30.5rem);
  border-radius:.5rem;
  overflow:hidden;position:relative;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
/* de inhoud staat boven het beeld en houdt de kaart in drie banen:
   titel boven, beeld/cijfer in het midden, regel onderin */
.klapkaart .binnen{
  position:relative;z-index:2;height:100%;
  padding:clamp(1.6rem,2.4vw,2.5rem);
  display:flex;flex-direction:column;justify-content:space-between;
}
.k-titel{
  font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);line-height:var(--lh-mono);
  text-transform:lowercase;display:block;
}
.k-regel{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.k-noot{font-size:var(--fs-klein);line-height:var(--lh-klein);opacity:.8}

/* ============================================================
   TELLER — rolstrook met cijfers, zoals de odometer op trionn
   ============================================================ */
.teller{
  display:inline-flex;align-items:flex-start;
  font-family:var(--disp);font-size:var(--fs-h3);
  line-height:1;letter-spacing:var(--ls-h3);
  font-variant-numeric:tabular-nums;
}
.teller .rol{position:relative;display:inline-flex;overflow:hidden}
.teller .kolom{display:flex;flex-direction:column;will-change:transform}
.teller .kolom span,.teller .vast{
  display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.teller .plus{font-size:.62em;margin-left:.08em;translate:0 .1em}

/* ============================================================
   KAART 1 — de suite (donker vlak met driftende profiellijn)
   ============================================================ */
.klapkaart.suite{background:var(--donker);color:var(--licht)}
/* de profiellijn ligt als een band over het midden van de kaart —
   niet over de hele hoogte, anders wordt de tekening uitgerekt */
.klapkaart.suite .tekenvlak{
  position:absolute;left:0;right:0;top:26%;height:34%;z-index:1;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.klapkaart.suite .tekenvlak svg{width:200%;height:100%;animation:drift 46s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* de merknamen wisselen elkaar af, zoals de awards-logo's op trionn */
.merkrol{position:relative;height:2.4em;margin-bottom:.7rem}
.merkrol span{
  position:absolute;left:0;bottom:0;opacity:0;
  font-family:var(--disp);font-size:var(--fs-h4);
  letter-spacing:var(--ls-h4);line-height:1.1;white-space:nowrap;
}

/* ============================================================
   KAART 2 — de lagen (crème, cijfer gecentreerd op een witte schijf)
   ============================================================ */
.klapkaart.lagen{background:var(--creme);color:var(--lijn-d);text-align:center}
.klapkaart.lagen .midden{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;
}
.klapkaart.lagen .schijf{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:12.5rem;height:12.5rem;border-radius:50%;background:#fff;
}
.klapkaart.lagen .teller{position:relative;z-index:2;font-size:var(--fs-h2-klein)}
.klapkaart.lagen .k-noot{opacity:.8}

/* ============================================================
   KAART 3 — de werkomgeving (donkergrijs met kaartfragment)
   ============================================================ */
.klapkaart.omgeving{background:#2F3135;color:var(--licht)}
.klapkaart.omgeving .k-titel{text-align:right}
.klapkaart.omgeving .beeld{
  flex:1;margin-block:clamp(1rem,2vw,1.8rem);
  border-radius:.25rem;overflow:hidden;position:relative;background:#26282b;
}
.klapkaart.omgeving .beeld img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.05) brightness(.92);
  transform:scale(1.01);
}
.klapkaart.omgeving .beeld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(47,49,53,.15) 0%,rgba(47,49,53,.55) 100%);
}
.klapkaart.omgeving .k-noot{color:rgba(216,216,216,.6)}

/* ============================================================
   ONDERSTROOK — waar het gereedschap op staat
   (de tegenhanger van hun "our business partners")
   ============================================================ */
.grondslag{
  margin-top:clamp(4rem,8vw,7.5rem);
  display:flex;flex-direction:column;gap:1.6rem;align-items:center;
}
.grondslag .kop{
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:lowercase;color:#767676;
}
.grondslag .lijst{
  display:flex;flex-wrap:wrap;justify-content:center;
  border-left:1px solid rgba(67,67,67,.15);
}
.grondslag .lijst span{
  padding-inline:clamp(1rem,2.4vw,2.5rem);padding-block:.5rem;
  border-right:1px solid rgba(67,67,67,.15);
  font-family:var(--disp);font-size:var(--fs-h4);letter-spacing:var(--ls-h4);color:#5c5c5c;
}

/* ============================================================
   AANLOOP EN UITLOOP — alleen voor deze studie
   ============================================================ */
.loop{position:relative;min-height:100dvh;display:flex;align-items:flex-end;padding-block:clamp(3rem,7vw,5rem)}
.loop .binnen{display:flex;justify-content:space-between;align-items:flex-end;width:100%;gap:2rem;flex-wrap:wrap}
.loop h2{font-size:var(--fs-h2-klein)}
.loop.voor{background:var(--donker);color:var(--licht)}
.loop.voor .mono{color:var(--grijs)}
/* de laatste lamel blijft als grijze zoom staan: daar komt het vlak onder vandaan */
.loop.voor::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--stripe)}
.loop.na{background:linear-gradient(0deg,#C3C3C3 0%,#FFFFFF 100%);color:var(--lijn-d);align-items:center;min-height:70dvh}
.loop.na .mono{color:#767676}

/* fotostand: alleen het vlak zelf in beeld */
body.fotostand .loop{display:none}
body.fotostand #klapvlak{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}

/* ============================================================
   SMALLE SCHERMEN
   Trionn pint hier een horizontale strook; voor de studie houden
   we het eerlijk en eenvoudig: de kaarten staan onder elkaar en
   klappen elk voor zich open (de mechaniek zelf blijft zichtbaar).
   ============================================================ */
@media(max-width:900px){
  .kaartenrij{flex-direction:column;align-items:center;gap:clamp(1.5rem,4vw,2.5rem)}
  .klapkaart{flex:0 0 auto;width:100%;max-width:min(28rem,100%);height:auto;min-height:26rem}
  .klapkaart.lagen .schijf{width:10rem;height:10rem}
}

@media(prefers-reduced-motion:reduce){
  .klapkaart.suite .tekenvlak svg{animation:none}
}

/* ============================================================
   FASEBALK IN HET REGELPANEEL — alleen voor deze studie
   (de rest van het paneel staat in deel-2-basis.css)
   ============================================================ */
#fasebalk{position:relative;height:26px;margin:.2rem 0 .55rem;border:1px solid rgba(216,216,216,.18);border-radius:3px;overflow:hidden;display:flex}
#fasebalk .vak{position:relative;flex:1;display:flex;align-items:center;justify-content:center;font-size:.5rem;letter-spacing:.04em;color:var(--grijs)}
#fasebalk .naald{position:absolute;top:0;bottom:0;width:1px;background:var(--rood);left:0}
#hud{display:grid;grid-template-columns:1fr;gap:.3rem;margin-top:.4rem;color:var(--grijs);font-variant-numeric:tabular-nums}
#hud b{display:block;color:var(--licht);font-weight:400}