/* Leerlus illustraties met kleine animaties */
.llx-host{position:relative}
.llx{display:block;height:auto;max-width:100%;pointer-events:none;user-select:none}

/* Plek op de homepage (desktop): naast de kop, binnen de contentbreedte */
.llx-abs{position:absolute;z-index:2}
.llx-pos-rechtsboven{top:clamp(40px,7vw,90px);right:max(20px,calc((100% - 1160px) / 2 + 10px));width:clamp(170px,22vw,290px)}
.llx-pos-onder{bottom:-4px;right:max(20px,calc((100% - 1160px) / 2 + 10px));width:clamp(150px,14vw,180px)}
.llx-raket.llx-pos-rechtsboven{width:clamp(200px,24vw,320px)}
.llx-brein.llx-pos-rechtsboven{width:clamp(140px,15vw,200px)}
.llx-ballon.llx-pos-rechtsboven{width:clamp(140px,15vw,210px);top:clamp(24px,4vw,50px)}

/* Tablet/telefoon: niet over de tekst heen, maar klein boven de kop */
@media (max-width:1024px){
  .llx-abs.llx-pos-rechtsboven{position:static;width:150px!important;margin:0 0 10px auto}
  .llx-abs.llx-pos-onder{position:static;width:200px!important;margin:24px auto 0}
}

/* Shortcode */
.llx-wrap{display:flex}
.llx-align-links{justify-content:flex-start}
.llx-align-midden{justify-content:center}
.llx-align-rechts{justify-content:flex-end}

/* ---- animaties ----
   Zonder JavaScript of zonder IntersectionObserver staat alles gewoon stil en zichtbaar.
   Het script zet .llx-wait (beginstand) en daarna .llx-in zodra de illustratie in beeld komt. */
@keyframes llx-fly-in{from{opacity:0;transform:translate(-90px,70px) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes llx-glide-in{from{opacity:0;transform:translate(-120px,-20px) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes llx-ride-in{from{opacity:0;transform:translateX(-60vw)}to{opacity:1;transform:none}}
@keyframes llx-pop{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@keyframes llx-hover{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.5deg)}}
@keyframes llx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes llx-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes llx-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.llx.llx-wait{opacity:0}
.llx.llx-in{opacity:1}
.llx-in.llx-a-vliegen{animation:llx-fly-in 1.1s cubic-bezier(.2,.8,.2,1) both,llx-hover 4s ease-in-out 1.1s infinite}
.llx-in.llx-a-zweven-in{animation:llx-glide-in 1.3s cubic-bezier(.2,.8,.2,1) both,llx-float 5s ease-in-out 1.3s infinite}
.llx-in.llx-a-fietsen{animation:llx-ride-in 1.8s cubic-bezier(.25,.9,.3,1) both,llx-bounce .7s ease-in-out 1.8s infinite}
.llx-in.llx-a-zweven{animation:llx-pop .8s ease-out both,llx-float 4.5s ease-in-out .8s infinite}
.llx-in.llx-a-drijven{animation:llx-pop .9s ease-out both,llx-float 6s ease-in-out .9s infinite}
.llx-in.llx-a-wiegen{transform-origin:50% 100%;animation:llx-pop .8s ease-out both,llx-sway 3.5s ease-in-out .8s infinite}
.llx-in.llx-a-geen{animation:none}

@media (prefers-reduced-motion:reduce){
  .llx.llx-wait{opacity:1}
  .llx.llx-in{animation:none!important}
}