/* Studio Mierenwerk - contact: het nest draagt je kaart.
   De tekst staat op een inktzwarte kaart op het rode vlak. Daaronder een rij mieren uit het
   pakket (papier), om en om gespiegeld, die de kaart op hun opgeheven arm dragen. Komt de
   sectie in beeld, dan tillen ze de kaart 10 px op (harde schaduw in papier) en zetten zich
   schrap (2 px omlaag, om en om met 60 ms). Bij hover of focus op de knop wiegt de kaart een
   keer. Verder beweegt hier niets: de merkregel is "alleen bewegen als er iets gebeurt".

   Maten in een oogopslag:
   --nest-mier      hoogte van een mier (44 px)
   --nest-overlap   hoeveel de mierenrij achter de kaart schuift in rust (20 px). Na het optillen
                    (kaart -10, mieren +2) blijft 8 px over: precies de antennes, want de armtop
                    ligt op 18% van de hoogte. De kaart rust dan op de arm, de antennes staan
                    achter de kaart.
   --nest-til       stand van de kaart (0 in rust, -10 px opgetild) */

.nest{
  --nest-mier:44px;
  --nest-overlap:20px;          /* 0,45 x de hoogte: dan rust de kaart op de arm */
  --nest-til:0px;
  --nest-schrap:0px;
  position:relative;
  max-width:720px;
  margin:0 auto;
}

/* de kaart: inkt, papieren letters, vierkante hoeken, ruim padding */
.nest-kaart{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
  background:var(--mw-ink); color:var(--mw-paper);
  padding:clamp(28px,5vw,56px);
  transform:translateY(var(--nest-til));
  box-shadow:0 0 0 var(--mw-paper);
  transition:box-shadow .45s var(--mw-ease);
}
.nest-kaart h2{font-size:clamp(36px,4.6vw,60px); text-wrap:balance;}
.nest-kaart p{font-size:16px; max-width:40ch; text-wrap:pretty;}
.nest-kaart .cs-note{font-size:13px; line-height:1.7;}
.nest-kaart .cs-note a{text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:10px 0; margin:-10px 0;}   /* raakvlak 44 px zonder de regel te verschuiven */
.nest-kaart .cs-note a:hover{color:var(--mw-white);}
/* papieren knop op inkt: bij hover een oxide schaduw (inkt op inkt zou onzichtbaar zijn) */
.nest-kaart .mw-button--light:hover{box-shadow:var(--mw-shadow);}
.nest-kaart .mw-button--light:focus-visible{outline-color:var(--mw-paper);}

/* opgetild: 10 px omhoog, harde schaduw in papier (op inkt is een inktschaduw onzichtbaar).
   Het tillen gaat niet in een keer: ze zetten zich schrap, komen half omhoog, zakken door de
   hoeven, en halen het dan net. Dat is de tagline: meer dragen dan we wegen, met moeite. */
.nest.is-getild{--nest-til:-10px; --nest-schrap:2px;}
.nest.is-getild .nest-kaart{animation:nest-zwoeg 1.5s var(--mw-ease) forwards;}
.nest.is-getild .nest-mier{animation:nest-schraag 1.5s var(--mw-ease) forwards; animation-delay:calc(var(--i, 0) * 40ms);}
@keyframes nest-zwoeg{
  0%   {transform:translateY(0);}
  22%  {transform:translateY(-11px);}      /* eerste ruk: bijna te veel */
  38%  {transform:translateY(-4px);}       /* ze zakken door de hoeven */
  56%  {transform:translateY(-13px);}      /* tweede poging, met alles erop */
  70%  {transform:translateY(-7px);}       /* en toch weer een stukje terug */
  100% {transform:translateY(-10px);}      /* net gehaald, en nu stil */
}
@keyframes nest-schraag{
  0%   {transform:translateY(0) scaleX(var(--spiegel,1));}
  22%  {transform:translateY(3px) scaleX(var(--spiegel,1));}
  38%  {transform:translateY(6px) scaleX(var(--spiegel,1));}   /* diep door de poten */
  56%  {transform:translateY(1px) scaleX(var(--spiegel,1));}
  70%  {transform:translateY(4px) scaleX(var(--spiegel,1));}
  100% {transform:translateY(2px) scaleX(var(--spiegel,1));}
}
.nest.is-getild .nest-kaart{box-shadow:6px 6px 0 var(--mw-paper);}

/* de rij mieren: onder de kaart, iets erachter, zodat de antennes wegvallen achter de kaart */
.nest-mieren{
  position:relative; z-index:1;
  display:flex; justify-content:space-evenly; align-items:flex-start;
  margin-top:calc(var(--nest-overlap) * -1);
  padding:0 6%;
  pointer-events:none;
}
.nest-mier{
  display:block; height:var(--nest-mier); width:auto; aspect-ratio:288/330;
  fill:var(--mw-paper);
  transform:translateY(var(--nest-schrap)) scaleX(var(--spiegel,1));
  transition:transform .3s var(--mw-ease);
  transition-delay:calc(var(--i,0) * 60ms);
}
.nest-mier:nth-child(even){--spiegel:-1;}   /* om en om gespiegeld: ze staan naar elkaar toe */
.nest-mier:nth-child(1){--i:0;}
.nest-mier:nth-child(2){--i:1;}
.nest-mier:nth-child(3){--i:2;}
.nest-mier:nth-child(4){--i:3;}
.nest-mier:nth-child(5){--i:4;}
.nest-mier:nth-child(6){--i:5;}
.nest-defs{position:absolute; width:0; height:0; overflow:hidden;}

/* een keer wiegen als de knop wordt aangeraakt: 2 px op en terug, 300 ms */
.nest.is-wieg .nest-kaart{animation:nest-wieg .3s var(--mw-ease) 1;}
@keyframes nest-wieg{
  0%,100%{transform:translateY(var(--nest-til));}
  50%{transform:translateY(calc(var(--nest-til) - 2px));}
}

/* mobiel: kaart volle breedte, vier mieren */
@media(max-width:640px){
  .nest{max-width:none;}
  .nest-kaart{padding:28px 22px 30px;}
  .nest-kaart h2{font-size:clamp(34px,9.6vw,44px);}
  .nest-mieren{padding:0 4%;}
  .nest-mier:nth-child(n+5){display:none;}
}

/* reduced motion: eindstand direct, geen beweging (site.css zet transities al uit) */
@media(prefers-reduced-motion:reduce){
  .nest-kaart, .nest-mier{transition:none;}
  .nest.is-wieg .nest-kaart{animation:none;}
}

/* op een ruim scherm mogen de dragers iets groter, anders zie je ze niet als mieren */
@media(min-width:960px){
  .nest{--nest-mier:58px; --nest-overlap:26px;}
}