/* ==========================================================================
   Particle Animation Background
   ========================================================================== */

/* Particle Container - Fixed background layer */
.particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind all content */
    pointer-events: none; /* Don't interfere with clicks */
    overflow: hidden;
}

/* Base styles for all particle containers */
.circle-container {
    position: absolute;
    transform: translateY(-10vh);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Circle (particle) styles */
.circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    mix-blend-mode: screen;
    background-image: radial-gradient(
        #c084fc,
        #c084fc 10%,
        rgba(192, 132, 252, 0) 56%
    );
    animation: fade-frames 200ms infinite, scale-frames 2s infinite;
}

/* Fade animation for particles */
@keyframes fade-frames {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* Scale animation for particles */
@keyframes scale-frames {
    0% {
        transform: scale3d(0.4, 0.4, 1);
    }
    50% {
        transform: scale3d(2.2, 2.2, 1);
    }
    100% {
        transform: scale3d(0.4, 0.4, 1);
    }
}

/* Particles enabled on all devices including mobile */
/* Removed mobile display:none to show particles on all screen sizes */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .particle-container {
        display: none;
    }
}

/* Individual particle animations - First 50 particles */
.circle-container.circle-1 { width: 7px; height: 7px; animation-name: move-frames-1; animation-duration: 9500ms; animation-delay: 3200ms; }
@keyframes move-frames-1 { from { transform: translate3d(45vw, 105vh, 0); } to { transform: translate3d(78vw, -125vh, 0); } }
.circle-container.circle-1 .circle { animation-delay: 1800ms; }

.circle-container.circle-2 { width: 4px; height: 4px; animation-name: move-frames-2; animation-duration: 8200ms; animation-delay: 6500ms; }
@keyframes move-frames-2 { from { transform: translate3d(12vw, 102vh, 0); } to { transform: translate3d(34vw, -118vh, 0); } }
.circle-container.circle-2 .circle { animation-delay: 2400ms; }

.circle-container.circle-3 { width: 9px; height: 9px; animation-name: move-frames-3; animation-duration: 10200ms; animation-delay: 1100ms; }
@keyframes move-frames-3 { from { transform: translate3d(88vw, 108vh, 0); } to { transform: translate3d(56vw, -132vh, 0); } }
.circle-container.circle-3 .circle { animation-delay: 3100ms; }

.circle-container.circle-4 { width: 6px; height: 6px; animation-name: move-frames-4; animation-duration: 7800ms; animation-delay: 8900ms; }
@keyframes move-frames-4 { from { transform: translate3d(23vw, 104vh, 0); } to { transform: translate3d(67vw, -121vh, 0); } }
.circle-container.circle-4 .circle { animation-delay: 900ms; }

.circle-container.circle-5 { width: 8px; height: 8px; animation-name: move-frames-5; animation-duration: 9100ms; animation-delay: 4700ms; }
@keyframes move-frames-5 { from { transform: translate3d(67vw, 107vh, 0); } to { transform: translate3d(23vw, -128vh, 0); } }
.circle-container.circle-5 .circle { animation-delay: 2700ms; }

.circle-container.circle-6 { width: 5px; height: 5px; animation-name: move-frames-6; animation-duration: 8600ms; animation-delay: 2300ms; }
@keyframes move-frames-6 { from { transform: translate3d(34vw, 101vh, 0); } to { transform: translate3d(89vw, -115vh, 0); } }
.circle-container.circle-6 .circle { animation-delay: 1200ms; }

.circle-container.circle-7 { width: 10px; height: 10px; animation-name: move-frames-7; animation-duration: 10800ms; animation-delay: 7200ms; }
@keyframes move-frames-7 { from { transform: translate3d(56vw, 109vh, 0); } to { transform: translate3d(12vw, -135vh, 0); } }
.circle-container.circle-7 .circle { animation-delay: 3800ms; }

.circle-container.circle-8 { width: 3px; height: 3px; animation-name: move-frames-8; animation-duration: 7500ms; animation-delay: 5400ms; }
@keyframes move-frames-8 { from { transform: translate3d(78vw, 103vh, 0); } to { transform: translate3d(45vw, -119vh, 0); } }
.circle-container.circle-8 .circle { animation-delay: 600ms; }

.circle-container.circle-9 { width: 7px; height: 7px; animation-name: move-frames-9; animation-duration: 9400ms; animation-delay: 9800ms; }
@keyframes move-frames-9 { from { transform: translate3d(91vw, 106vh, 0); } to { transform: translate3d(67vw, -127vh, 0); } }
.circle-container.circle-9 .circle { animation-delay: 2100ms; }

