/* ===========================================================================
   Wildewijs Doodles — levende krijt-scène (dag/nacht + weer)
   Presentatie only. Gedrag = classes die de JS op .wd zet:
     .wd-run              -> in beeld, animaties mogen lopen
     .is-day / .is-night  -> zon of maan
     .wx-clear/.wx-clouds/.wx-rain/.wx-thunder -> weer
   =========================================================================== */

.wd{ position:relative; width:100%; max-width:1550px; margin:0 auto;
     -webkit-tap-highlight-color:transparent; }
.wd-scene{ position:relative; width:100%; overflow:hidden;
           transition:filter 1.2s ease; }
.wd-item{ position:absolute; display:block; height:auto;
          transform-origin:center bottom; will-change:transform;
          animation-play-state:paused; }
.wd.wd-run .wd-item{ animation-play-state:running; }

/* losse doodle voor in een Divi-sectie (speelt meteen af) */
.wd-single{ display:inline-block; line-height:0; vertical-align:middle; }
.wd-single .wd-item{ position:static; width:100%; height:auto; animation-play-state:running; }

/* ---- Gearticuleerde figuren (natuurgetrouw, bewegende onderdelen) ---- */
/* VOGEL: vliegt over z'n strook met klappende vleugels */
.wd-vogel-baan{ position:relative; width:100%; height:180px; overflow:hidden; pointer-events:none; }
/* schermbreed: vast bovenin, vliegt over de hele pagina heen */
.wd-vogel-baan.wd-over{ position:fixed; top:var(--top,90px); left:0; width:100%; height:150px; z-index:9998; }
.wd-vogel{ position:absolute; top:20px; width:110px; animation:wd-vogelfly 11s linear infinite;
           filter:url(#wdKrijt) drop-shadow(1px 3px 3px rgba(0,0,0,.12)); }
.wd-vogel svg{ display:block; width:100%; height:auto; overflow:visible; }
@keyframes wd-vogelfly{
  0%  { left:-16%; transform:translateY(10px) }
  25% { left:20%;  transform:translateY(-14px) }
  50% { left:50%;  transform:translateY(8px) }
  75% { left:80%;  transform:translateY(-12px) }
  100%{ left:116%; transform:translateY(10px) }
}
.wd-vl-boven{ transform-box:view-box; transform-origin:60px 44px; animation:wd-klapb .32s ease-in-out infinite alternate; }
.wd-vl-onder{ transform-box:view-box; transform-origin:60px 46px; animation:wd-klapo .32s ease-in-out infinite alternate; }
@keyframes wd-klapb{ from{transform:rotate(-42deg)} to{transform:rotate(18deg)} }
@keyframes wd-klapo{ from{transform:rotate(-14deg)} to{transform:rotate(30deg)} }
@media (prefers-reduced-motion:reduce){ .wd-vogel,.wd-vl-boven,.wd-vl-onder{ animation:none } }

/* ---- BIJ die vliegt en een spoor achterlaat (vector draw-on) ---- */
.wd-bee{ display:inline-block; line-height:0; }
.wd-bee-inner{ position:relative; display:inline-block; width:260px; height:104px; transform:scale(var(--s,1)); transform-origin:top left; }
.wd-bee-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wd-bee-line{ stroke-dasharray:1; stroke-dashoffset:1; animation:wd-beetrail 6.5s ease-in-out infinite; }
.wd-bee-bug{ position:absolute; left:0; top:0; width:34px; offset-rotate:0deg; offset-anchor:50% 50%;
             animation:wd-beefly 6.5s ease-in-out infinite; }
.wd-bee-bug img{ display:block; width:100%; height:auto; }
.wd-bee-wing{ animation:wd-beewing .26s ease-in-out infinite alternate; transform-origin:50% 42%; }
@keyframes wd-beefly{
  0%  { offset-distance:0%;  opacity:0 }
  7%  { opacity:1 }
  68% { offset-distance:100%; opacity:1 }
  85% { offset-distance:100%; opacity:1 }
  95% { opacity:0 }
  100%{ offset-distance:0%;  opacity:0 }
}
@keyframes wd-beetrail{
  0%  { stroke-dashoffset:1; opacity:0 }
  7%  { opacity:1 }
  68% { stroke-dashoffset:0; opacity:1 }
  85% { stroke-dashoffset:0; opacity:1 }
  95% { opacity:0 }
  100%{ stroke-dashoffset:1; opacity:0 }
}
@keyframes wd-beewing{ from{transform:rotate(-7deg)} to{transform:rotate(7deg)} }
@media (prefers-reduced-motion: reduce){
  .wd-bee-line{ stroke-dashoffset:0; animation:none; }
  .wd-bee-bug{ animation:none; offset-distance:100%; }
}

/* ---------- dag / nacht ---------- */
.wd [data-role="sun"],
.wd [data-role="moon"]{ transition:opacity 1.1s ease; }
.wd.is-night [data-role="sun"]{ opacity:0; }
.wd.is-day  [data-role="moon"]{ opacity:0; }
.wd.is-night .wd-scene{ filter:saturate(.82) brightness(.9) hue-rotate(-8deg); }
.wd.is-night::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 80% 10%, rgba(30,40,90,.10), transparent 60%);
  mix-blend-mode:multiply; z-index:20; }

