/* ═══════════════════════════════════════
   BEERTJE WIJZER - "Leven" laag
   Gedeelde animaties voor alle pagina's
   ═══════════════════════════════════════ */

/* Zwevende achtergrond-elementen (ballonnen, sterren, wolken) */
.leven-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.leven-bg span{
  position:absolute;
  font-size:1.8rem;
  opacity:0.55;
  animation:zweef linear infinite;
  will-change:transform;
}
@keyframes zweef{
  0%   {transform:translateY(105vh) rotate(0deg);}
  100% {transform:translateY(-15vh) rotate(360deg);}
}

/* Zachte pop-in voor content bij laden */
@keyframes levenPop{
  from{opacity:0;transform:translateY(20px) scale(0.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.leven-in{animation:levenPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;}

/* Wiebelende beertje / emoji accent */
@keyframes wiebel{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(4deg);}
}
.wiebel{animation:wiebel 2.5s ease-in-out infinite;display:inline-block;}

/* Zachte puls voor knoppen die aandacht vragen */
@keyframes zachtePuls{
  0%,100%{transform:scale(1);box-shadow:0 4px 0 rgba(0,0,0,0.15);}
  50%{transform:scale(1.04);box-shadow:0 7px 14px rgba(0,0,0,0.2);}
}
.puls{animation:zachtePuls 2s ease-in-out infinite;}

/* Zorg dat content boven de achtergrond-animatie zit */
.page, .outer, .topbar{position:relative;z-index:1;}

/* Respecteer gebruikers die geen beweging willen */
@media(prefers-reduced-motion:reduce){
  .leven-bg span,.wiebel,.puls{animation:none;}
  .leven-in{animation:none;}
}