.circle-container.circle-10 { width: 6px; height: 6px; animation-name: move-frames-10; animation-duration: 8900ms; animation-delay: 1800ms; }
@keyframes move-frames-10 { from { transform: translate3d(29vw, 105vh, 0); } to { transform: translate3d(81vw, -123vh, 0); } }
.circle-container.circle-10 .circle { animation-delay: 3400ms; }

.circle-container.circle-11 { width: 8px; height: 8px; animation-name: move-frames-11; animation-duration: 10500ms; animation-delay: 4100ms; }
@keyframes move-frames-11 { from { transform: translate3d(15vw, 108vh, 0); } to { transform: translate3d(52vw, -131vh, 0); } }
.circle-container.circle-11 .circle { animation-delay: 1500ms; }

.circle-container.circle-12 { width: 9px; height: 9px; animation-name: move-frames-12; animation-duration: 7900ms; animation-delay: 6700ms; }
@keyframes move-frames-12 { from { transform: translate3d(72vw, 102vh, 0); } to { transform: translate3d(38vw, -117vh, 0); } }
.circle-container.circle-12 .circle { animation-delay: 2900ms; }

.circle-container.circle-13 { width: 4px; height: 4px; animation-name: move-frames-13; animation-duration: 8400ms; animation-delay: 3600ms; }
@keyframes move-frames-13 { from { transform: translate3d(48vw, 104vh, 0); } to { transform: translate3d(19vw, -120vh, 0); } }
.circle-container.circle-13 .circle { animation-delay: 800ms; }

.circle-container.circle-14 { width: 10px; height: 10px; animation-name: move-frames-14; animation-duration: 9700ms; animation-delay: 8300ms; }
@keyframes move-frames-14 { from { transform: translate3d(83vw, 107vh, 0); } to { transform: translate3d(61vw, -129vh, 0); } }
.circle-container.circle-14 .circle { animation-delay: 3600ms; }

.circle-container.circle-15 { width: 5px; height: 5px; animation-name: move-frames-15; animation-duration: 10100ms; animation-delay: 2900ms; }
@keyframes move-frames-15 { from { transform: translate3d(37vw, 109vh, 0); } to { transform: translate3d(74vw, -133vh, 0); } }
.circle-container.circle-15 .circle { animation-delay: 1900ms; }

.circle-container.circle-16 { width: 7px; height: 7px; animation-name: move-frames-16; animation-duration: 8700ms; animation-delay: 5200ms; }
@keyframes move-frames-16 { from { transform: translate3d(64vw, 101vh, 0); } to { transform: translate3d(27vw, -114vh, 0); } }
.circle-container.circle-16 .circle { animation-delay: 2600ms; }

.circle-container.circle-17 { width: 6px; height: 6px; animation-name: move-frames-17; animation-duration: 9300ms; animation-delay: 7600ms; }
@keyframes move-frames-17 { from { transform: translate3d(21vw, 106vh, 0); } to { transform: translate3d(85vw, -126vh, 0); } }
.circle-container.circle-17 .circle { animation-delay: 700ms; }

.circle-container.circle-18 { width: 8px; height: 8px; animation-name: move-frames-18; animation-duration: 7600ms; animation-delay: 4500ms; }
@keyframes move-frames-18 { from { transform: translate3d(95vw, 103vh, 0); } to { transform: translate3d(43vw, -118vh, 0); } }
.circle-container.circle-18 .circle { animation-delay: 3200ms; }

.circle-container.circle-19 { width: 9px; height: 9px; animation-name: move-frames-19; animation-duration: 10400ms; animation-delay: 1400ms; }
@keyframes move-frames-19 { from { transform: translate3d(52vw, 108vh, 0); } to { transform: translate3d(16vw, -130vh, 0); } }
.circle-container.circle-19 .circle { animation-delay: 1400ms; }

.circle-container.circle-20 { width: 3px; height: 3px; animation-name: move-frames-20; animation-duration: 8100ms; animation-delay: 9100ms; }
@keyframes move-frames-20 { from { transform: translate3d(76vw, 105vh, 0); } to { transform: translate3d(58vw, -124vh, 0); } }
.circle-container.circle-20 .circle { animation-delay: 2300ms; }

