.page-landing .hero-fireflies {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    contain: layout paint;
}

.page-landing .hero-firefly {
    --firefly-x: 50%;
    --firefly-y: 50%;
    --firefly-size: 12px;
    --firefly-scale: 1;
    --firefly-drift-x: 18px;
    --firefly-drift-y: -24px;
    --firefly-path-duration: 18s;
    --firefly-pulse-duration: 4600ms;
    --firefly-flash-duration: 7200ms;
    --firefly-path-delay: 0s;
    --firefly-pulse-delay: 0s;
    --firefly-flash-delay: 0s;
    position: absolute;
    left: var(--firefly-x);
    top: var(--firefly-y);
    width: var(--firefly-size);
    height: var(--firefly-size);
    margin-left: calc(var(--firefly-size) * -0.5);
    margin-top: calc(var(--firefly-size) * -0.5);
    border-radius: 50%;
    opacity: 0.92;
    transform: translate3d(0, 0, 0) scale(var(--firefly-scale));
    will-change: transform, opacity;
    animation: hero-firefly-path var(--firefly-path-duration) ease-in-out infinite;
    animation-delay: var(--firefly-path-delay);
}

.page-landing .hero-firefly::before,
.page-landing .hero-firefly::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.page-landing .hero-firefly::before {
    inset: -75%;
    background: radial-gradient(circle,
            rgba(255, 96, 166, 0.34) 0%,
            rgba(186, 118, 255, 0.2) 38%,
            rgba(186, 118, 255, 0.08) 58%,
            rgba(186, 118, 255, 0) 76%);
    filter: blur(10px);
    opacity: 0.6;
    animation: hero-firefly-breathe var(--firefly-pulse-duration) ease-in-out infinite;
    animation-delay: var(--firefly-pulse-delay);
}

.page-landing .hero-firefly::after {
    background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 0 16%,
            rgba(255, 246, 252, 0.98) 24%,
            rgba(255, 120, 190, 0.95) 42%,
            rgba(186, 118, 255, 0.72) 58%,
            rgba(125, 92, 255, 0.22) 76%,
            rgba(125, 92, 255, 0) 100%);
    box-shadow: 0 0 0 0 rgba(255, 90, 170, 0);
    opacity: 0.34;
    animation: hero-firefly-flash var(--firefly-flash-duration) linear infinite;
    animation-delay: var(--firefly-flash-delay);
}

.page-landing .hero-firefly:nth-child(1) {
    --firefly-x: 11%;
    --firefly-y: 18%;
    --firefly-size: 10px;
    --firefly-scale: 0.88;
    --firefly-drift-x: 20px;
    --firefly-drift-y: -26px;
    --firefly-path-duration: 14s;
    --firefly-pulse-duration: 3800ms;
    --firefly-flash-duration: 6100ms;
    --firefly-path-delay: -3s;
    --firefly-flash-delay: -1.4s;
}

.page-landing .hero-firefly:nth-child(2) {
    --firefly-x: 23%;
    --firefly-y: 12%;
    --firefly-size: 12px;
    --firefly-scale: 0.82;
    --firefly-drift-x: -18px;
    --firefly-drift-y: 24px;
    --firefly-path-duration: 17s;
    --firefly-pulse-duration: 4300ms;
    --firefly-flash-duration: 7600ms;
    --firefly-path-delay: -9s;
    --firefly-flash-delay: -5.2s;
}

.page-landing .hero-firefly:nth-child(3) {
    --firefly-x: 79%;
    --firefly-y: 16%;
    --firefly-size: 9px;
    --firefly-scale: 0.76;
    --firefly-drift-x: -22px;
    --firefly-drift-y: 18px;
    --firefly-path-duration: 15s;
    --firefly-pulse-duration: 3600ms;
    --firefly-flash-duration: 5400ms;
    --firefly-path-delay: -6s;
    --firefly-flash-delay: -2.3s;
}

.page-landing .hero-firefly:nth-child(4) {
    --firefly-x: 90%;
    --firefly-y: 27%;
    --firefly-size: 11px;
    --firefly-scale: 0.92;
    --firefly-drift-x: -24px;
    --firefly-drift-y: -20px;
    --firefly-path-duration: 18s;
    --firefly-pulse-duration: 4900ms;
    --firefly-flash-duration: 8000ms;
    --firefly-path-delay: -11s;
    --firefly-flash-delay: -6.8s;
}

.page-landing .hero-firefly:nth-child(5) {
    --firefly-x: 17%;
    --firefly-y: 41%;
    --firefly-size: 13px;
    --firefly-scale: 1.02;
    --firefly-drift-x: 24px;
    --firefly-drift-y: -28px;
    --firefly-path-duration: 20s;
    --firefly-pulse-duration: 5200ms;
    --firefly-flash-duration: 6900ms;
    --firefly-path-delay: -7s;
    --firefly-flash-delay: -3.7s;
}

.page-landing .hero-firefly:nth-child(6) {
    --firefly-x: 33%;
    --firefly-y: 30%;
    --firefly-size: 10px;
    --firefly-scale: 0.8;
    --firefly-drift-x: -20px;
    --firefly-drift-y: 22px;
    --firefly-path-duration: 16s;
    --firefly-pulse-duration: 4100ms;
    --firefly-flash-duration: 5600ms;
    --firefly-path-delay: -13s;
    --firefly-flash-delay: -4.1s;
}

