/* 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. pijl bij de lezingen ---------- */
/* de volle vulling is eruit: de basisstijl heeft al een zachte amberzweem op hover */
@media (hover:hover) and (min-width:861px){
  .talk h3::after{
    content:"\2192";display:inline-block;margin-left:0;opacity:0;color:var(--amber);
    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}
}

/* ---------- 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,.ebook span,.talk h3::after{transition:none}
}

.about-grid .head + p{margin-top:34px}
.foot a,.foot-bottom a,.brand,.rows a,.announce a{padding-block:9px;margin-block:-9px}
.foot ul{gap:18px}
.foot > div:nth-child(2) ul{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
@media (min-width:861px){footer{padding-block:46px 26px}.foot{grid-template-columns:1.15fr 1.25fr .9fr;gap:40px}.foot-bottom{margin-top:32px;padding-top:18px}}
@media (max-width:640px){.foot a,.foot-bottom a,.brand,.rows a,.announce a{padding-block:5px;margin-block:-5px}.foot ul{gap:11px}.foot > div:nth-child(2) ul{grid-template-columns:1fr;gap:11px}}
.talks-intro{margin-top:52px;color:var(--dim);font-size:clamp(17px,1.8vw,19.5px);max-width:58ch}
.talks-intro + .talks{margin-top:20px}
.talk{cursor:pointer}
@media (min-width:861px){
  .panel-side > img{right:-4%;width:66%;object-position:44% 12%}
  .panel-side::after{background:linear-gradient(93deg,rgba(8,9,12,.96) 22%,rgba(8,9,12,.68) 44%,rgba(8,9,12,.14) 70%,rgba(8,9,12,0) 84%)}
  .panel-side .body{max-width:66%}
}
/* accentblok in koppen */
mark{background:var(--amber);color:#140D00;padding:.02em .16em .08em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* boekomslagen even groot: drie covers zijn 0,658 breed-hoog, de vierde 0,700 */
.covers img{aspect-ratio:79/120;height:auto;object-fit:cover;object-position:center}

/* in-company met foto van Vincent en Marcel */
.outlet-wide{grid-column:1 / -1;min-height:0}
@media (min-width:861px){
  .panel-wide.panel-side > img{right:-2%;width:46%;object-position:54% 12%}
  .panel-wide.panel-side .body{max-width:56%}
  .panel-wide.panel-side::after{background:linear-gradient(93deg,rgba(8,9,12,.96) 30%,rgba(8,9,12,.62) 50%,rgba(8,9,12,.1) 70%,rgba(8,9,12,0) 82%)}
}

/* e-books op de telefoon: veegstrook in plaats van negen rijen onder elkaar */
@media (max-width:560px){
  .ebooks{
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:-18px;padding:0 18px 14px;scrollbar-width:none;
  }
  .ebooks::-webkit-scrollbar{display:none}
  .ebook{scroll-snap-align:start;min-height:118px}
  .ebook::before{font-size:52px;right:12px;bottom:-10px}
}

/* reviews: cijfer onder de foto, zodat de kolom een blok wordt */
.review-side{display:flex;flex-direction:column;gap:24px}
.review-shot{border:0;border-radius:8px}
.review-side .scorebar{gap:14px 26px}
@media (min-width:861px){
  .review-grid{align-items:start}
  .quotes{margin-top:0}
}
/* reviews: de foto loopt vanaf de linkerrand door en vervaagt richting de quotes */
@media (min-width:1081px){
  .reviews{position:relative;overflow:hidden}
  .reviews .review-shot{
    position:absolute;top:0;bottom:0;left:0;width:53%;z-index:0;
    border:0;border-radius:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.3) 76%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.3) 76%,transparent 100%);
  }
  .reviews .review-shot img{
    width:100%;height:100%;object-fit:cover;object-position:42% 42%;
    filter:saturate(.84) contrast(1.04) brightness(.9);
  }
  .reviews .review-shot::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(8,9,12,.92) 2%,rgba(8,9,12,.24) 48%,rgba(8,9,12,.42));
  }
  .review-side{min-height:480px;justify-content:flex-end}
  .review-side .scorebar{position:relative;z-index:2}
  .review-grid > div + div{position:relative;z-index:2}
}