.circle-container.circle-21 { width: 7px; height: 7px; animation-name: move-frames-21; animation-duration: 9600ms; animation-delay: 6200ms; }
@keyframes move-frames-21 { from { transform: translate3d(31vw, 102vh, 0); } to { transform: translate3d(92vw, -116vh, 0); } }
.circle-container.circle-21 .circle { animation-delay: 3900ms; }

.circle-container.circle-22 { width: 10px; height: 10px; animation-name: move-frames-22; animation-duration: 7400ms; animation-delay: 3100ms; }
@keyframes move-frames-22 { from { transform: translate3d(69vw, 107vh, 0); } to { transform: translate3d(35vw, -128vh, 0); } }
.circle-container.circle-22 .circle { animation-delay: 1100ms; }

.circle-container.circle-23 { width: 5px; height: 5px; animation-name: move-frames-23; animation-duration: 10700ms; animation-delay: 8600ms; }
@keyframes move-frames-23 { from { transform: translate3d(18vw, 104vh, 0); } to { transform: translate3d(71vw, -121vh, 0); } }
.circle-container.circle-23 .circle { animation-delay: 2800ms; }

.circle-container.circle-24 { width: 6px; height: 6px; animation-name: move-frames-24; animation-duration: 8800ms; animation-delay: 2600ms; }
@keyframes move-frames-24 { from { transform: translate3d(87vw, 109vh, 0); } to { transform: translate3d(49vw, -134vh, 0); } }
.circle-container.circle-24 .circle { animation-delay: 500ms; }

.circle-container.circle-25 { width: 8px; height: 8px; animation-name: move-frames-25; animation-duration: 9200ms; animation-delay: 5800ms; }
@keyframes move-frames-25 { from { transform: translate3d(42vw, 101vh, 0); } to { transform: translate3d(14vw, -113vh, 0); } }
.circle-container.circle-25 .circle { animation-delay: 3500ms; }

.circle-container.circle-26 { width: 4px; height: 4px; animation-name: move-frames-26; animation-duration: 10300ms; animation-delay: 7900ms; }
@keyframes move-frames-26 { from { transform: translate3d(63vw, 106vh, 0); } to { transform: translate3d(80vw, -127vh, 0); } }
.circle-container.circle-26 .circle { animation-delay: 1600ms; }

.circle-container.circle-27 { width: 9px; height: 9px; animation-name: move-frames-27; animation-duration: 7700ms; animation-delay: 4800ms; }
@keyframes move-frames-27 { from { transform: translate3d(26vw, 103vh, 0); } to { transform: translate3d(55vw, -119vh, 0); } }
.circle-container.circle-27 .circle { animation-delay: 2200ms; }

.circle-container.circle-28 { width: 7px; height: 7px; animation-name: move-frames-28; animation-duration: 9900ms; animation-delay: 1700ms; }
@keyframes move-frames-28 { from { transform: translate3d(94vw, 108vh, 0); } to { transform: translate3d(22vw, -132vh, 0); } }
.circle-container.circle-28 .circle { animation-delay: 3700ms; }

.circle-container.circle-29 { width: 10px; height: 10px; animation-name: move-frames-29; animation-duration: 8300ms; animation-delay: 9400ms; }
@keyframes move-frames-29 { from { transform: translate3d(51vw, 105vh, 0); } to { transform: translate3d(68vw, -125vh, 0); } }
.circle-container.circle-29 .circle { animation-delay: 1000ms; }

.circle-container.circle-30 { width: 6px; height: 6px; animation-name: move-frames-30; animation-duration: 10600ms; animation-delay: 6400ms; }
@keyframes move-frames-30 { from { transform: translate3d(79vw, 102vh, 0); } to { transform: translate3d(41vw, -117vh, 0); } }
.circle-container.circle-30 .circle { animation-delay: 2500ms; }

/* Particles 31-60 */
.circle-container.circle-31 { width: 5px; height: 5px; animation-name: move-frames-31; animation-duration: 7300ms; animation-delay: 3400ms; }
@keyframes move-frames-31 { from { transform: translate3d(33vw, 107vh, 0); } to { transform: translate3d(86vw, -129vh, 0); } }
.circle-container.circle-31 .circle { animation-delay: 900ms; }

.circle-container.circle-32 { width: 8px; height: 8px; animation-name: move-frames-32; animation-duration: 9800ms; animation-delay: 8100ms; }
@keyframes move-frames-32 { from { transform: translate3d(60vw, 104vh, 0); } to { transform: translate3d(25vw, -122vh, 0); } }
.circle-container.circle-32 .circle { animation-delay: 3300ms; }

