/* ============================================================
   blog.css — huisstijl voor de blog van Robby Moors
   Deelt de tokens met index.html. Upload naar /assets/blog.css
   ============================================================ */

:root{
  --paper:#F3F6F5;
  --surface:#FFFFFF;
  --surface-2:#EDF3F1;
  --ink:#14201E;
  --muted:#566461;
  --line:#DBE5E2;
  --accent:#0E7C6B;
  --accent-weak:#DFEEEB;
  --on-accent:#FFFFFF;
  --sun:#E0902B;
  --sun-weak:#F8E9D2;
  --blush:#FF6F5E;
  --shadow:0 2px 6px rgba(20,32,30,.05), 0 20px 44px -22px rgba(20,32,30,.28);
  --radius:16px;
  --wrap:1060px;
  --measure:64ch;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"DM Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B1413; --surface:#111D1B; --surface-2:#172523;
    --ink:#E7EDEB; --muted:#93A29E; --line:#24322F;
    --accent:#35BCA6; --accent-weak:#152A27; --on-accent:#08130F;
    --sun:#F1B15E; --sun-weak:#2A2114; --blush:#FF8676;
    --shadow:0 2px 6px rgba(0,0,0,.4), 0 24px 50px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0B1413; --surface:#111D1B; --surface-2:#172523;
  --ink:#E7EDEB; --muted:#93A29E; --line:#24322F;
  --accent:#35BCA6; --accent-weak:#152A27; --on-accent:#08130F;
  --sun:#F1B15E; --sun-weak:#2A2114; --blush:#FF8676;
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 24px 50px -24px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:var(--f-body);font-size:1.06rem;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
a{color:var(--accent);text-underline-offset:.15em}
img,svg{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--on-accent)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.eyebrow{
  font-family:var(--f-mono);font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.6rem;margin-bottom:1.15rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin-inline:auto;padding:.65rem clamp(20px,5vw,40px);display:flex;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.logo b{font-family:var(--f-display);font-weight:600;font-size:1.06rem}
.logo svg{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:1.3rem;margin-left:auto}
.nav-links a{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto}
.theme-btn{margin-left:.2rem;width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;font-size:.95rem;display:grid;place-items:center;
  transition:border-color .18s,transform .18s}
.theme-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.lang-btn{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em}
@media (max-width:820px){.nav-links{display:none}.nav-cta{margin-left:auto}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.79rem;letter-spacing:.04em;
  text-transform:uppercase;padding:.85em 1.4em;border-radius:999px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,border-color .16s}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn--ghost:hover{border-color:var(--accent);transform:translateY(-2px)}
.btn--big{padding:1.05em 1.8em;font-size:.85rem}

/* ---------- blog index ---------- */
.blog-hero{padding-block:clamp(38px,7vw,72px) clamp(20px,4vw,36px)}
.blog-hero h1{font-size:clamp(2.1rem,5vw,3.3rem);margin-bottom:.4em}
.blog-hero p{color:var(--muted);font-size:clamp(1.05rem,1.7vw,1.2rem);max-width:52ch}
.cat{padding-block:clamp(30px,5vw,54px);border-top:1px solid var(--line)}
.cat h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:.2em}
.cat .sub{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);letter-spacing:.04em;margin-bottom:1.6rem}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.post-card{
  display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.45rem 1.5rem;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.post-card .mini{width:46px;height:46px;color:var(--accent);margin-bottom:.2rem}
.post-card h3{font-size:1.14rem;font-weight:600}
.post-card p{font-size:.93rem;color:var(--muted);flex:1}
.post-card .go{font-family:var(--f-mono);font-size:.72rem;color:var(--accent);letter-spacing:.04em}

/* ---------- article ---------- */
.post-hero{padding-block:clamp(32px,6vw,60px) clamp(24px,4vw,40px);border-bottom:1px solid var(--line)}
.post-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,4vw,48px);align-items:center}
.post-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);margin:.25em 0 .5em}
.crumbs{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.crumbs a{text-decoration:none}
.answer{
  background:var(--accent-weak);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:14px;padding:1.1rem 1.25rem;font-size:1.02rem;color:var(--ink);max-width:52ch;
}
.answer b{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.4rem}

.prose{padding-block:clamp(40px,7vw,68px)}
.prose .wrap{max-width:760px}
.prose h2{font-size:clamp(1.45rem,3vw,1.95rem);margin:2.4rem 0 .7rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;font-weight:600;margin:1.8rem 0 .5rem}
.prose p{margin:.9rem 0;max-width:var(--measure)}
.prose ul,.prose ol{margin:.9rem 0 .9rem 1.1rem;max-width:var(--measure)}
.prose li{margin:.4rem 0}
.prose strong{font-weight:600}
.prose .callout{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:1.05rem 1.2rem;margin:1.6rem 0;font-size:.98rem;color:var(--muted);
}
.prose .callout strong{color:var(--ink)}

.faq{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.2rem}
.faq h2{margin-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.1rem;top:.9rem;font-family:var(--f-mono);color:var(--accent);font-size:1.25rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.2rem;color:var(--muted);font-size:.98rem;max-width:var(--measure)}

.related{border-top:1px solid var(--line);padding-block:clamp(36px,6vw,56px)}
.related h2{font-size:1.3rem;margin-bottom:1.1rem}
.related ul{list-style:none;padding:0;display:grid;gap:10px}
.related a{display:flex;gap:.6rem;align-items:baseline;text-decoration:none;color:var(--ink);
  font-size:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line)}
