/* Demo homepage hero — animated wash from tenant primary/secondary colors.
 * Only loaded from clients/demo templates; other tenants are unaffected.
 */

.mm-home-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse 120% 90% at 50% -10%,
            color-mix(in srgb, var(--primary-color) 18%, #fff) 0%,
            transparent 55%
        ),
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--secondary-color, var(--yellow)) 12%, #fffefb) 0%,
            #f7f4f0 42%,
            color-mix(in srgb, var(--primary-color) 8%, #faf6f2) 100%
        );
}

.mm-home-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    will-change: transform, opacity;
    pointer-events: none;
}

.mm-home-hero-orb--primary {
    width: min(58vw, 34rem);
    height: min(58vw, 34rem);
    top: -18%;
    left: -12%;
    background: radial-gradient(
        circle at 35% 40%,
        color-mix(in srgb, var(--primary-color) 72%, #fff) 0%,
        color-mix(in srgb, var(--primary-color) 28%, transparent) 55%,
        transparent 72%
    );
    opacity: 0.78;
    animation: mm-home-orb-drift-a 18s ease-in-out infinite;
}

.mm-home-hero-orb--secondary {
    width: min(52vw, 30rem);
    height: min(52vw, 30rem);
    right: -14%;
    top: 8%;
    background: radial-gradient(
        circle at 55% 45%,
        color-mix(in srgb, var(--secondary-color, var(--yellow)) 78%, #fff) 0%,
        color-mix(in srgb, var(--secondary-color, var(--yellow)) 30%, transparent) 58%,
        transparent 74%
    );
    opacity: 0.7;
    animation: mm-home-orb-drift-b 22s ease-in-out infinite;
}

.mm-home-hero-orb--mix {
    width: min(46vw, 26rem);
    height: min(46vw, 26rem);
    left: 28%;
    bottom: -22%;
    background: radial-gradient(
        circle at 50% 40%,
        color-mix(
            in srgb,
            var(--primary-color) 45%,
            var(--secondary-color, var(--yellow))
        ) 0%,
        color-mix(
            in srgb,
            color-mix(
                in srgb,
                var(--primary-color) 45%,
                var(--secondary-color, var(--yellow))
            ) 32%,
            transparent
        ) 60%,
        transparent 76%
    );
    opacity: 0.55;
    animation: mm-home-orb-drift-c 26s ease-in-out infinite;
}

.mm-home-hero-shine {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background: conic-gradient(
        from 210deg at 50% 45%,
        transparent 0deg,
        color-mix(in srgb, var(--primary-color) 14%, transparent) 70deg,
        transparent 140deg,
        color-mix(in srgb, var(--secondary-color, var(--yellow)) 16%, transparent) 210deg,
        transparent 280deg,
        color-mix(in srgb, var(--primary-color) 10%, transparent) 330deg,
        transparent 360deg
    );
    opacity: 0.55;
    mix-blend-mode: multiply;
    animation: mm-home-shine-spin 36s linear infinite;
}

.mm-home-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(
        circle at 1px 1px,
        rgba(0, 0, 0, 0.045) 1px,
        transparent 0
    );
    background-size: 22px 22px;
    opacity: 0.55;
}

@keyframes mm-home-orb-drift-a {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(8%, 10%, 0) scale(1.08);
    }
    66% {
        transform: translate3d(3%, 16%, 0) scale(0.94);
    }
}

@keyframes mm-home-orb-drift-b {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    40% {
        transform: translate3d(-10%, 8%, 0) scale(1.1);
    }
    70% {
        transform: translate3d(-4%, -6%, 0) scale(0.96);
    }
}

@keyframes mm-home-orb-drift-c {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(12%, -10%, 0) scale(1.12);
    }
}

@keyframes mm-home-shine-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-home-hero-orb--primary,
    .mm-home-hero-orb--secondary,
    .mm-home-hero-orb--mix,
    .mm-home-hero-shine {
        animation: none;
    }
}