.circle-container.circle-33 { width: 9px; height: 9px; animation-name: move-frames-33; animation-duration: 8500ms; animation-delay: 2100ms; }
@keyframes move-frames-33 { from { transform: translate3d(17vw, 109vh, 0); } to { transform: translate3d(73vw, -135vh, 0); } }
.circle-container.circle-33 .circle { animation-delay: 1700ms; }

.circle-container.circle-34 { width: 4px; height: 4px; animation-name: move-frames-34; animation-duration: 10900ms; animation-delay: 5500ms; }
@keyframes move-frames-34 { from { transform: translate3d(84vw, 101vh, 0); } to { transform: translate3d(47vw, -115vh, 0); } }
.circle-container.circle-34 .circle { animation-delay: 2000ms; }

.circle-container.circle-35 { width: 7px; height: 7px; animation-name: move-frames-35; animation-duration: 7800ms; animation-delay: 9700ms; }
@keyframes move-frames-35 { from { transform: translate3d(39vw, 106vh, 0); } to { transform: translate3d(11vw, -126vh, 0); } }
.circle-container.circle-35 .circle { animation-delay: 3800ms; }

.circle-container.circle-36 { width: 10px; height: 10px; animation-name: move-frames-36; animation-duration: 9100ms; animation-delay: 4200ms; }
@keyframes move-frames-36 { from { transform: translate3d(70vw, 103vh, 0); } to { transform: translate3d(59vw, -118vh, 0); } }
.circle-container.circle-36 .circle { animation-delay: 1300ms; }

.circle-container.circle-37 { width: 6px; height: 6px; animation-name: move-frames-37; animation-duration: 10200ms; animation-delay: 7300ms; }
@keyframes move-frames-37 { from { transform: translate3d(28vw, 108vh, 0); } to { transform: translate3d(93vw, -131vh, 0); } }
.circle-container.circle-37 .circle { animation-delay: 2600ms; }

.circle-container.circle-38 { width: 3px; height: 3px; animation-name: move-frames-38; animation-duration: 8600ms; animation-delay: 1900ms; }
@keyframes move-frames-38 { from { transform: translate3d(96vw, 105vh, 0); } to { transform: translate3d(32vw, -124vh, 0); } }
.circle-container.circle-38 .circle { animation-delay: 400ms; }

.circle-container.circle-39 { width: 8px; height: 8px; animation-name: move-frames-39; animation-duration: 7500ms; animation-delay: 6100ms; }
@keyframes move-frames-39 { from { transform: translate3d(53vw, 102vh, 0); } to { transform: translate3d(77vw, -116vh, 0); } }
.circle-container.circle-39 .circle { animation-delay: 3100ms; }

.circle-container.circle-40 { width: 9px; height: 9px; animation-name: move-frames-40; animation-duration: 9400ms; animation-delay: 3700ms; }
@keyframes move-frames-40 { from { transform: translate3d(20vw, 107vh, 0); } to { transform: translate3d(65vw, -128vh, 0); } }
.circle-container.circle-40 .circle { animation-delay: 1800ms; }

.circle-container.circle-41 { width: 5px; height: 5px; animation-name: move-frames-41; animation-duration: 10500ms; animation-delay: 8800ms; }
@keyframes move-frames-41 { from { transform: translate3d(75vw, 104vh, 0); } to { transform: translate3d(44vw, -121vh, 0); } }
.circle-container.circle-41 .circle { animation-delay: 2900ms; }

.circle-container.circle-42 { width: 7px; height: 7px; animation-name: move-frames-42; animation-duration: 8200ms; animation-delay: 2800ms; }
@keyframes move-frames-42 { from { transform: translate3d(46vw, 109vh, 0); } to { transform: translate3d(18vw, -133vh, 0); } }
.circle-container.circle-42 .circle { animation-delay: 700ms; }

.circle-container.circle-43 { width: 10px; height: 10px; animation-name: move-frames-43; animation-duration: 9700ms; animation-delay: 5900ms; }
@keyframes move-frames-43 { from { transform: translate3d(82vw, 101vh, 0); } to { transform: translate3d(50vw, -114vh, 0); } }
.circle-container.circle-43 .circle { animation-delay: 3400ms; }

.circle-container.circle-44 { width: 4px; height: 4px; animation-name: move-frames-44; animation-duration: 7900ms; animation-delay: 10200ms; }
@keyframes move-frames-44 { from { transform: translate3d(36vw, 106vh, 0); } to { transform: translate3d(88vw, -127vh, 0); } }
.circle-container.circle-44 .circle { animation-delay: 1500ms; }