/* ---------- weer: regenwolken alleen "regenen" als het regent ---------- */
.wd-rain{ position:absolute; inset:0; pointer-events:none; z-index:15;
          opacity:0; transition:opacity .8s ease; }
.wd.wx-rain .wd-rain, .wd.wx-thunder .wd-rain{ opacity:1; }
.wd-drop{ position:absolute; width:3px; height:16px; border-radius:2px;
  background:linear-gradient(#7b2d8e, rgba(123,45,142,.12));
  opacity:0; animation:wd-fall linear infinite; animation-play-state:paused; }
.wd.wd-run.wx-rain .wd-drop, .wd.wd-run.wx-thunder .wd-drop{ animation-play-state:running; }
@keyframes wd-fall{
  0%{ transform:translateY(0) scaleY(.6); opacity:0 }
  10%{ opacity:.85 } 90%{ opacity:.85 }
  100%{ transform:translateY(var(--d,300px)) scaleY(1.1); opacity:0 }
}
/* bliksem-flits bij onweer */
.wd-flash{ position:absolute; inset:0; pointer-events:none; z-index:16;
  background:rgba(255,255,240,.0); }
.wd.wd-run.wx-thunder .wd-flash{ animation:wd-flash 7s ease-out infinite; }
@keyframes wd-flash{
  0%,93%,100%{ background:rgba(255,255,240,0) }
  94%{ background:rgba(255,255,240,.55) }
  95%{ background:rgba(255,255,240,.05) }
  96%{ background:rgba(255,255,240,.4) }
  98%{ background:rgba(255,255,240,0) }
}

/* =====================================================================
   ANIMATIES — allemaal ease-in-out en subtiel, "in place" (geen botsingen)
   ===================================================================== */
.wd-sway   { animation:wd-sway    2.6s ease-in-out infinite alternate; transform-origin:50% 92%; }
.wd-swayb  { animation:wd-sway    2.1s ease-in-out infinite alternate-reverse; transform-origin:50% 92%; }
.wd-bob    { animation:wd-bob     1.9s ease-in-out infinite alternate; }
.wd-breathe{ animation:wd-breathe 2.2s ease-in-out infinite alternate; }
.wd-floaty { animation:wd-floaty  4s   ease-in-out infinite alternate; }
.wd-sun    { animation:wd-spin    14s  linear infinite, wd-pulse 3s ease-in-out infinite alternate; transform-origin:50% 50%; }
.wd-moon   { animation:wd-moon    3.4s ease-in-out infinite alternate; }
.wd-balloon{ animation:wd-balloon 3.2s ease-in-out infinite alternate; transform-origin:50% 100%; }
.wd-hotair { animation:wd-hotair  4.4s ease-in-out infinite alternate; }
.wd-kite   { animation:wd-kite    2.2s ease-in-out infinite alternate; transform-origin:50% 12%; }
.wd-crawl  { animation:wd-crawl   2.4s ease-in-out infinite alternate; transform-origin:50% 90%; }
.wd-crawlmini{ animation:wd-crawlmini 1s ease-in-out infinite alternate; }
.wd-hop    { animation:wd-hop     1.5s cubic-bezier(.28,0,.35,1) infinite; transform-origin:50% 100%; }
.wd-ride   { animation:wd-ride    0.85s ease-in-out infinite; }
.wd-hover  { animation:wd-hover   3s   ease-in-out infinite; }
.wd-peck   { animation:wd-peck    1.9s ease-in-out infinite; transform-origin:50% 100%; }
.wd-swim   { animation:wd-swim    1.5s ease-in-out infinite; transform-origin:50% 50%; }
.wd-boat   { animation:wd-boat    2.4s ease-in-out infinite alternate; transform-origin:50% 92%; }
.wd-flutter{ animation:wd-flutter 1.3s ease-in-out infinite; transform-origin:50% 60%; }
.wd-shimmer{ animation:wd-shimmer 2.2s ease-in-out infinite alternate; }
.wd-drive  { animation:wd-drive   0.7s ease-in-out infinite; }
.wd-raincloud{ animation:wd-cloud 4s ease-in-out infinite alternate; }
.wd-thunder  { animation:wd-cloud 4.5s ease-in-out infinite alternate; }

@keyframes wd-sway   { from{transform:rotate(-8deg)} to{transform:rotate(8deg)} }
@keyframes wd-bob    { from{transform:translateY(6px)} to{transform:translateY(-16px)} }
@keyframes wd-breathe{ from{transform:scale(.95)} to{transform:scale(1.1)} }
@keyframes wd-floaty { 0%{transform:translateY(8px) rotate(-4deg)} 100%{transform:translateY(-20px) rotate(5deg)} }
@keyframes wd-spin   { to{transform:rotate(360deg)} }
@keyframes wd-pulse  { from{filter:none} to{filter:drop-shadow(0 0 6px rgba(240,180,40,.7))} }
@keyframes wd-moon   { from{transform:translateY(8px) rotate(-7deg)} to{transform:translateY(-14px) rotate(7deg)} }
@keyframes wd-balloon{ 0%{transform:translateY(12px) rotate(-7deg)} 100%{transform:translateY(-26px) rotate(7deg)} }
@keyframes wd-hotair { from{transform:translateY(14px) rotate(-3deg)} to{transform:translateY(-30px) rotate(3deg)} }
@keyframes wd-kite   { 0%{transform:rotate(-16deg) translate(-10px,6px)} 100%{transform:rotate(16deg) translate(12px,-10px)} }
@keyframes wd-crawl  { 0%{transform:translateX(-10px) scale(1,1)} 50%{transform:translateX(6px) scale(1.12,.88)} 100%{transform:translateX(20px) scale(1,1)} }
@keyframes wd-crawlmini{ 0%{transform:translate(-5px,0) rotate(-10deg)} 100%{transform:translate(10px,-5px) rotate(10deg)} }
@keyframes wd-hop{
  0%,16%{ transform:translateY(0) scale(1,1) }
  27%{ transform:translateY(3px) scale(1.2,.78) }        /* diep door de knieën */
  42%{ transform:translateY(-40px) scale(.84,1.18) }     /* hoog in de lucht */
  56%{ transform:translateY(0) scale(1.22,.76) }         /* landing, plat */
  66%{ transform:translateY(0) scale(.96,1.05) }
  74%,100%{ transform:translateY(0) scale(1,1) }
}
@keyframes wd-ride{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(2deg)} }
@keyframes wd-hover{ 0%{transform:translate(0,0)} 25%{transform:translate(14px,-16px)} 50%{transform:translate(0,-24px)} 75%{transform:translate(-14px,-12px)} 100%{transform:translate(0,0)} }
@keyframes wd-peck{ 0%,52%,100%{transform:rotate(0)} 66%{transform:rotate(26deg)} 80%{transform:rotate(0)} }
@keyframes wd-swim{ 0%,100%{transform:skewX(0) translateX(0) rotate(0)} 25%{transform:skewX(14deg) translateX(-10px) rotate(-4deg)} 75%{transform:skewX(-14deg) translateX(10px) rotate(4deg)} }
@keyframes wd-boat{ from{transform:rotate(-9deg) translateY(4px)} to{transform:rotate(9deg) translateY(-7px)} }
@keyframes wd-flutter{
  0%{transform:translate(0,0) scaleX(1) rotate(-6deg)}
  25%{transform:translate(10px,-14px) scaleX(.5) rotate(6deg)}
  50%{transform:translate(0,-6px) scaleX(1) rotate(-6deg)}
  75%{transform:translate(-10px,-16px) scaleX(.5) rotate(6deg)}
  100%{transform:translate(0,0) scaleX(1) rotate(-6deg)}
}
@keyframes wd-shimmer{ from{opacity:.5} to{opacity:1} }
@keyframes wd-drive{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-6px) rotate(1.5deg)} }
@keyframes wd-cloud{ from{transform:translateX(-16px)} to{transform:translateX(18px)} }

/* toegankelijkheid */
@media (prefers-reduced-motion: reduce){
  .wd-item, .wd-drop, .wd-flash{ animation:none !important; }
}