/* ============================================================
   HET SYSTEEM — gedeeld door alle secties
   Nagebouwd van thepatchsystem.com, in sumi / amber / wit.
   Elke sectie linkt dit bestand en voegt alleen zijn eigen deel toe.
   ============================================================ */

:root{
  /* --- kleur --- */
  --sumi:      #1C1A17;   /* Patch #1f00ff — paneel, rand, tekst op wit, actieve staat */
  --amber:     #DFA53A;   /* Patch #ff622b — UITSLUITEND knoppen */
  --papier:    #FFFFFF;   /* Patch #d3d3d3 — de grote lappen */
  --grijs:     #D3D3D3;   /* inactieve tekst */
  --actief:    var(--sumi);           /* zet op var(--amber) voor meer pit */
  --lijn-licht:rgba(255,255,255,.5);  /* hairline op sumi */

  /* --- letter ---
     Saira Condensed 900 is de dichtste vrije benadering van PP Right Grotesk
     Compact Dark: kapitaal .69em vs .68em, en "WERKT OP ELKE" is 5.75em breed
     vs 5.76em. Daardoor werken Patch' regelafstanden én regellengtes 1-op-1.
     Meting: ref/fonttest.html + ref/shots/fonttest.png */
  --font-display:'Saira Condensed','Arial Narrow',sans-serif;
  --display-gewicht:900;

  /* --- maat --- */
  --raster:    9.44rem;
  --radius:    .5rem;
  --marge:     1.5rem;    /* de inspringing van elk paneel */

  /* --- beweging --- */
  --ease-huis: cubic-bezier(.5,0,.25,1);   /* alles wat verschuift */
  --ease-snap: cubic-bezier(0,0,0,1);      /* woorden, lijnen: harde klap */
  --ease-zwaai:cubic-bezier(.5,0,0,1);     /* de draaiende diagonaal */
}

/* --- de rem-basis: één regel schaalt de hele pagina --- */
html{ font-size:.6613756614vw; }
@media screen and (orientation:portrait) and (max-width:800px){
  html{ font-size:2.6666666667vw; }
}
/* Patch rekent ook in liggende stand met vw. Op een telefoon in de zij
   (812 x 375) wordt 1rem dan 21,6px in plaats van 10 -- alles verdubbelt
   terwijl er nog maar 375px hoogte over is. Hier vw -> vh: 2.6667% van
   375px is precies diezelfde 10px, dus de opmaak houdt zijn maat en de
   korte kant is de maat die telt. */
@media screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  html{ font-size:2.6666666667vh; }
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:Archivo,-apple-system,sans-serif;
  font-size:1.9rem;          /* Patch draait 1.5rem; wij 1.9 voor een oudere lezer */
  line-height:1.5;
  color:var(--sumi);
  background-color:var(--papier);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%231C1A17' stroke-opacity='.17' stroke-width='1' stroke-dasharray='3 5'/%3E%3C/svg%3E");
  background-size:var(--raster) var(--raster);
  background-position:-6.22rem 3.22rem;
  -webkit-font-smoothing:antialiased;
}

/* soepel scrollen voor ankers ("terug naar boven"); uit bij bewegingsrem */
html{ scroll-behavior:smooth; }
html.no-anima{ scroll-behavior:auto; }

/* het sumi paneel met eigen raster — hero, stappen, cijfers */
.paneel-sumi{
  background-color:var(--sumi);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23FFFFFF' stroke-opacity='.20' stroke-width='1' stroke-dasharray='3 5'/%3E%3C/svg%3E");
  background-size:var(--raster) var(--raster);
  background-position:-6.22rem 3.22rem;
}

/* ============ TYPOGRAFIE ============ */
.h1,.h2,.subheading,.knop{
  font-family:var(--font-display);
  font-weight:var(--display-gewicht);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0;
}
.h1{ font-size:16rem; line-height:.85; }
.h2{ font-size:14rem; line-height:.85; }
.subheading{ font-size:2.5rem; letter-spacing:.03em; line-height:.94; }
.subheading--small{ font-size:1.8rem; }
.body{ font-size:1.9rem; line-height:1.5; margin:0; }
.body--klein{ font-size:1.5rem; }