.circle-container.circle-45 { width: 6px; height: 6px; animation-name: move-frames-45; animation-duration: 10800ms; animation-delay: 4600ms; }
@keyframes move-frames-45 { from { transform: translate3d(62vw, 103vh, 0); } to { transform: translate3d(29vw, -119vh, 0); } }
.circle-container.circle-45 .circle { animation-delay: 2100ms; }

.circle-container.circle-46 { width: 8px; height: 8px; animation-name: move-frames-46; animation-duration: 8900ms; animation-delay: 7500ms; }
@keyframes move-frames-46 { from { transform: translate3d(24vw, 108vh, 0); } to { transform: translate3d(71vw, -130vh, 0); } }
.circle-container.circle-46 .circle { animation-delay: 3600ms; }

.circle-container.circle-47 { width: 9px; height: 9px; animation-name: move-frames-47; animation-duration: 7600ms; animation-delay: 1600ms; }
@keyframes move-frames-47 { from { transform: translate3d(90vw, 105vh, 0); } to { transform: translate3d(40vw, -125vh, 0); } }
.circle-container.circle-47 .circle { animation-delay: 800ms; }

.circle-container.circle-48 { width: 5px; height: 5px; animation-name: move-frames-48; animation-duration: 9300ms; animation-delay: 9000ms; }
@keyframes move-frames-48 { from { transform: translate3d(57vw, 102vh, 0); } to { transform: translate3d(13vw, -117vh, 0); } }
.circle-container.circle-48 .circle { animation-delay: 2700ms; }

.circle-container.circle-49 { width: 7px; height: 7px; animation-name: move-frames-49; animation-duration: 10100ms; animation-delay: 3900ms; }
@keyframes move-frames-49 { from { transform: translate3d(19vw, 107vh, 0); } to { transform: translate3d(82vw, -129vh, 0); } }
.circle-container.circle-49 .circle { animation-delay: 1200ms; }

.circle-container.circle-50 { width: 10px; height: 10px; animation-name: move-frames-50; animation-duration: 8400ms; animation-delay: 6800ms; }
@keyframes move-frames-50 { from { transform: translate3d(74vw, 104vh, 0); } to { transform: translate3d(54vw, -122vh, 0); } }
.circle-container.circle-50 .circle { animation-delay: 3900ms; }

.circle-container.circle-51 { width: 6px; height: 6px; animation-name: move-frames-51; animation-duration: 9600ms; animation-delay: 2400ms; }
@keyframes move-frames-51 { from { transform: translate3d(41vw, 109vh, 0); } to { transform: translate3d(95vw, -134vh, 0); } }
.circle-container.circle-51 .circle { animation-delay: 600ms; }

.circle-container.circle-52 { width: 4px; height: 4px; animation-name: move-frames-52; animation-duration: 7200ms; animation-delay: 8400ms; }
@keyframes move-frames-52 { from { transform: translate3d(68vw, 101vh, 0); } to { transform: translate3d(36vw, -113vh, 0); } }
.circle-container.circle-52 .circle { animation-delay: 3200ms; }

.circle-container.circle-53 { width: 8px; height: 8px; animation-name: move-frames-53; animation-duration: 10400ms; animation-delay: 5100ms; }
@keyframes move-frames-53 { from { transform: translate3d(30vw, 106vh, 0); } to { transform: translate3d(63vw, -126vh, 0); } }
.circle-container.circle-53 .circle { animation-delay: 1900ms; }

.circle-container.circle-54 { width: 9px; height: 9px; animation-name: move-frames-54; animation-duration: 8700ms; animation-delay: 10500ms; }
@keyframes move-frames-54 { from { transform: translate3d(85vw, 103vh, 0); } to { transform: translate3d(21vw, -118vh, 0); } }
.circle-container.circle-54 .circle { animation-delay: 2400ms; }

.circle-container.circle-55 { width: 7px; height: 7px; animation-name: move-frames-55; animation-duration: 9200ms; animation-delay: 4400ms; }
@keyframes move-frames-55 { from { transform: translate3d(49vw, 108vh, 0); } to { transform: translate3d(76vw, -131vh, 0); } }
.circle-container.circle-55 .circle { animation-delay: 1100ms; }