.related a::before{content:"→";color:var(--accent);font-family:var(--f-mono)}
.related a:hover{color:var(--accent)}

.cta{border-top:1px solid var(--line);padding-block:clamp(44px,7vw,76px);text-align:center}
.cta h2{font-size:clamp(1.6rem,3.4vw,2.3rem);max-width:22ch;margin:0 auto .5em}
.cta p{color:var(--muted);max-width:44ch;margin:0 auto 1.6rem}

footer{border-top:1px solid var(--line);padding-block:2.6rem 3rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;align-items:baseline}
footer p{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
footer .sig{color:var(--accent)}

@media (max-width:820px){.post-hero .wrap{grid-template-columns:1fr}}

/* ============================================================
   Botje-scenes — één per pagina, elk met eigen beweging
   ============================================================ */
.scene{position:relative;display:grid;place-items:center;min-height:230px;isolation:isolate}
.scene::before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--accent-weak),transparent 68%);z-index:-1}
.scene .botje{width:min(190px,58vw);height:auto;filter:drop-shadow(0 20px 24px rgba(20,32,30,.15))}
.scene .prop{position:absolute}
.mini{--m:1}

@keyframes b-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes b-spin{to{transform:rotate(360deg)}}
@keyframes b-spin-rev{to{transform:rotate(-360deg)}}
@keyframes b-rise{0%{opacity:0;transform:translateY(14px) scale(.9)}20%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1)}}
@keyframes b-flicker{0%,100%{opacity:.25}45%,55%{opacity:1}}
@keyframes b-slideX{0%{transform:translateX(-40px)}100%{transform:translateX(40px)}}
@keyframes b-drop{0%{transform:translateY(-24px);opacity:0}25%{opacity:1}70%{transform:translateY(2px)}100%{transform:translateY(2px);opacity:0}}
@keyframes b-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes b-draw{to{stroke-dashoffset:0}}
@keyframes b-pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}
@keyframes b-arc{0%{transform:translate(0,0)}50%{transform:translate(0,-30px)}100%{transform:translate(0,0)}}
@keyframes b-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes b-fall{0%{transform:translateY(-10px);opacity:0}20%{opacity:1}100%{transform:translateY(46px);opacity:0}}
@keyframes b-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg)}}
@keyframes b-write{0%{transform:translateX(0)}50%{transform:translateX(26px)}100%{transform:translateX(0)}}
@keyframes b-grow{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* roterende SVG-onderdelen: laat transform-origin in de viewBox-coördinaten resolven */
.scene .fan,
.scene--rewind .hand,
.scene--shopgear .gear,
.scene--skyline .gear,
.scene--loop .arrow,
.scene--shield .stars,
.scene--sign .sign,
.scene--wing .wing,
.scene--scale .beam{transform-box:view-box}

@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .scene .botje{animation:b-bob 4.4s ease-in-out infinite}
  .scene .fan{transform-origin:110px 26px;animation:b-spin 2.6s linear infinite}

  /* 1 hoofdtermen */
  .scene--juggle .ball{animation:b-arc 1.4s ease-in-out infinite}
  .scene--juggle .ball:nth-child(2){animation-delay:.46s}
  .scene--juggle .ball:nth-child(3){animation-delay:.93s}
  .scene--rewind .hand{transform-origin:100px 100px;animation:b-spin-rev 3s linear infinite}
  .scene--conveyor .box{animation:b-slideX 2.6s linear infinite}
  .scene--conveyor .box:nth-child(2){animation-delay:1.3s}
  .scene--shopgear .gear{transform-origin:60px 52px;animation:b-spin 5s linear infinite}
  .scene--flow .pulse{animation:b-slideX 2s linear infinite}
  .scene--flow .pulse:nth-child(2){animation-delay:1s}

  /* 2 tools */
  .scene--chat .bubble{animation:b-rise 2.6s ease-in infinite}
  .scene--chat .bubble:nth-child(2){animation-delay:.9s}
  .scene--chat .bubble:nth-child(3){animation-delay:1.8s}
  .scene--wing .wing{transform-origin:20px 40px;animation:b-swing 2.2s ease-in-out infinite}
  .scene--puzzle .piece{animation:b-drop 2.4s ease-in-out infinite}
  .scene--puzzle .piece:nth-child(2){animation-delay:1.2s}
  .scene--zap .bolt{transform-origin:center;animation:b-flicker 1.3s steps(1) infinite}
  .scene--tree .branch{stroke-dasharray:60;stroke-dashoffset:60;animation:b-draw 2.4s ease-in-out infinite alternate}

  /* 3 long-tail */
  .scene--bulb .rays{transform-origin:center;animation:b-pulse 2s ease-in-out infinite}
  .scene--filing .paper{animation:b-drop 2.6s ease-in-out infinite}
  .scene--loop .arrow{transform-origin:55px 55px;animation:b-spin 2.4s linear infinite}
  .scene--broom .arm{transform-origin:165px 176px;animation:b-wave 1.6s ease-in-out infinite}
  .scene--broom .dust{animation:b-sweep 1.6s ease-in-out infinite}
  .scene--scale .beam{transform-origin:75px 30px;animation:b-swing 3s ease-in-out infinite}

  /* 4 lokaal */
  .scene--pin .pin{transform-origin:center bottom;animation:b-drop 2.4s ease-in-out infinite}
  .scene--sign .sign{transform-origin:102px 14px;animation:b-swing 2.6s ease-in-out infinite}
  .scene--skyline .gear{transform-origin:54px 84px;animation:b-spin 5s linear infinite}
  .scene--skyline .smoke{animation:b-rise 3s ease-in infinite}
  .scene--orchard .apple{animation:b-fall 2.6s ease-in infinite}
  .scene--orchard .apple:nth-child(2){animation-delay:1.3s}
  .scene--column .shine{animation:b-sweep 3s ease-in-out infinite}
  .scene--bridge .car{animation:b-slideX 2.4s linear infinite}

  /* 5 vertrouwen */
  .scene--shield .stars{transform-origin:55px 60px;animation:b-spin 9s linear infinite}
  .scene--lock .shackle{animation:b-drop 2.6s ease-in-out infinite}
  .scene--hat .check{stroke-dasharray:40;stroke-dashoffset:40;animation:b-draw 2.4s ease-in-out infinite alternate}
  .scene--clip .pen{animation:b-write 2s ease-in-out infinite}
  .scene--clip .line{transform-origin:left center;animation:b-grow 2s ease-in-out infinite}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}