/* Boo, de mascotte: stemmingen en animaties. Gedeeld door site en beheer.
   Eén personage, overal hetzelfde gedrag: knippert af en toe, wangen gloeien
   zacht, ogen kijken mee met de muis, en ze wisselt van stemming (data-mood).
   Author: Ferhat Remory (steirk.be) */
.boo { display: block; overflow: visible; }
.boo .boo__e-love, .boo .boo__e-closed, .boo .boo__brows, .boo .boo__m, .boo .boo__wink, .boo .boo__brow-up { display: none; }
.boo[data-mood="happy"] .boo__m-happy,
.boo[data-mood="love"] .boo__m-happy,
.boo[data-mood="excited"] .boo__m-excited,
.boo[data-mood="sorry"] .boo__m-sorry,
.boo[data-mood="sorry"] .boo__brows,
.boo[data-mood="sleepy"] .boo__m-sleepy,
.boo[data-mood="sleepy"] .boo__e-closed,
.boo[data-mood="love"] .boo__e-love,
.boo[data-mood="wink"] .boo__m-happy,
.boo[data-mood="wink"] .boo__wink,
.boo[data-mood="think"] .boo__m-think,
.boo[data-mood="think"] .boo__brow-up { display: inline; }
.boo[data-mood="wink"] .boo__eye-r { display: none; }
.boo[data-mood="think"] .boo__look { transform: translate(4px, -4px) !important; }
.boo[data-mood="love"] .boo__e-open,
.boo[data-mood="sleepy"] .boo__eyes { display: none; }

.boo__eyes { transform-box: fill-box; transform-origin: center; animation: boo-blink 5.2s infinite; animation-delay: var(--blink-delay, 0s); }
.boo__look { transition: transform .35s cubic-bezier(.2,.8,.3,1); transform: translate(var(--lx, 0px), var(--ly, 0px)); }
.boo__cheeks ellipse { transform-box: fill-box; transform-origin: center; animation: boo-glow 3.6s ease-in-out infinite alternate; }
.boo__cheeks ellipse + ellipse { animation-delay: -.4s; }
.boo__arm { transform-box: view-box; transform-origin: 42px 104px; animation: boo-wave 3.4s ease-in-out infinite; animation-delay: var(--blink-delay, 0s); }
.boo--logo .boo__arm, .boo--logo .boo__cheeks ellipse { animation: none; }
.boo--logo .boo__cheeks ellipse { opacity: .75; }
.boo--logo .boo__eyes { animation-duration: 8.5s; }
.boo.is-hop .boo__float { animation: boo-hop .55s cubic-bezier(.3,1.6,.5,1); }

@keyframes boo-blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }
@keyframes boo-glow { from { opacity: .5; transform: scale(1); } to { opacity: .95; transform: scale(1.12); } }
@keyframes boo-wave { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-6deg); } }
@keyframes boo-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-16px) scale(1.04, .97); } 100% { transform: translateY(0) scale(1); } }
@keyframes boo-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }


/* Witte Boo op een lichte achtergrond: zachte schaduw zodat ze loskomt */
.boo--light { filter: drop-shadow(0 8px 16px rgba(130, 50, 180, .22)); }
.boo--peek.boo--light { filter: drop-shadow(0 8px 16px rgba(130, 50, 180, .28)); }

@media (prefers-reduced-motion: reduce) {
  .boo__eyes, .boo__cheeks ellipse, .boo__arm, .boo.is-hop .boo__float { animation: none !important; }
  .boo__look { transition: none; }
}