/* Kapitalen met accent (É, Ë, Ï) steken tot .91em uit waar een gewone
   kapitaal op .69em stopt. Krap gezette displaytekst botst daar alsnog.
   Zet deze klasse op de regel die zo'n letter draagt. */
.met-accent{ line-height:1 !important; }

/* ============ HET RASTER VAN BLOKKEN ============ */
.grid{ display:flex; gap:var(--marge); }
.col{ flex:1; }
.block{
  position:relative; flex:1; min-height:5rem;
  background-color:var(--papier);
  border:1px solid var(--sumi);
  border-radius:var(--radius);
  color:var(--sumi);
}

/* ============ KNOP ============ */
.knop{
  display:inline-block;
  font-size:1.8rem; letter-spacing:.03em; line-height:1;
  background:var(--amber); color:var(--sumi);
  border:1px solid var(--amber); border-radius:var(--radius);
  padding:1.4rem 2.2rem 1.2rem; text-decoration:none; cursor:pointer;
  transition:background .18s linear, color .18s linear;
}
.knop:hover{ background:transparent; color:var(--amber); }
.knop--op-wit:hover{ color:var(--sumi); border-color:var(--sumi); }
/* op een amber vlak kan de amber knop niet; dan wordt hij sumi */
.knop--op-amber{ background:var(--sumi); color:var(--papier); border-color:var(--sumi); }
.knop--op-amber:hover{ background:transparent; color:var(--sumi); }

/* ============ ONDERSTREPING DIE MEEVEEGT ============
   Patch' `underlink`: het streepje veegt bij hover van links in en bij
   vertrek naar rechts uit. Dat doen ze met een omslag van transform-origin. */
.underlink{ position:relative; display:inline-block; text-decoration:none; color:inherit; }
.underlink::after{
  content:""; position:absolute; left:0; bottom:.1em;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease-huis);
}
.underlink:hover::after,
.underlink:focus-visible::after{
  transform:scaleX(1); transform-origin:left;
  transition:transform .3s var(--ease-snap);
}

/* ============================================================
   HET REVEAL-SYSTEEM
   .scroll = trigger-sectie · .anima -> .in via _motor.js
   vertraging = data-anima-delay * 50ms + 100ms
   html.no-anima = noodrem (prefers-reduced-motion)
   ============================================================ */

html:not(.no-anima) .fade.anima{ opacity:0; }
html:not(.no-anima) .fade.anima.in{ opacity:1; transition:opacity .9s linear; }

html:not(.no-anima) .fadeUp.anima{ opacity:0; transform:translateY(3rem); }
html:not(.no-anima) .fadeUp.anima.in{
  opacity:1; transform:translateY(0);
  transition:opacity .3s ease-in-out, transform .5s var(--ease-snap);
}
html:not(.no-anima) .stagger.anima:nth-child(1){ transition-delay:66ms }
html:not(.no-anima) .stagger.anima:nth-child(2){ transition-delay:132ms }
html:not(.no-anima) .stagger.anima:nth-child(3){ transition-delay:198ms }
html:not(.no-anima) .stagger.anima:nth-child(4){ transition-delay:264ms }
html:not(.no-anima) .stagger.anima:nth-child(5){ transition-delay:330ms }
html:not(.no-anima) .stagger.anima:nth-child(6){ transition-delay:396ms }
html:not(.no-anima) .stagger.anima:nth-child(7){ transition-delay:462ms }
html:not(.no-anima) .stagger.anima:nth-child(8){ transition-delay:528ms }
html:not(.no-anima) .stagger.anima:nth-child(9){ transition-delay:594ms }
html:not(.no-anima) .stagger.anima:nth-child(10){ transition-delay:660ms }
html:not(.no-anima) .stagger.anima:nth-child(11){ transition-delay:726ms }
html:not(.no-anima) .stagger.anima:nth-child(12){ transition-delay:792ms }
html:not(.no-anima) .stagger.anima:nth-child(13){ transition-delay:858ms }
html:not(.no-anima) .stagger.anima:nth-child(14){ transition-delay:924ms }

