.orb { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(42px); opacity: .35; pointer-events: none; animation: floatOrb 7s ease-in-out infinite alternate; }
.orb.one { background: var(--heat); left: -110px; top: 30px; }
.orb.two { background: var(--ai); right: -130px; top: 180px; animation-delay: 1s; }
.orb.three { background: var(--toxic); left: 80px; bottom: -160px; animation-delay: 2s; }
@keyframes floatOrb { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(20px,-22px,0) scale(1.08); } }
@keyframes logoPulse { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }
@keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(80,250,155,0); } 100% { box-shadow: 0 0 0 0 rgba(80,250,155,0); } }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.tap3d:active, .tab:active, .btn:active, .chip:active { transform: perspective(300px) rotateX(8deg) translateY(2px) scale(.98); }

@media (pointer: coarse), (max-width: 520px) {
  .orb { animation: none; }
  .page { animation-duration: .16s; }
  .tap3d:active, .tab:active, .btn:active, .chip:active {
    transform: translateY(1px) scale(.985);
  }
}