.circle-container.circle-56 { width: 5px; height: 5px; animation-name: move-frames-56; animation-duration: 7700ms; animation-delay: 7100ms; }
@keyframes move-frames-56 { from { transform: translate3d(14vw, 105vh, 0); } to { transform: translate3d(58vw, -124vh, 0); } }
.circle-container.circle-56 .circle { animation-delay: 3500ms; }

.circle-container.circle-57 { width: 10px; height: 10px; animation-name: move-frames-57; animation-duration: 10700ms; animation-delay: 1300ms; }
@keyframes move-frames-57 { from { transform: translate3d(77vw, 102vh, 0); } to { transform: translate3d(42vw, -116vh, 0); } }
.circle-container.circle-57 .circle { animation-delay: 800ms; }

.circle-container.circle-58 { width: 6px; height: 6px; animation-name: move-frames-58; animation-duration: 8100ms; animation-delay: 9300ms; }
@keyframes move-frames-58 { from { transform: translate3d(38vw, 107vh, 0); } to { transform: translate3d(91vw, -128vh, 0); } }
.circle-container.circle-58 .circle { animation-delay: 2800ms; }

.circle-container.circle-59 { width: 8px; height: 8px; animation-name: move-frames-59; animation-duration: 9500ms; animation-delay: 3200ms; }
@keyframes move-frames-59 { from { transform: translate3d(66vw, 104vh, 0); } to { transform: translate3d(27vw, -121vh, 0); } }
.circle-container.circle-59 .circle { animation-delay: 1400ms; }

.circle-container.circle-60 { width: 9px; height: 9px; animation-name: move-frames-60; animation-duration: 8300ms; animation-delay: 6300ms; }
@keyframes move-frames-60 { from { transform: translate3d(22vw, 109vh, 0); } to { transform: translate3d(69vw, -133vh, 0); } }
.circle-container.circle-60 .circle { animation-delay: 3700ms; }

/* Particles 61-90 */
.circle-container.circle-61 { width: 4px; height: 4px; animation-name: move-frames-61; animation-duration: 10000ms; animation-delay: 2700ms; }
@keyframes move-frames-61 { from { transform: translate3d(81vw, 101vh, 0); } to { transform: translate3d(48vw, -115vh, 0); } }
.circle-container.circle-61 .circle { animation-delay: 1600ms; }

.circle-container.circle-62 { width: 7px; height: 7px; animation-name: move-frames-62; animation-duration: 7400ms; animation-delay: 8700ms; }
@keyframes move-frames-62 { from { transform: translate3d(35vw, 106vh, 0); } to { transform: translate3d(15vw, -127vh, 0); } }
.circle-container.circle-62 .circle { animation-delay: 2200ms; }

.circle-container.circle-63 { width: 10px; height: 10px; animation-name: move-frames-63; animation-duration: 9100ms; animation-delay: 5400ms; }
@keyframes move-frames-63 { from { transform: translate3d(92vw, 103vh, 0); } to { transform: translate3d(61vw, -119vh, 0); } }
.circle-container.circle-63 .circle { animation-delay: 3300ms; }

.circle-container.circle-64 { width: 5px; height: 5px; animation-name: move-frames-64; animation-duration: 8600ms; animation-delay: 1200ms; }
@keyframes move-frames-64 { from { transform: translate3d(55vw, 108vh, 0); } to { transform: translate3d(83vw, -130vh, 0); } }
.circle-container.circle-64 .circle { animation-delay: 900ms; }

.circle-container.circle-65 { width: 6px; height: 6px; animation-name: move-frames-65; animation-duration: 10300ms; animation-delay: 9600ms; }
@keyframes move-frames-65 { from { transform: translate3d(26vw, 105vh, 0); } to { transform: translate3d(37vw, -125vh, 0); } }
.circle-container.circle-65 .circle { animation-delay: 2500ms; }

.circle-container.circle-66 { width: 8px; height: 8px; animation-name: move-frames-66; animation-duration: 7800ms; animation-delay: 4100ms; }
@keyframes move-frames-66 { from { transform: translate3d(73vw, 102vh, 0); } to { transform: translate3d(52vw, -117vh, 0); } }
.circle-container.circle-66 .circle { animation-delay: 1800ms; }

.circle-container.circle-67 { width: 9px; height: 9px; animation-name: move-frames-67; animation-duration: 9400ms; animation-delay: 7800ms; }
@keyframes move-frames-67 { from { transform: translate3d(44vw, 107vh, 0); } to { transform: translate3d(94vw, -129vh, 0); } }
.circle-container.circle-67 .circle { animation-delay: 3100ms; }