/* --- de kop-cascade: woorden kantelen omhoog --- */
html:not(.no-anima) .h-anim{ opacity:0; }
html:not(.no-anima) .h-anim.in{ opacity:1; }
.h-anim .h-line{
  position:relative; display:block; overflow:hidden;
  perspective:200vw; transform-style:preserve-3d;
  padding:0 5rem; margin:0 -5rem;   /* anders knipt overflow de zijkanten af */
  white-space:nowrap;               /* HARDE EIS: ±19 tekens per regel op 16rem */
}
html:not(.no-anima) .h-anim .h-word{
  display:inline-block;
  transform:translateY(75%) rotateX(-88deg);
  transform-origin:50% 75%;
  transform-style:preserve-3d;
}
html:not(.no-anima) .h-anim.in .h-word{
  transform:translateY(0) rotateX(0);
  transition:transform .7s var(--ease-snap);
}
/* 100ms per woord; regel 2 start op .3s, regel 3 op .6s */
.h-anim.in .h-line:nth-child(1) [data-i="1"]{transition-delay:0s}
.h-anim.in .h-line:nth-child(1) [data-i="2"]{transition-delay:.1s}
.h-anim.in .h-line:nth-child(1) [data-i="3"]{transition-delay:.2s}
.h-anim.in .h-line:nth-child(1) [data-i="4"]{transition-delay:.3s}
.h-anim.in .h-line:nth-child(1) [data-i="5"]{transition-delay:.4s}
.h-anim.in .h-line:nth-child(1) [data-i="6"]{transition-delay:.5s}
.h-anim.in .h-line:nth-child(1) [data-i="7"]{transition-delay:.6s}
.h-anim.in .h-line:nth-child(1) [data-i="8"]{transition-delay:.7s}
.h-anim.in .h-line:nth-child(2) [data-i="1"]{transition-delay:.3s}
.h-anim.in .h-line:nth-child(2) [data-i="2"]{transition-delay:.4s}
.h-anim.in .h-line:nth-child(2) [data-i="3"]{transition-delay:.5s}
.h-anim.in .h-line:nth-child(2) [data-i="4"]{transition-delay:.6s}
.h-anim.in .h-line:nth-child(2) [data-i="5"]{transition-delay:.7s}
.h-anim.in .h-line:nth-child(2) [data-i="6"]{transition-delay:.8s}
.h-anim.in .h-line:nth-child(2) [data-i="7"]{transition-delay:.9s}
.h-anim.in .h-line:nth-child(2) [data-i="8"]{transition-delay:1s}
.h-anim.in .h-line:nth-child(3) [data-i="1"]{transition-delay:.6s}
.h-anim.in .h-line:nth-child(3) [data-i="2"]{transition-delay:.7s}
.h-anim.in .h-line:nth-child(3) [data-i="3"]{transition-delay:.8s}
.h-anim.in .h-line:nth-child(3) [data-i="4"]{transition-delay:.9s}
.h-anim.in .h-line:nth-child(3) [data-i="5"]{transition-delay:1s}

/* Op een telefoon is 5rem perspectiefruimte (50px) een tiende van het
   scherm; 2rem is genoeg. En daar MOET een kop wel afbreken -- nowrap is
   een desktopwaarschuwing voor te lange copy, geen mobiele regel. */
@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .h-anim .h-line{ white-space:normal; padding:0 2rem; margin:0 -2rem; }
}

/* ============================================================
   HERBRUIKBARE ONDERDELEN
   ============================================================ */

