/* Orbit Hop (12-worlds-c A, Orbit.dc.html). Only additive classes (orb-*) and the keyframes the mock defines that the global sheet lacks. */
.orb-scene-wrap { width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 28px; }
.orb-scene { position: relative; width: 1200px; height: 700px; transform-origin: 0 0; background: #141B3D; border: 3px solid #1E1B2E; border-radius: 28px; box-sizing: border-box; overflow: hidden; }

/* a bean's flight/replay wrapper: zero-size anchor (feet point); x and y are animated on two nested layers so each axis gets its own easing */
.orb-mover { position: absolute; width: 0; height: 0; }
.orb-ax, .orb-ay { position: absolute; left: 0; top: 0; width: 0; height: 0; }

/* scene-scoped tweaks of the shared PwBean to the space variant (A.6) */
.orb-scene .pw-shadow { left: -18px; top: -6px; width: 36px; height: 12px; background: rgba(8,10,30,0.35); }
.orb-scene .orb-fly .pw-shadow { display: none; }
.orb-scene .pw-tag { top: -104px; }
.orb-scene .pw-bubble { top: -172px; }
.orb-scene .bean { isolation: isolate; }
.orb-scene .orb-jet { z-index: -1; }

/* fly: float 0<->-4px with +-6deg wobble (A.6) */
.orb-fly .bean { animation: orb-float .5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes orb-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
.orb-scene .flame { animation: orb-flick .12s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes orb-flick { from { transform: scaleY(1); } to { transform: scaleY(.68); } }

.orb-scene .tw { animation: orb-tw 2.4s ease-in-out infinite; }
@keyframes orb-tw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.orb-scene .spin { animation: orb-spin 8s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
.orb-scene .glow { animation: orb-glow 1.2s ease-in-out infinite; }
@keyframes orb-glow { 0%, 100% { opacity: .95; } 50% { opacity: .35; } }
.orb-scene .dot { opacity: 0; animation: orb-dotin .25s ease-out forwards; }
@keyframes orb-dotin { to { opacity: 1; } }
.orb-scene .dot.done { animation: none; opacity: 1; }

.orb-scene .padhit:hover { background: rgba(255,255,255,.18); }
.orb-scene .psign { transition: transform .15s ease; }
.orb-scene .psign:hover { transform: translate(-50%, -50%) translateY(-3px) !important; }

/* reduced motion: OS preference or session.reducedMotionAll (class `rm` on <html>) */
@media (prefers-reduced-motion: reduce) {
  .orb-fly .bean, .orb-scene .flame, .orb-scene .tw, .orb-scene .spin, .orb-scene .glow { animation: none; }
  .orb-scene .dot { animation: none; opacity: 1; }
  .orb-scene .flame { display: none; }
  .orb-ax, .orb-ay, .orb-mover { animation: none !important; }
}
.rm .orb-fly .bean, .rm .orb-scene .flame, .rm .orb-scene .tw, .rm .orb-scene .spin, .rm .orb-scene .glow { animation: none; }
.rm .orb-scene .dot { animation: none; opacity: 1; }
.rm .orb-scene .flame { display: none; }
.rm .orb-ax, .rm .orb-ay, .rm .orb-mover { animation: none !important; }