.circle-container.circle-68 { width: 3px; height: 3px; animation-name: move-frames-68; animation-duration: 8200ms; animation-delay: 2500ms; }
@keyframes move-frames-68 { from { transform: translate3d(16vw, 104vh, 0); } to { transform: translate3d(70vw, -121vh, 0); } }
.circle-container.circle-68 .circle { animation-delay: 700ms; }

.circle-container.circle-69 { width: 7px; height: 7px; animation-name: move-frames-69; animation-duration: 10600ms; animation-delay: 6600ms; }
@keyframes move-frames-69 { from { transform: translate3d(89vw, 109vh, 0); } to { transform: translate3d(33vw, -134vh, 0); } }
.circle-container.circle-69 .circle { animation-delay: 3800ms; }

.circle-container.circle-70 { width: 10px; height: 10px; animation-name: move-frames-70; animation-duration: 7500ms; animation-delay: 3800ms; }
@keyframes move-frames-70 { from { transform: translate3d(51vw, 101vh, 0); } to { transform: translate3d(78vw, -114vh, 0); } }
.circle-container.circle-70 .circle { animation-delay: 1300ms; }

.circle-container.circle-71 { width: 5px; height: 5px; animation-name: move-frames-71; animation-duration: 9700ms; animation-delay: 10100ms; }
@keyframes move-frames-71 { from { transform: translate3d(23vw, 106vh, 0); } to { transform: translate3d(45vw, -126vh, 0); } }
.circle-container.circle-71 .circle { animation-delay: 2900ms; }

.circle-container.circle-72 { width: 6px; height: 6px; animation-name: move-frames-72; animation-duration: 8900ms; animation-delay: 5700ms; }
@keyframes move-frames-72 { from { transform: translate3d(67vw, 103vh, 0); } to { transform: translate3d(19vw, -118vh, 0); } }
.circle-container.circle-72 .circle { animation-delay: 600ms; }

.circle-container.circle-73 { width: 8px; height: 8px; animation-name: move-frames-73; animation-duration: 10200ms; animation-delay: 1500ms; }
@keyframes move-frames-73 { from { transform: translate3d(40vw, 108vh, 0); } to { transform: translate3d(86vw, -131vh, 0); } }
.circle-container.circle-73 .circle { animation-delay: 3400ms; }

.circle-container.circle-74 { width: 9px; height: 9px; animation-name: move-frames-74; animation-duration: 7600ms; animation-delay: 8200ms; }
@keyframes move-frames-74 { from { transform: translate3d(97vw, 105vh, 0); } to { transform: translate3d(56vw, -124vh, 0); } }
.circle-container.circle-74 .circle { animation-delay: 1100ms; }

.circle-container.circle-75 { width: 4px; height: 4px; animation-name: move-frames-75; animation-duration: 9300ms; animation-delay: 4900ms; }
@keyframes move-frames-75 { from { transform: translate3d(59vw, 102vh, 0); } to { transform: translate3d(28vw, -116vh, 0); } }
.circle-container.circle-75 .circle { animation-delay: 2700ms; }

.circle-container.circle-76 { width: 7px; height: 7px; animation-name: move-frames-76; animation-duration: 8500ms; animation-delay: 9900ms; }
@keyframes move-frames-76 { from { transform: translate3d(31vw, 107vh, 0); } to { transform: translate3d(75vw, -128vh, 0); } }
.circle-container.circle-76 .circle { animation-delay: 3600ms; }

.circle-container.circle-77 { width: 10px; height: 10px; animation-name: move-frames-77; animation-duration: 10800ms; animation-delay: 3300ms; }
@keyframes move-frames-77 { from { transform: translate3d(84vw, 104vh, 0); } to { transform: translate3d(43vw, -122vh, 0); } }
.circle-container.circle-77 .circle { animation-delay: 800ms; }

.circle-container.circle-78 { width: 6px; height: 6px; animation-name: move-frames-78; animation-duration: 7200ms; animation-delay: 7400ms; }
@keyframes move-frames-78 { from { transform: translate3d(47vw, 109vh, 0); } to { transform: translate3d(12vw, -133vh, 0); } }
.circle-container.circle-78 .circle { animation-delay: 2100ms; }