.page-landing .hero-firefly:nth-child(7) {
    --firefly-x: 68%;
    --firefly-y: 34%;
    --firefly-size: 14px;
    --firefly-scale: 1.06;
    --firefly-drift-x: 18px;
    --firefly-drift-y: -22px;
    --firefly-path-duration: 19s;
    --firefly-pulse-duration: 4700ms;
    --firefly-flash-duration: 8800ms;
    --firefly-path-delay: -8s;
    --firefly-flash-delay: -7.4s;
}

.page-landing .hero-firefly:nth-child(8) {
    --firefly-x: 84%;
    --firefly-y: 48%;
    --firefly-size: 9px;
    --firefly-scale: 0.78;
    --firefly-drift-x: -16px;
    --firefly-drift-y: 20px;
    --firefly-path-duration: 13s;
    --firefly-pulse-duration: 3500ms;
    --firefly-flash-duration: 5200ms;
    --firefly-path-delay: -4s;
    --firefly-flash-delay: -1.9s;
}

.page-landing .hero-firefly:nth-child(9) {
    --firefly-x: 24%;
    --firefly-y: 60%;
    --firefly-size: 12px;
    --firefly-scale: 0.95;
    --firefly-drift-x: 22px;
    --firefly-drift-y: -18px;
    --firefly-path-duration: 21s;
    --firefly-pulse-duration: 5400ms;
    --firefly-flash-duration: 7400ms;
    --firefly-path-delay: -15s;
    --firefly-flash-delay: -5.9s;
}

.page-landing .hero-firefly:nth-child(10) {
    --firefly-x: 42%;
    --firefly-y: 54%;
    --firefly-size: 11px;
    --firefly-scale: 0.9;
    --firefly-drift-x: -18px;
    --firefly-drift-y: 24px;
    --firefly-path-duration: 17s;
    --firefly-pulse-duration: 4200ms;
    --firefly-flash-duration: 6800ms;
    --firefly-path-delay: -10s;
    --firefly-flash-delay: -2.8s;
}

.page-landing .hero-firefly:nth-child(11) {
    --firefly-x: 61%;
    --firefly-y: 68%;
    --firefly-size: 13px;
    --firefly-scale: 1;
    --firefly-drift-x: 20px;
    --firefly-drift-y: -26px;
    --firefly-path-duration: 22s;
    --firefly-pulse-duration: 5000ms;
    --firefly-flash-duration: 7900ms;
    --firefly-path-delay: -12s;
    --firefly-flash-delay: -6.1s;
}

.page-landing .hero-firefly:nth-child(12) {
    --firefly-x: 76%;
    --firefly-y: 60%;
    --firefly-size: 10px;
    --firefly-scale: 0.84;
    --firefly-drift-x: -24px;
    --firefly-drift-y: 18px;
    --firefly-path-duration: 16s;
    --firefly-pulse-duration: 3900ms;
    --firefly-flash-duration: 5700ms;
    --firefly-path-delay: -5s;
    --firefly-flash-delay: -3.3s;
}

@keyframes hero-firefly-path {
    0% {
        transform: translate3d(0, 0, 0) scale(var(--firefly-scale));
    }

    24% {
        transform: translate3d(calc(var(--firefly-drift-x) * 0.45), calc(var(--firefly-drift-y) * -0.35), 0) scale(calc(var(--firefly-scale) * 1.04));
    }

    50% {
        transform: translate3d(var(--firefly-drift-x), var(--firefly-drift-y), 0) scale(calc(var(--firefly-scale) * 0.96));
    }

    76% {
        transform: translate3d(calc(var(--firefly-drift-x) * -0.38), calc(var(--firefly-drift-y) * 0.56), 0) scale(calc(var(--firefly-scale) * 1.08));
    }

    100% {
        transform: translate3d(0, 0, 0) scale(var(--firefly-scale));
    }
}

@keyframes hero-firefly-breathe {

    0%,
    100% {
        opacity: 0.18;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.42;
        transform: scale(1.16);
    }
}

@keyframes hero-firefly-flash {

    0%,
    30%,
    100% {
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(255, 90, 170, 0);
    }

    5% {
        opacity: 1;
        box-shadow:
            0 0 20px 4px rgba(255, 90, 170, 0.9),
            0 0 42px 10px rgba(186, 118, 255, 0.5);
    }

    8% {
        opacity: 0.22;
        box-shadow:
            0 0 8px 1px rgba(255, 90, 170, 0.3),
            0 0 18px 4px rgba(186, 118, 255, 0.14);
    }

    19% {
        opacity: 0.78;
        box-shadow:
            0 0 14px 3px rgba(255, 90, 170, 0.72),
            0 0 28px 7px rgba(186, 118, 255, 0.34);
    }

    24% {
        opacity: 0.1;
        box-shadow: 0 0 0 0 rgba(255, 90, 170, 0);
    }

    58% {
        opacity: 0.58;
        box-shadow:
            0 0 12px 2px rgba(255, 90, 170, 0.48),
            0 0 24px 5px rgba(186, 118, 255, 0.22);
    }

    64% {
        opacity: 0.08;
        box-shadow: 0 0 0 0 rgba(255, 90, 170, 0);
    }
}

@media (max-width: 720px) {
    .page-landing .hero-firefly:nth-child(n + 9) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .page-landing .hero-firefly,
    .page-landing .hero-firefly::before,
    .page-landing .hero-firefly::after {
        animation: none;
    }

    .page-landing .hero-firefly::before {
        opacity: 0.24;
    }

    .page-landing .hero-firefly::after {
        opacity: 0.34;
        box-shadow: 0 0 12px rgba(255, 90, 170, 0.28);
    }
}