/* Doodles: decoratief, nooit interactief, nooit oorzaak van overflow. */
.vl-doodle{
  position:absolute;pointer-events:none;z-index:1;line-height:0;
  color:var(--ink);opacity:.35;
}
.vl-doodle svg{display:block;width:100%;height:auto;overflow:visible}

/* Draw-in: standaard volledig getekend. motion.js zet .vl-draw op 0 en scrubt naar 1. */
.vl-draw{stroke-dasharray:1;stroke-dashoffset:0}
/* Alleen de hitte-contouren worden op scroll getekend; die staan dus tot dat
   moment op nul lengte. Een doodle wordt NIET gescrubd en moet daarom gewoon
   zichtbaar blijven - anders verdwijnt hij zodra de motion-laag er is, en dat
   is precies wat er gebeurde toen deze regel nog op elke .vl-draw sloeg. */
.js-motion .vl-heat .vl-draw{stroke-dashoffset:1}
/* Valt GSAP weg (of staat reduced motion aan), dan zet motion.js .vl-pin-off en
   staat ook de contour meteen getekend in plaats van onzichtbaar te blijven. */
html.vl-pin-off .vl-heat .vl-draw{stroke-dashoffset:0}

/* Plaatsingsvarianten */
.vl-doodle--left{left:calc(var(--pad) * -.3);top:8%}
.vl-doodle--right{right:calc(var(--pad) * -.3);top:12%}
.vl-doodle--under{left:0;bottom:-18px}
.vl-doodle--behind{inset:auto auto -6% -4%;z-index:0}

/* Maten per doodle */
.vl-doodle--kabel{width:clamp(120px,16vw,220px)}
.vl-doodle--cirkel{width:clamp(160px,22vw,300px);color:var(--ink)}
/* Doodles zijn inkt op papier en papier op inkt, nooit een derde kleur - de
   ene vlamkleur van een sectie hoort bij de ember-accenten, niet bij een
   kantlijntekening. */
.vl-doodle--pijl{width:clamp(80px,10vw,140px);color:var(--ink)}
.vl-doodle--flightcase,.vl-doodle--walkie{width:clamp(60px,7vw,110px);color:var(--ink)}
.vl-doodle--tiewrap{width:clamp(90px,12vw,150px)}
.vl-doodle--sticker{width:clamp(110px,14vw,180px);color:var(--ink);transform:rotate(-7deg)}
.vl-doodle--vonk{width:clamp(40px,5vw,70px);color:var(--ink)}
.vl-doodle--tape{width:clamp(180px,26vw,320px);color:var(--tape);opacity:1}


@media (max-width:760px){
  .vl-doodle--flightcase,.vl-doodle--walkie,.vl-doodle--tiewrap{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js-motion .vl-draw{stroke-dashoffset:0}
}