.circle-container.circle-79 { width: 8px; height: 8px; animation-name: move-frames-79; animation-duration: 9600ms; animation-delay: 2000ms; }
@keyframes move-frames-79 { from { transform: translate3d(72vw, 101vh, 0); } to { transform: translate3d(64vw, -113vh, 0); } }
.circle-container.circle-79 .circle { animation-delay: 1500ms; }

.circle-container.circle-80 { width: 9px; height: 9px; animation-name: move-frames-80; animation-duration: 8100ms; animation-delay: 6000ms; }
@keyframes move-frames-80 { from { transform: translate3d(25vw, 106vh, 0); } to { transform: translate3d(90vw, -127vh, 0); } }
.circle-container.circle-80 .circle { animation-delay: 3200ms; }

.circle-container.circle-81 { width: 5px; height: 5px; animation-name: move-frames-81; animation-duration: 10500ms; animation-delay: 10800ms; }
@keyframes move-frames-81 { from { transform: translate3d(88vw, 103vh, 0); } to { transform: translate3d(39vw, -119vh, 0); } }
.circle-container.circle-81 .circle { animation-delay: 900ms; }

.circle-container.circle-82 { width: 7px; height: 7px; animation-name: move-frames-82; animation-duration: 7900ms; animation-delay: 5200ms; }
@keyframes move-frames-82 { from { transform: translate3d(54vw, 108vh, 0); } to { transform: translate3d(17vw, -130vh, 0); } }
.circle-container.circle-82 .circle { animation-delay: 2600ms; }

.circle-container.circle-83 { width: 10px; height: 10px; animation-name: move-frames-83; animation-duration: 9200ms; animation-delay: 1800ms; }
@keyframes move-frames-83 { from { transform: translate3d(20vw, 105vh, 0); } to { transform: translate3d(79vw, -125vh, 0); } }
.circle-container.circle-83 .circle { animation-delay: 3900ms; }

.circle-container.circle-84 { width: 4px; height: 4px; animation-name: move-frames-84; animation-duration: 8700ms; animation-delay: 8900ms; }
@keyframes move-frames-84 { from { transform: translate3d(76vw, 102vh, 0); } to { transform: translate3d(51vw, -117vh, 0); } }
.circle-container.circle-84 .circle { animation-delay: 1400ms; }

.circle-container.circle-85 { width: 6px; height: 6px; animation-name: move-frames-85; animation-duration: 10100ms; animation-delay: 4500ms; }
@keyframes move-frames-85 { from { transform: translate3d(42vw, 107vh, 0); } to { transform: translate3d(87vw, -129vh, 0); } }
.circle-container.circle-85 .circle { animation-delay: 2300ms; }

.circle-container.circle-86 { width: 8px; height: 8px; animation-name: move-frames-86; animation-duration: 7700ms; animation-delay: 7000ms; }
@keyframes move-frames-86 { from { transform: translate3d(13vw, 104vh, 0); } to { transform: translate3d(62vw, -121vh, 0); } }
.circle-container.circle-86 .circle { animation-delay: 700ms; }

.circle-container.circle-87 { width: 9px; height: 9px; animation-name: move-frames-87; animation-duration: 9500ms; animation-delay: 2300ms; }
@keyframes move-frames-87 { from { transform: translate3d(69vw, 109vh, 0); } to { transform: translate3d(34vw, -134vh, 0); } }
.circle-container.circle-87 .circle { animation-delay: 3500ms; }

.circle-container.circle-88 { width: 5px; height: 5px; animation-name: move-frames-88; animation-duration: 8400ms; animation-delay: 9400ms; }
@keyframes move-frames-88 { from { transform: translate3d(36vw, 101vh, 0); } to { transform: translate3d(98vw, -114vh, 0); } }
.circle-container.circle-88 .circle { animation-delay: 1700ms; }

.circle-container.circle-89 { width: 7px; height: 7px; animation-name: move-frames-89; animation-duration: 10400ms; animation-delay: 6200ms; }
@keyframes move-frames-89 { from { transform: translate3d(93vw, 106vh, 0); } to { transform: translate3d(46vw, -126vh, 0); } }
.circle-container.circle-89 .circle { animation-delay: 2800ms; }

.circle-container.circle-90 { width: 10px; height: 10px; animation-name: move-frames-90; animation-duration: 7300ms; animation-delay: 3600ms; }
@keyframes move-frames-90 { from { transform: translate3d(58vw, 103vh, 0); } to { transform: translate3d(24vw, -118vh, 0); } }
.circle-container.circle-90 .circle { animation-delay: 1000ms; }

/* End of particle animations - 90 particles total for optimal performance */