/* Nymot Vorschau „Gummiband“ (Basis v6): Orbs erscheinen einzeln, je ein Gummiband-Zug pro Orb (die ersten drei Gesten bleiben oben). */

/* Mobil: Hero passt komplett in den sichtbaren Viewport – wie live (Werte setzt gummiband.js, Code aus der Live-Seite übernommen) */
@media (max-width: 899px) {
  .hero-fit .hero { padding-top: calc(20px + env(safe-area-inset-top)); }
  .hero-fit .hero h1 { font-size: calc(clamp(40px, 11.2vw, 84px) * var(--fit-h1, 1)); }
  .hero-fit .hero .lead { margin-top: 12px; font-size: calc(clamp(17px, 4.4vw, 20px) * var(--fit-lead, 1)); line-height: 1.5; }
  .hero-fit .hero-scene { width: var(--fit-w, auto); margin: var(--fit-mt, 30px) calc((100% - var(--fit-w, 100%)) / 2) 0; }
}

/* Versteckt bis zum ersten Scrollen */
.orbs-wait :is(.hero-scene, .orb-ui) .orb:not(.orb-in) { opacity: 0; visibility: hidden; pointer-events: none; }

/* Nach dem Erscheinen: Live-Pop-in nicht erneut abspielen, Druck-Animation (Klick) bleibt */
:is(.hero-scene, .orb-ui) .orb.orb-in .orb-c { animation: none; }
:is(.hero-scene, .orb-ui) .orb.orb-in.go .orb-c { animation: orb-press .45s cubic-bezier(.3,1.6,.5,1); }
/* Gummiband-Variante: keine Aufmerksamkeits-Schleife (Ring-„Ping“ alle paar Sekunden) an den Orbs */
:is(.hero-scene, .orb-ui) .orb-c::after { animation: none; }

/* Schnappen (nur durch das Gummiband ausgelöst): kräftiger, federnder Sprung – vom aufgeladenen Zustand auf ~1,5 mit kleinem
   Hüpfer nach oben, zwei Nachfeder-Schwünge (~0,8 s), helles Aufleuchten, EINE Ringwelle. Keine Rotation. */
:is(.hero-scene, .orb-ui) .orb.orb-snap .orb-c { animation: gb-pop .8s cubic-bezier(.3,.75,.4,1) both; }
@keyframes gb-pop {
  0% { opacity: .8; transform: scale(.75); }
  26% { opacity: 1; transform: translateY(-7px) scale(1.5); box-shadow: 0 10px 20px -8px rgba(15,42,51,.35), 0 0 0 2px #7fdcff, 0 0 22px 6px rgba(127,220,255,.6); }
  45% { transform: translateY(0) scale(.88); }
  63% { transform: translateY(-2px) scale(1.12); }
  82% { transform: translateY(0) scale(.97); }
  100% { opacity: 1; transform: none; }
}
:is(.hero-scene, .orb-ui) .orb.orb-snap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid rgba(127,220,255,.7); box-shadow: 0 0 12px 2px rgba(127,220,255,.3);
  animation: gb-ring .75s .12s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes gb-ring { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.8); } }

/* Sanftes Pulsieren erst NACH dem Erscheinen (Zug oder Überspringen), nie vorher: alle 6,4 s kurz atmen (1 → 1,06 → 1)
   mit einem leisen hellblauen Ring; je Orb versetzt, damit sie nicht im Takt pulsieren */
:is(.hero-scene, .orb-ui) .orb.orb-pulse:not(.on) .orb-c { animation: gb-breathe 6.4s calc(1.4s + var(--i) * 1.3s) ease-in-out infinite; }
:is(.hero-scene, .orb-ui) .orb.orb-pulse:not(.on) .orb-c::after { border: 1.5px solid rgba(127,220,255,.75); animation: gb-ping 6.4s calc(1.4s + var(--i) * 1.3s) ease-out infinite; }
@keyframes gb-breathe { 0%, 38%, 100% { transform: none; } 19% { transform: scale(1.06); } }
@keyframes gb-ping { 0% { opacity: 0; transform: scale(1); } 6% { opacity: .5; } 34%, 100% { opacity: 0; transform: scale(1.75); } }

/* Freigeben ohne Ziehen (Tippen, Notausgang): Orbs nur leise einblenden */
:is(.hero-scene, .orb-ui) .orb.orb-quiet .orb-c { animation: gb-fade .4s ease both; }
@keyframes gb-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .orbs-wait :is(.hero-scene, .orb-ui) .orb:not(.orb-in) { opacity: 1; visibility: visible; pointer-events: auto; }
  :is(.hero-scene, .orb-ui) .orb.orb-snap .orb-c, :is(.hero-scene, .orb-ui) .orb.orb-quiet .orb-c, :is(.hero-scene, .orb-ui) .orb.orb-snap::before,
  :is(.hero-scene, .orb-ui) .orb.orb-pulse .orb-c, :is(.hero-scene, .orb-ui) .orb.orb-pulse .orb-c::after { animation: none !important; }
}

/* Während die ersten drei Züge geschluckt werden – kein natives vertikales Scrollen/Überscrollen per Touch (Chrome Android) */
html.orbs-block { touch-action: pan-x pinch-zoom; overscroll-behavior-y: none; }

/* Gummiband: der nächste Orb lädt sich beim Ziehen leise auf (Deckkraft/Größe setzt gummiband.js je Frame), farbneutral wie der Orb selbst */
.orbs-wait :is(.hero-scene, .orb-ui) .orb.gb-charge:not(.orb-in) { visibility: visible; opacity: 0; pointer-events: none; }
:is(.hero-scene, .orb-ui) .orb.gb-charge .orb-c { animation: none; }
:is(.hero-scene, .orb-ui) .orb.gb-charge .orb-c::after { animation: none; }
/* iOS-Haptik: verstecktes Schalter-Häkchen (nur für den System-Tick) */
.gb-hap { display: none; }