/* =========================================================
   Beo Sports e.V. – animierte Beos (siehe beos.js)
   ========================================================= */

.beo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .45)) drop-shadow(0 0 10px rgba(247, 197, 30, .35)); }
.beo .beo-wing, .beo .beo-head, .beo .beo-eye, .beo .beo-tail { transform-box: view-box; }
.beo .beo-wing { transform-origin: 62px 46px; }
.beo .beo-head { transform-origin: 80px 48px; }
.beo .beo-eye { transform-origin: 91px 32px; }
.beo .beo-tail { transform-origin: 32px 56px; }

/* ---------- Fliegende Beos im Hero ---------- */
.hero .container { position: relative; z-index: 1; }
.beo-flock { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.beo-flying {
  position: absolute; left: 0; top: var(--top); width: var(--size);
  transform: translateX(-160px);
  animation: beo-fly var(--dur) linear var(--delay) infinite;
}
.beo-flying .beo-bob { animation: beo-bob 1.7s ease-in-out infinite alternate; }
.beo-flying .beo-wing { animation: beo-flap .32s ease-in-out infinite alternate; }
.beo-flying .beo-tail { animation: beo-tail 1.7s ease-in-out infinite alternate; }

@keyframes beo-fly {
  from { transform: translateX(-160px); }
  to { transform: translateX(calc(100vw + 160px)); }
}
@keyframes beo-bob {
  from { transform: translateY(-10px) rotate(-3deg); }
  to { transform: translateY(12px) rotate(3deg); }
}
@keyframes beo-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(-.85); }
}
@keyframes beo-tail {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg); }
}

/* ---------- Sitzende Beos ---------- */
.beo-perched { position: absolute; width: 84px; cursor: pointer; z-index: 3; animation: beo-hop 7s ease-in-out infinite; }
.beo-perched .beo-eye { animation: beo-blink 4.3s infinite; }
.beo-perched .beo-head { animation: beo-nod 5.5s ease-in-out infinite; }
.beo-perched .beo-tail { animation: beo-tail 2.6s ease-in-out infinite alternate; }
.beo-perched:hover .beo-wing { animation: beo-flutter .18s ease-in-out 4 alternate; }
.beo-perched:focus-visible { outline: 2px solid var(--yellow, #f7c51e); outline-offset: 4px; border-radius: 8px; }
.beo-flip svg { transform: scaleX(-1); }

.beo-on-facts { top: -66px; right: 22px; }
.beo-on-form { top: -62px; left: 26px; width: 76px; animation-delay: 2.5s; }

@keyframes beo-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.1); }
}
@keyframes beo-nod {
  0%, 60%, 100% { transform: rotate(0); }
  66% { transform: rotate(-12deg); }
  72% { transform: rotate(6deg); }
  78% { transform: rotate(-4deg); }
}
@keyframes beo-hop {
  0%, 78%, 100% { transform: translateY(0); }
  82% { transform: translateY(-14px); }
  86% { transform: translateY(0); }
  89% { transform: translateY(-6px); }
  92% { transform: translateY(0); }
}
@keyframes beo-flutter {
  from { transform: scaleY(1); }
  to { transform: scaleY(-.7); }
}

/* Sprechblase beim Anklicken */
.beo-bubble {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 6px) scale(.9);
  background: var(--yellow, #f7c51e); color: #0a0a0a; white-space: nowrap;
  font-family: var(--font-head, sans-serif); font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px; opacity: 0; pointer-events: none;
}
.beo-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--yellow, #f7c51e); }
.beo-flip .beo-bubble { left: 50%; }
.beo-perched.talking .beo-bubble { animation: beo-say 2.4s ease forwards; }
.beo-perched.talking .beo-beak { transform-box: view-box; transform-origin: 99px 37px; animation: beo-chirp .15s ease-in-out 6 alternate; }
@keyframes beo-say {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.9); }
  12%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -4px) scale(.95); }
}
@keyframes beo-chirp {
  from { transform: rotate(0); }
  to { transform: rotate(-10deg); }
}

/* ---------- Laufender Beo auf der Footer-Linie ---------- */
.beo-track { position: absolute; left: 0; right: 0; top: -48px; height: 46px; pointer-events: none; overflow: hidden; }
.beo-walker { position: absolute; bottom: 0; width: 50px; left: 0; animation: beo-walk 26s linear infinite; }
.beo-walker svg { animation: beo-turn 26s step-end infinite, beo-step .38s ease-in-out infinite alternate; }
@keyframes beo-walk {
  0% { left: 2%; }
  46% { left: calc(98% - 50px); }
  50% { left: calc(98% - 50px); }
  96% { left: 2%; }
  100% { left: 2%; }
}
@keyframes beo-turn {
  0% { transform: scaleX(1); }
  48% { transform: scaleX(-1); }
  98% { transform: scaleX(1); }
}
@keyframes beo-step {
  from { translate: 0 0; rotate: -3deg; }
  to { translate: 0 -2px; rotate: 3deg; }
}

@media (max-width: 640px) {
  .beo-perched { width: 62px; }
  .beo-on-facts { top: -50px; }
  .beo-on-form { top: -50px; width: 60px; }
}

/* Bewegung reduzieren: Beos bleiben sichtbar, bewegen sich aber nicht */
@media (prefers-reduced-motion: reduce) {
  .beo, .beo * { animation: none !important; }
  .beo-flock { display: none; }
}