.hero-mobile-bg {
    display: none;
}

@media (max-width: 767px) {
    .video-background video {
        display: none;
    }

    .hero-mobile-bg {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .hero-mobile-bg svg {
        width: 100%;
        height: 100%;
        display: block;
    }
}

/* transform-only / opacity-only animations: compositor-handled, no layout
   or paint cost per frame, so they're cheap even on low-end phones */
.hero-orbit-dots {
    transform-origin: 700px 760px;
    animation: hero-orbit-spin 60s linear infinite;
}

.hero-core {
    transform-origin: 700px 760px;
    animation: hero-core-pulse 4s ease-in-out infinite;
}

.hero-particle {
    animation: hero-drift 7s ease-in-out infinite;
}

.hero-particle:nth-child(2) { animation-delay: 1.4s; }
.hero-particle:nth-child(3) { animation-delay: 2.6s; }
.hero-particle:nth-child(4) { animation-delay: 0.7s; }

@keyframes hero-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes hero-core-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes hero-drift {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-10px); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-orbit-dots,
    .hero-core,
    .hero-particle {
        animation: none;
    }
}