/* PTG Scrollball – ein echter 3D-Fußball, der beim Scrollen rechts mit
   hoch/runter wandert UND sich dabei dreht (Roll-Effekt wie orkle.de/wm2026).
   Lizenzfrei, self-hosted. */

#ptg-scrollball {
  position: fixed;
  right: 4%;
  top: 18vh;                       /* tiefer starten – frei vom Header; JS setzt top beim Scrollen */
  z-index: 9990;
  /* Größe passt sich proportional dem Viewport an (klein auf Handy, groß am Desktop) */
  width: clamp(78px, 14vw, 200px);
  height: clamp(78px, 14vw, 200px);
  pointer-events: auto;            /* anklickbar (Klick = springen) */
  cursor: pointer;
  will-change: top;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22));
}

#ptg-scrollball model-viewer {
  width: 100%;
  height: 100%;
  background-color: transparent;   /* transparenter Hintergrund -> nur der Ball */
  --poster-color: transparent;
  outline: none;
  pointer-events: none;            /* Klick fällt auf den Wrapper (Bounce-Handler) */
}

/* Bounce: am Seitenende titscht der Ball hoch wie auf den Boden gefallen.
   Aufwärts ease-out (bremst ab), abwärts ease-in (beschleunigt) = Schwerkraft.
   translateY in % skaliert mit der Ballgröße. */
@keyframes ptg-bounce {
  0%   { transform: translateY(0);    animation-timing-function: ease-out; }
  30%  { transform: translateY(-48%); animation-timing-function: ease-in; }
  52%  { transform: translateY(0);    animation-timing-function: ease-out; }
  70%  { transform: translateY(-22%); animation-timing-function: ease-in; }
  84%  { transform: translateY(0);    animation-timing-function: ease-out; }
  93%  { transform: translateY(-9%);  animation-timing-function: ease-in; }
  100% { transform: translateY(0); }
}
#ptg-scrollball.ptg-bounce { animation: ptg-bounce 1.15s 1; }

/* Auf schmalen Handys etwas näher an den Rand */
@media (max-width: 600px) { #ptg-scrollball { right: 3%; } }

/* Bewegungsreduktion: ruhig unten rechts (JS rollt/scrollt dann nicht mit) */
@media (prefers-reduced-motion: reduce) {
  #ptg-scrollball { top: auto; bottom: 24px; }
}