/* Strong, always-visible motion layer for the homepage hero. */
.home-hero-stage .hero-form,
.home-hero-stage .hero-ring {
    transform-origin: 50% 50%;
}

.hero-form-back {
    animation: web7FloatA 7.5s ease-in-out infinite alternate;
}

.hero-form-left {
    animation: web7FloatB 5.8s ease-in-out -1.4s infinite alternate;
}

.hero-form-main {
    animation: web7FloatMain 8.8s ease-in-out -2.1s infinite alternate;
}

.hero-form-bottom {
    animation: web7FloatC 6.8s ease-in-out -.8s infinite alternate;
}

.hero-form-top-right {
    animation: web7FloatD 5.4s ease-in-out -2.7s infinite alternate;
}

.hero-form-right {
    animation: web7FloatE 6.2s ease-in-out -1.8s infinite alternate;
}

.hero-ring-main {
    animation: web7RingMain 13s ease-in-out infinite alternate;
}

.hero-ring-orbit {
    animation: web7RingOrbit 10s ease-in-out -3s infinite alternate;
}

.hero-core-glow {
    animation: web7GlowPulse 3.2s ease-in-out infinite alternate;
}

.home-hero-kicker-dot {
    animation: web7DotPulse 1.65s ease-in-out infinite;
}

@keyframes web7FloatA {
    0% { translate: -8px -12px; scale: .98; rotate: -3deg; }
    45% { translate: 12px 13px; scale: 1.04; rotate: 5deg; }
    100% { translate: -3px 24px; scale: 1; rotate: -1deg; }
}

@keyframes web7FloatB {
    0% { translate: -16px 5px; scale: .96; rotate: -5deg; }
    50% { translate: 20px -18px; scale: 1.07; rotate: 6deg; }
    100% { translate: 8px 15px; scale: 1.01; rotate: 2deg; }
}

@keyframes web7FloatMain {
    0% { translate: -8px -8px; scale: .985; rotate: -1.5deg; filter: saturate(.95); }
    50% { translate: 13px 16px; scale: 1.035; rotate: 2deg; filter: saturate(1.15); }
    100% { translate: -5px 7px; scale: 1; rotate: -1deg; filter: saturate(1.02); }
}

@keyframes web7FloatC {
    0% { translate: -12px 14px; scale: .98; rotate: -4deg; }
    50% { translate: 16px -14px; scale: 1.045; rotate: 4deg; }
    100% { translate: 4px 20px; scale: 1.01; rotate: -2deg; }
}

@keyframes web7FloatD {
    0% { translate: -9px -15px; scale: .94; rotate: -7deg; }
    50% { translate: 18px 12px; scale: 1.08; rotate: 7deg; }
    100% { translate: -2px 21px; scale: 1; rotate: 1deg; }
}

@keyframes web7FloatE {
    0% { translate: 12px -10px; scale: .96; rotate: 5deg; }
    50% { translate: -20px 14px; scale: 1.06; rotate: -6deg; }
    100% { translate: 8px 24px; scale: 1.01; rotate: 2deg; }
}

@keyframes web7RingMain {
    0% { translate: -9px -5px; scale: .98; rotate: -3deg; opacity: .72; }
    50% { translate: 14px 11px; scale: 1.035; rotate: 5deg; opacity: 1; }
    100% { translate: -4px 17px; scale: 1.01; rotate: -2deg; opacity: .84; }
}

@keyframes web7RingOrbit {
    0% { translate: 15px 5px; scale: .96; rotate: 8deg; opacity: .55; }
    50% { translate: -15px -13px; scale: 1.055; rotate: -7deg; opacity: .9; }
    100% { translate: 8px 18px; scale: 1; rotate: 4deg; opacity: .7; }
}

@keyframes web7GlowPulse {
    0% { scale: .72; opacity: .45; filter: blur(30px); }
    100% { scale: 1.45; opacity: .95; filter: blur(44px); }
}

@keyframes web7DotPulse {
    0%, 100% { scale: .8; box-shadow: 0 0 8px rgba(124,58,237,.45); }
    50% { scale: 1.35; box-shadow: 0 0 22px rgba(124,58,237,.95); }
}

/* Make movement obvious when the pointer is over the composition. */
.home-hero-stage:hover .hero-form-main {
    filter: saturate(1.2) brightness(1.05);
}

@media (max-width: 900px) {
    .hero-form-back,
    .hero-form-left,
    .hero-form-main,
    .hero-form-bottom,
    .hero-form-top-right,
    .hero-form-right,
    .hero-ring-main,
    .hero-ring-orbit {
        animation-duration: 7s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-form-back,
    .hero-form-left,
    .hero-form-main,
    .hero-form-bottom,
    .hero-form-top-right,
    .hero-form-right,
    .hero-ring-main,
    .hero-ring-orbit,
    .hero-core-glow,
    .home-hero-kicker-dot {
        animation: none !important;
    }
}