/* vincentvanderburg.nl - interactielaag v1 - staat bewust als laatste in de cascade */

:root{ --dimmer:#7E848E; }           /* was #6C727C: 3,84:1 op panel, nu 4,94:1 */

/* ---------- 1. voortgangsbalk ---------- */
.sprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.sprog i{display:block;height:100%;background:var(--amber);transform:scaleX(var(--sp,0));transform-origin:0 50%}

/* ---------- 2. scroll spy ---------- */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav-links a.cur{color:var(--ink)}
.nav-links a.cur::after{transform:scaleX(1)}

/* ---------- 3. tellende cijfers ---------- */
.tel{font-variant-numeric:tabular-nums}

/* ---------- 4. trage zoom op de hero ---------- */
.js .hero-art img{transform-origin:100% 12%;animation:vvZoom 24s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes vvZoom{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ---------- 5. rijvulling op de lezingen ---------- */
/* alleen waar een muis is en waar de wrap 28px padding heeft, anders steekt de vulling
   6px buiten het scherm en krijg je horizontaal scrollen op de telefoon */
@media (hover:hover) and (min-width:861px){
  .talk{position:relative;isolation:isolate}
  .talk::before{
    content:"";position:absolute;z-index:-1;inset:0 -24px;border-radius:5px;
    background:var(--ink);opacity:0;transition:opacity .22s ease;
  }
  .talk:hover{background:none}
  .talk:hover::before{opacity:1}
  .talk:hover h3{color:#140D00}
  .talk:hover p{color:#3A4049}
  .talk:hover .num{color:#7A5000}
  .talk:hover .form{color:#7A5000}
  .talk h3::after{
    content:"\2192";display:inline-block;margin-left:0;opacity:0;color:#7A5000;
    transform:translateX(-6px);transition:opacity .22s ease,transform .22s ease,margin .22s ease;
  }
  .talk:hover h3::after{opacity:1;transform:none;margin-left:14px}
}

/* bestaande knelpunten die in deze pass zijn meegenomen */
@media (max-width:1080px){
  .nav-links{gap:18px}
  .nav-links a{font-size:13.5px}
}
@media (max-width:380px){
  .nav .pill{padding:11px 13px;font-size:11.5px}
  .brand{font-size:11.5px;letter-spacing:.1em}
}
/* groter raakvlak zonder de lay-out hoger te maken */
.foot a,.foot-bottom a,.brand,.rows a,.announce a{display:inline-block;padding-block:12px;margin-block:-12px}

/* kaarten: agenda en e-books */
@media (hover:hover){
  .date span.d b, .ebook b{transition:color .2s}
  .date:hover .d b{color:var(--amber)}
  .ebook:hover span{transform:translateX(4px)}
  .ebook span{display:inline-block;transition:transform .2s}
}

/* ---------- 6. voortgangslijn langs de genummerde lezingen ---------- */
@media (min-width:861px){
  .talks{position:relative}
  .talk{position:relative;z-index:1}   /* rij blijft boven de lijn, anders snijdt de lijn door de hovervulling */
  .talks::before{content:"";position:absolute;left:34px;top:0;bottom:0;width:1px;background:var(--line)}
  .talks::after{
    content:"";position:absolute;left:34px;top:0;width:1px;
    height:calc(var(--vul,0) * 100%);background:var(--amber);transition:height .1s linear;
  }
}

/* ---------- 7. kaart- en quote-detail ---------- */
.ebook{position:relative;overflow:hidden}
.ebook::before{
  content:attr(data-nr);position:absolute;right:14px;bottom:-14px;pointer-events:none;
  font-family:var(--sans);font-weight:900;font-size:64px;font-stretch:92%;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px var(--ink);opacity:.07;
}
.ebook > *{position:relative;z-index:1}

.quotes{position:relative}
.quote{position:relative;z-index:1}
.quotes::before{
  content:"\201C";position:absolute;left:-6px;top:-46px;pointer-events:none;z-index:0;
  font-family:var(--sans);font-weight:900;font-size:118px;line-height:1;color:var(--amber);opacity:.13;
}
.revbadge{
  display:inline-flex;align-items:baseline;gap:10px;margin-top:26px;
  background:var(--void);border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.revbadge b{color:var(--amber);font-size:13.5px;letter-spacing:.04em}

/* ---------- rustige weergave ---------- */
@media (prefers-reduced-motion:reduce){
  .sprog{display:none}
  .js .hero-art img{animation:none}
  .nav-links a::after,.talk::before,.talks::after,.ebook span,.talk h3::after{transition:none}
}