/* --- het labelkaartje dat zichzelf in elkaar zet --- */
.sectionBlock{ color:var(--sumi); overflow:hidden; }
.sectionBlock__top{
  height:5.8rem; border-bottom:1px solid var(--sumi);
  display:flex; justify-content:space-between; align-items:center;
  padding-left:2.2rem; overflow:hidden; transform:translateY(10rem);
}
.sectionBlock__top span{ display:inline-block; position:relative; transform:translateX(-100%); }
.sectionBlock__top .subheading{ font-size:2rem; }
.sectionBlock__icon{
  display:flex; min-width:8.8rem; max-width:8.8rem; height:100%;
  border-left:1px solid var(--sumi);
  justify-content:center; align-items:center; padding:1.2rem;
  transform:translateX(-29rem);
}
.sectionBlock__icon img,
.sectionBlock__icon svg{ object-fit:contain; width:100%; height:100%; transform:translateY(-6rem); }
.sectionBlock__bottom{ padding:1.8rem 2.2rem 2.3rem; transform:translateY(100%); }

html:not(.no-anima) .sectionBlock.in .sectionBlock__top{
  transform:translateY(0); transition:transform .5s var(--ease-snap); }
html:not(.no-anima) .sectionBlock.in .sectionBlock__top span{
  transform:translateX(0); transition:transform .6s .4s var(--ease-huis); }
html:not(.no-anima) .sectionBlock.in .sectionBlock__icon{
  transform:translateX(0); transition:transform .5s .3s var(--ease-snap); }
html:not(.no-anima) .sectionBlock.in .sectionBlock__icon img,
html:not(.no-anima) .sectionBlock.in .sectionBlock__icon svg{
  transform:translateY(0); transition:transform .6s .5s var(--ease-huis); }
html:not(.no-anima) .sectionBlock.in .sectionBlock__bottom{
  transform:translateY(0); transition:transform .6s .6s var(--ease-huis); }

/* --- het genummerde hoekvak met de draaiende diagonaal --- */
.sectionCounter{
  width:9.5rem; height:9.5rem; border:1px solid var(--sumi);
  position:absolute; overflow:hidden; counter-increment:sec;
}
.sectionCounter::after{
  content:"0" counter(sec);
  font-family:var(--font-display); font-weight:var(--display-gewicht); font-size:3.4rem; color:var(--sumi);
  position:absolute; bottom:.5rem; left:.5rem; transform:translateY(5rem);
}
.sectionCounter::before{
  content:""; position:absolute; top:50%; margin-top:-2px;
  height:1px; width:200%; left:-50%;
  transform:rotate(-135deg); border-bottom:1px solid var(--sumi);
}
html:not(.no-anima) .sectionCounter.in::before{
  transform:rotate(45deg); transition:transform 1s var(--ease-zwaai); }
html:not(.no-anima) .sectionCounter.in::after{
  transform:translateY(0); transition:transform .6s .2s var(--ease-huis); }

/* ============ DE NOODREM ============ */
html.no-anima .h-anim,
html.no-anima .fadeUp.anima{ opacity:1; }
html.no-anima .h-word,
html.no-anima .fadeUp.anima,
html.no-anima .sectionBlock__top,
html.no-anima .sectionBlock__top span,
html.no-anima .sectionBlock__icon,
html.no-anima .sectionBlock__icon img,
html.no-anima .sectionBlock__icon svg,
html.no-anima .sectionBlock__bottom,
html.no-anima .sectionCounter::after{ transform:none; }
html.no-anima .sectionCounter::before{ transform:rotate(45deg); }

/* ============ HULPKLASSEN ============ */
/* wel voor een schermlezer, niet in beeld */
.u-verborgen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============ DEMO-BEDIENING (hoort niet bij het ontwerp) ============ */
.demo{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:99;
  display:flex; gap:.8rem; align-items:center;
}
.demo button{
  font-family:var(--font-display); font-weight:var(--display-gewicht); font-size:1.4rem;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--amber); color:var(--sumi); border:none;
  border-radius:var(--radius); padding:1rem 1.6rem .8rem; cursor:pointer;
}
.demo button:hover{ background:#fff; box-shadow:0 0 0 1px var(--sumi); }