/* 970x250 fixed-size creative (no external deps) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 250px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000000;
  border: none;
  outline: none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ad {
  position: relative;
  display: block;
  width: 100%;
  height: 250px;
  text-decoration: none;
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
  outline: none;
}

.bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #10131c, #090c12);
}

/* Cyan/teal orb — top-left */
.grad-gold {
  position: absolute;
  width: 700px;
  height: 500px;
  top: -180px;
  left: -120px;
  background: radial-gradient(ellipse at center, rgba(0, 180, 210, 0.55) 0%, rgba(0, 100, 160, 0.2) 45%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: driftGold 16s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Purple/magenta orb — bottom-right */
.grad-blue {
  position: absolute;
  width: 650px;
  height: 480px;
  bottom: -180px;
  right: -120px;
  background: radial-gradient(ellipse at center, rgba(160, 40, 180, 0.55) 0%, rgba(100, 20, 120, 0.2) 45%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: driftBlue 20s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes driftGold {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(80px, 50px); }
  50%  { transform: translate(40px, 90px); }
  75%  { transform: translate(120px, 30px); }
  100% { transform: translate(60px, 70px); }
}

@keyframes driftBlue {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(-80px, -40px); }
  50%  { transform: translate(-40px, -80px); }
  75%  { transform: translate(-120px, -20px); }
  100% { transform: translate(-60px, -60px); }
}

.noise {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 3px 3px;
  opacity: 0.42;
  mix-blend-mode: overlay;
}

.floatman {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  opacity: 0.7;
  pointer-events: none;
  animation: floatDrift 8s ease-in-out infinite alternate;
}

.floatman img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes floatDrift {
  0%   { transform: translate(-50%, -50%) rotate(-4deg); }
  50%  { transform: translate(-50%, -56%) rotate(2deg); }
  100% { transform: translate(-50%, -46%) rotate(-2deg); }
}

.content {
  position: relative;
  z-index: 4;
  height: 100%;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  box-sizing: border-box;
}

.left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kicker {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-transform: uppercase;
}

.headline {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.sub {
  font-size: 15px;
  opacity: 0.92;
}

.features {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pill {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.45);
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verticalPanel {
  height: 210px;
  width: auto;
  display: block;
  object-fit: contain;
}

.tmcLogo {
  width: 68px;
  height: auto;
  display: block;
  opacity: 0.9;
}

.card {
  width: 29px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.cardIcons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

.iconsSprite {
  width: 100%;
  height: auto;
  display: block;
}

.cardSub {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.45;
}

.cta-wrap {
  position: absolute;
  left: 75%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.cta {
  --primary-color: #FFFFFF;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 400;
  cursor: pointer;
  transition: all .3s ease;
}

.arrow {
  transition: transform 180ms ease;
}

.ad:hover .arrow {
  transform: translateX(4px);
}

.shine {
  position: absolute;
  top: -300px;
  left: -180px;
  width: 180px;
  height: 900px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(22deg);
  opacity: 0.45;
  filter: blur(6px);
  animation: sweep 9.3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sweep {
  0% {
    transform: translateX(0) rotate(22deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  80% {
    transform: translateX(calc(100vw + 520px)) rotate(22deg);
    opacity: 0.42;
  }
  100% {
    transform: translateX(calc(100vw + 520px)) rotate(22deg);
    opacity: 0;
  }
}


/* Floating particles */
.p0 {
  position: absolute;
  width: 3.9px;
  height: 3.9px;
  left: 4.4%;
  top: 29.8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  filter: blur(1.8px);
  animation: fp0 15.6s 11.0s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp0 {
  0%   { transform: translate(0,0); opacity: 0.09; }
  50%  { transform: translate(5.3px, 7.8px); opacity: 0.04; }
  100% { transform: translate(10.6px, 15.7px); opacity: 0.09; }
}
.p1 {
  position: absolute;
  width: 2.1px;
  height: 2.1px;
  left: 23.0%;
  top: 50.5%;
  border-radius: 50%;
  background: rgba(255,255,255,0.11);
  filter: blur(2.2px);
  animation: fp1 12.4s 3.0s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp1 {
  0%   { transform: translate(0,0); opacity: 0.11; }
  50%  { transform: translate(4.5px, 0.9px); opacity: 0.04; }
  100% { transform: translate(9.0px, 1.8px); opacity: 0.11; }
}
.p2 {
  position: absolute;
  width: 4.4px;
  height: 4.4px;
  left: 2.6%;
  top: 77.5%;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  filter: blur(1.2px);
  animation: fp2 23.2s 5.1s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp2 {
  0%   { transform: translate(0,0); opacity: 0.13; }
  50%  { transform: translate(-10.3px, 9.2px); opacity: 0.05; }
  100% { transform: translate(-20.7px, 18.3px); opacity: 0.13; }
}
.p3 {
  position: absolute;
  width: 2.3px;
  height: 2.3px;
  left: 83.4%;
  top: 59.3%;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  filter: blur(2.1px);
  animation: fp3 24.9s 10.9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp3 {
  0%   { transform: translate(0,0); opacity: 0.13; }
  50%  { transform: translate(1.1px, 9.4px); opacity: 0.05; }
  100% { transform: translate(2.2px, 18.9px); opacity: 0.13; }
}
.p4 {
  position: absolute;
  width: 4.5px;
  height: 4.5px;
  left: 61.4%;
  top: 82.6%;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  filter: blur(1.2px);
  animation: fp4 21.2s 10.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp4 {
  0%   { transform: translate(0,0); opacity: 0.12; }
  50%  { transform: translate(-13.7px, -5.5px); opacity: 0.05; }
  100% { transform: translate(-27.3px, -10.9px); opacity: 0.12; }
}
.p5 {
  position: absolute;
  width: 2.7px;
  height: 2.7px;
  left: 11.7%;
  top: 30.0%;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  filter: blur(2.9px);
  animation: fp5 22.2s 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp5 {
  0%   { transform: translate(0,0); opacity: 0.12; }
  50%  { transform: translate(-3.9px, -5.8px); opacity: 0.05; }
  100% { transform: translate(-7.8px, -11.6px); opacity: 0.12; }
}
.p6 {
  position: absolute;
  width: 3.9px;
  height: 3.9px;
  left: 60.5%;
  top: 20.4%;
  border-radius: 50%;
  background: rgba(255,255,255,0.17);
  filter: blur(2.1px);
  animation: fp6 23.7s 2.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp6 {
  0%   { transform: translate(0,0); opacity: 0.077; }
  50%  { transform: translate(-3.6px, 9.8px); opacity: 0.07; }
  100% { transform: translate(-7.2px, 19.6px); opacity: 0.077; }
}
.p7 {
  position: absolute;
  width: 4.1px;
  height: 4.1px;
  left: 82.9%;
  top: 74.8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.11);
  filter: blur(2.9px);
  animation: fp7 15.7s 0.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp7 {
  0%   { transform: translate(0,0); opacity: 0.11; }
  50%  { transform: translate(-5.5px, -4.7px); opacity: 0.04; }
  100% { transform: translate(-11.1px, -9.3px); opacity: 0.11; }
}
.p8 {
  position: absolute;
  width: 4.6px;
  height: 4.6px;
  left: 32.2%;
  top: 64.0%;
  border-radius: 50%;
  background: rgba(255,255,255,0.11);
  filter: blur(2.1px);
  animation: fp8 18.3s 13.7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp8 {
  0%   { transform: translate(0,0); opacity: 0.11; }
  50%  { transform: translate(-1.2px, -4.7px); opacity: 0.04; }
  100% { transform: translate(-2.5px, -9.4px); opacity: 0.11; }
}
.p9 {
  position: absolute;
  width: 2.8px;
  height: 2.8px;
  left: 58.1%;
  top: 85.8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  filter: blur(1.1px);
  animation: fp9 18.4s 3.3s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp9 {
  0%   { transform: translate(0,0); opacity: 0.09; }
  50%  { transform: translate(14.9px, 0.2px); opacity: 0.04; }
  100% { transform: translate(29.9px, 0.4px); opacity: 0.09; }
}
.p10 {
  position: absolute;
  width: 2.3px;
  height: 2.3px;
  left: 62.2%;
  top: 76.3%;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  filter: blur(2.9px);
  animation: fp10 18.8s 1.0s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp10 {
  0%   { transform: translate(0,0); opacity: 0.068; }
  50%  { transform: translate(-3.5px, 9.9px); opacity: 0.06; }
  100% { transform: translate(-7.1px, 19.8px); opacity: 0.068; }
}
.p11 {
  position: absolute;
  width: 4.6px;
  height: 4.6px;
  left: 3.1%;
  top: 69.9%;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  filter: blur(1.9px);
  animation: fp11 22.9s 8.1s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp11 {
  0%   { transform: translate(0,0); opacity: 0.1; }
  50%  { transform: translate(-7.0px, 2.8px); opacity: 0.04; }
  100% { transform: translate(-14.0px, 5.6px); opacity: 0.1; }
}
.p12 {
  position: absolute;
  width: 3.4px;
  height: 3.4px;
  left: 93.6%;
  top: 83.8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  filter: blur(1.6px);
  animation: fp12 16.2s 7.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp12 {
  0%   { transform: translate(0,0); opacity: 0.09; }
  50%  { transform: translate(-9.7px, 8.2px); opacity: 0.08; }
  100% { transform: translate(-19.3px, 16.5px); opacity: 0.09; }
}
.p13 {
  position: absolute;
  width: 3.9px;
  height: 3.9px;
  left: 60.5%;
  top: 18.8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  filter: blur(1.6px);
  animation: fp13 24.2s 8.1s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp13 {
  0%   { transform: translate(0,0); opacity: 0.08; }
  50%  { transform: translate(8.3px, 0.6px); opacity: 0.03; }
  100% { transform: translate(16.7px, 1.2px); opacity: 0.08; }
}
.p14 {
  position: absolute;
  width: 2.1px;
  height: 2.1px;
  left: 91.2%;
  top: 84.1%;
  border-radius: 50%;
  background: rgba(255,255,255,0.21);
  filter: blur(1.2px);
  animation: fp14 25.3s 4.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp14 {
  0%   { transform: translate(0,0); opacity: 0.095; }
  50%  { transform: translate(-13.2px, 7.5px); opacity: 0.08; }
  100% { transform: translate(-26.5px, 15.1px); opacity: 0.095; }
}
.p15 {
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  left: 8.6%;
  top: 73.5%;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  filter: blur(2.7px);
  animation: fp15 24.3s 1.9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp15 {
  0%   { transform: translate(0,0); opacity: 0.12; }
  50%  { transform: translate(-0.8px, 1.0px); opacity: 0.05; }
  100% { transform: translate(-1.5px, 2.0px); opacity: 0.12; }
}
.p16 {
  position: absolute;
  width: 3.3px;
  height: 3.3px;
  left: 22.3%;
  top: 53.5%;
  border-radius: 50%;
  background: rgba(255,255,255,0.17);
  filter: blur(1.9px);
  animation: fp16 23.7s 3.0s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp16 {
  0%   { transform: translate(0,0); opacity: 0.077; }
  50%  { transform: translate(-5.7px, 9.9px); opacity: 0.07; }
  100% { transform: translate(-11.3px, 19.8px); opacity: 0.077; }
}
.p17 {
  position: absolute;
  width: 3.6px;
  height: 3.6px;
  left: 13.6%;
  top: 25.2%;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  filter: blur(2.3px);
  animation: fp17 17.4s 8.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fp17 {
  0%   { transform: translate(0,0); opacity: 0.09; }
  50%  { transform: translate(-8.1px, -5.6px); opacity: 0.04; }
  100% { transform: translate(-16.2px, -11.2px); opacity: 0.09; }
}

/* Floating particles */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: floatParticle linear infinite;
}

@keyframes floatParticle {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0; }
}

/* Particles */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.p {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.p0 { left: 83%; top: 19%; opacity: 0.42; animation: float0 10.8s 0.3s ease-in-out infinite alternate; }
.p1 { left: 71%; top: 16%; opacity: 0.4; animation: float1 8.3s 7.1s ease-in-out infinite alternate; }
.p2 { left: 73%; top: 30%; opacity: 0.104; animation: float2 15.0s 8.6s ease-in-out infinite alternate; }
.p3 { left: 2%; top: 25%; opacity: 0.081; animation: float3 11.4s 8.4s ease-in-out infinite alternate; }
.p4 { left: 14%; top: 50%; opacity: 0.086; animation: float4 14.0s 10.2s ease-in-out infinite alternate; }
.p5 { left: 50%; top: 15%; opacity: 0.095; animation: float5 16.3s 6.6s ease-in-out infinite alternate; }
.p6 { left: 10%; top: 10%; opacity: 0.081; animation: float6 15.7s 7.9s ease-in-out infinite alternate; }
.p7 { left: 37%; top: 63%; opacity: 0.104; animation: float7 11.6s 7.6s ease-in-out infinite alternate; }
.p8 { left: 89%; top: 87%; opacity: 0.131; animation: float8 14.3s 0.9s ease-in-out infinite alternate; }
.p9 { left: 36%; top: 86%; opacity: 0.43; animation: float9 10.2s 8.3s ease-in-out infinite alternate; }
.p10 { left: 42%; top: 56%; opacity: 0.41; animation: float10 10.1s 3.2s ease-in-out infinite alternate; }
.p11 { left: 52%; top: 87%; opacity: 0.104; animation: float11 10.6s 5.5s ease-in-out infinite alternate; }
.p12 { left: 76%; top: 59%; opacity: 0.081; animation: float12 12.0s 10.8s ease-in-out infinite alternate; }
.p13 { left: 8%; top: 19%; opacity: 0.117; animation: float13 9.6s 1.8s ease-in-out infinite alternate; }
.p14 { left: 61%; top: 72%; opacity: 0.44; animation: float14 13.5s 3.0s ease-in-out infinite alternate; }
.p15 { left: 98%; top: 39%; opacity: 0.068; animation: float15 11.4s 9.2s ease-in-out infinite alternate; }
.p16 { left: 94%; top: 38%; opacity: 0.4; animation: float16 15.6s 11.7s ease-in-out infinite alternate; }
.p17 { left: 83%; top: 69%; opacity: 0.068; animation: float17 9.5s 7.3s ease-in-out infinite alternate; }
.p18 { left: 43%; top: 67%; opacity: 0.43; animation: float18 17.3s 0.2s ease-in-out infinite alternate; }
.p19 { left: 12%; top: 15%; opacity: 0.41; animation: float19 16.2s 8.8s ease-in-out infinite alternate; }
.p20 { left: 72%; top: 26%; opacity: 0.42; animation: float20 16.7s 3.2s ease-in-out infinite alternate; }
.p21 { left: 27%; top: 44%; opacity: 0.086; animation: float21 14.7s 4.8s ease-in-out infinite alternate; }
.p22 { left: 30%; top: 13%; opacity: 0.077; animation: float22 13.9s 4.1s ease-in-out infinite alternate; }
.p23 { left: 82%; top: 12%; opacity: 0.104; animation: float23 17.1s 2.7s ease-in-out infinite alternate; }
.p24 { left: 64%; top: 32%; opacity: 0.43; animation: float24 15.2s 6.5s ease-in-out infinite alternate; }

@keyframes float0 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-12px, -22px); }
  100% { transform: translate(-27px, 13px); }
}

@keyframes float1 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-29px, -17px); }
  100% { transform: translate(-11px, 2px); }
}

@keyframes float2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(13px, -16px); }
  100% { transform: translate(17px, 7px); }
}

@keyframes float3 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-21px, -17px); }
  100% { transform: translate(3px, -24px); }
}

@keyframes float4 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-35px, 16px); }
  100% { transform: translate(18px, 4px); }
}

@keyframes float5 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(39px, 26px); }
  100% { transform: translate(6px, 6px); }
}

@keyframes float6 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-30px, 24px); }
  100% { transform: translate(-11px, 25px); }
}

@keyframes float7 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(7px, -8px); }
  100% { transform: translate(-14px, 12px); }
}

@keyframes float8 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(28px, 16px); }
  100% { transform: translate(-9px, -20px); }
}

@keyframes float9 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(1px, 23px); }
  100% { transform: translate(-33px, -16px); }
}

@keyframes float10 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(32px, 26px); }
  100% { transform: translate(0px, -17px); }
}

@keyframes float11 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-9px, 17px); }
  100% { transform: translate(31px, 4px); }
}

@keyframes float12 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-12px, -22px); }
  100% { transform: translate(25px, 1px); }
}

@keyframes float13 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, 8px); }
  100% { transform: translate(-32px, -6px); }
}

@keyframes float14 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-39px, 13px); }
  100% { transform: translate(-26px, 13px); }
}

@keyframes float15 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3px, -3px); }
  100% { transform: translate(-20px, -1px); }
}

@keyframes float16 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(24px, 28px); }
  100% { transform: translate(-27px, 25px); }
}

@keyframes float17 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-20px, 4px); }
  100% { transform: translate(27px, 28px); }
}

@keyframes float18 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1px, -15px); }
  100% { transform: translate(-33px, -15px); }
}

@keyframes float19 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(28px, 19px); }
  100% { transform: translate(-24px, -22px); }
}

@keyframes float20 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, -17px); }
  100% { transform: translate(29px, 18px); }
}

@keyframes float21 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(7px, -2px); }
  100% { transform: translate(26px, -2px); }
}

@keyframes float22 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-11px, 7px); }
  100% { transform: translate(-12px, -30px); }
}

@keyframes float23 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(2px, -26px); }
  100% { transform: translate(25px, -15px); }
}

@keyframes float24 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(33px, 6px); }
  100% { transform: translate(20px, -15px); }
}

.p25 { left: 53%; top: 53%; opacity: 0.42; animation: float25 9.8s 2.8s ease-in-out infinite alternate; }
@keyframes float25 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-9px, -22px); }
  100% { transform: translate(-29px, -14px); }
}

.p26 { left: 69%; top: 92%; opacity: 0.42; animation: float26 8.9s 9.8s ease-in-out infinite alternate; }
@keyframes float26 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(39px, 1px); }
  100% { transform: translate(-15px, -4px); }
}

.p27 { left: 77%; top: 32%; opacity: 0.131; animation: float27 15.9s 11.1s ease-in-out infinite alternate; }
@keyframes float27 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(9px, 25px); }
  100% { transform: translate(-13px, -21px); }
}

.p28 { left: 24%; top: 77%; opacity: 0.108; animation: float28 17.5s 4.7s ease-in-out infinite alternate; }
@keyframes float28 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(27px, 13px); }
  100% { transform: translate(-29px, 0px); }
}

.p29 { left: 7%; top: 39%; opacity: 0.131; animation: float29 12.3s 7.8s ease-in-out infinite alternate; }
@keyframes float29 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(6px, 29px); }
  100% { transform: translate(28px, -25px); }
}

.p30 { left: 27%; top: 82%; opacity: 0.43; animation: float30 8.5s 6.5s ease-in-out infinite alternate; }
@keyframes float30 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-24px, -17px); }
  100% { transform: translate(-20px, 17px); }
}

.p31 { left: 78%; top: 27%; opacity: 0.131; animation: float31 14.6s 13.2s ease-in-out infinite alternate; }
@keyframes float31 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-36px, -23px); }
  100% { transform: translate(-38px, -20px); }
}

.p32 { left: 55%; top: 15%; opacity: 0.117; animation: float32 14.3s 13.1s ease-in-out infinite alternate; }
@keyframes float32 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-22px, -11px); }
  100% { transform: translate(39px, -30px); }
}

.p33 { left: 19%; top: 71%; opacity: 0.104; animation: float33 17.0s 5.7s ease-in-out infinite alternate; }
@keyframes float33 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-33px, 10px); }
  100% { transform: translate(-13px, -2px); }
}

.p34 { left: 53%; top: 21%; opacity: 0.42; animation: float34 14.9s 5.0s ease-in-out infinite alternate; }
@keyframes float34 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-33px, -22px); }
  100% { transform: translate(36px, 19px); }
}

.p35 { left: 79%; top: 57%; opacity: 0.086; animation: float35 9.2s 1.7s ease-in-out infinite alternate; }
@keyframes float35 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3px, -19px); }
  100% { transform: translate(-18px, -4px); }
}

.p36 { left: 28%; top: 76%; opacity: 0.43; animation: float36 13.0s 4.5s ease-in-out infinite alternate; }
@keyframes float36 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-11px, 24px); }
  100% { transform: translate(-8px, -23px); }
}

.p37 { left: 48%; top: 28%; opacity: 0.095; animation: float37 13.0s 9.5s ease-in-out infinite alternate; }
@keyframes float37 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-39px, 7px); }
  100% { transform: translate(-34px, -9px); }
}

.p38 { left: 53%; top: 48%; opacity: 0.081; animation: float38 12.0s 11.5s ease-in-out infinite alternate; }
@keyframes float38 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(13px, 22px); }
  100% { transform: translate(7px, 4px); }
}

.p39 { left: 6%; top: 52%; opacity: 0.41; animation: float39 12.0s 10.1s ease-in-out infinite alternate; }
@keyframes float39 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(16px, -16px); }
  100% { transform: translate(-1px, 24px); }
}

.p40 { left: 85%; top: 44%; opacity: 0.108; animation: float40 14.9s 1.5s ease-in-out infinite alternate; }
@keyframes float40 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0px, -17px); }
  100% { transform: translate(-9px, -6px); }
}

.p41 { left: 98%; top: 15%; opacity: 0.44; animation: float41 12.2s 12.4s ease-in-out infinite alternate; }
@keyframes float41 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, -26px); }
  100% { transform: translate(24px, -12px); }
}

.p42 { left: 43%; top: 66%; opacity: 0.45; animation: float42 17.3s 7.5s ease-in-out infinite alternate; }
@keyframes float42 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, -3px); }
  100% { transform: translate(-3px, -4px); }
}

.p43 { left: 80%; top: 25%; opacity: 0.41; animation: float43 14.8s 4.0s ease-in-out infinite alternate; }
@keyframes float43 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(37px, 25px); }
  100% { transform: translate(39px, 12px); }
}

.p44 { left: 26%; top: 53%; opacity: 0.108; animation: float44 10.0s 4.7s ease-in-out infinite alternate; }
@keyframes float44 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-40px, 12px); }
  100% { transform: translate(5px, 14px); }
}

.p45 { left: 26%; top: 90%; opacity: 0.42; animation: float45 15.9s 9.3s ease-in-out infinite alternate; }
@keyframes float45 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-7px, 12px); }
  100% { transform: translate(13px, 17px); }
}

.p46 { left: 92%; top: 34%; opacity: 0.39; animation: float46 16.6s 5.7s ease-in-out infinite alternate; }
@keyframes float46 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(11px, -30px); }
  100% { transform: translate(-26px, 2px); }
}

.p47 { left: 2%; top: 71%; opacity: 0.095; animation: float47 14.7s 4.3s ease-in-out infinite alternate; }
@keyframes float47 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-19px, 2px); }
  100% { transform: translate(16px, 29px); }
}

.p48 { left: 97%; top: 58%; opacity: 0.42; animation: float48 13.3s 6.6s ease-in-out infinite alternate; }
@keyframes float48 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(39px, 19px); }
  100% { transform: translate(40px, 23px); }
}

.p49 { left: 38%; top: 30%; opacity: 0.45; animation: float49 18.0s 10.3s ease-in-out infinite alternate; }
@keyframes float49 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1px, -26px); }
  100% { transform: translate(34px, -28px); }
}


/* Additional particles */
.p25 { left: 53%; top: 53%; opacity: 0.42; animation: float25 9.8s 3.0s ease-in-out infinite alternate; }
@keyframes float25 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-9px, -22px); }
  100% { transform: translate(-29px, -14px); }
}

.p26 { left: 69%; top: 92%; opacity: 0.42; animation: float26 8.9s 10.5s ease-in-out infinite alternate; }
@keyframes float26 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(39px, 1px); }
  100% { transform: translate(-15px, -4px); }
}

.p27 { left: 77%; top: 32%; opacity: 0.131; animation: float27 15.9s 11.9s ease-in-out infinite alternate; }
@keyframes float27 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(9px, 25px); }
  100% { transform: translate(-13px, -21px); }
}

.p28 { left: 24%; top: 77%; opacity: 0.108; animation: float28 17.5s 5.1s ease-in-out infinite alternate; }
@keyframes float28 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(27px, 13px); }
  100% { transform: translate(-29px, 0px); }
}

.p29 { left: 7%; top: 39%; opacity: 0.131; animation: float29 12.3s 8.4s ease-in-out infinite alternate; }
@keyframes float29 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(6px, 29px); }
  100% { transform: translate(28px, -25px); }
}

.p30 { left: 27%; top: 82%; opacity: 0.43; animation: float30 8.5s 6.9s ease-in-out infinite alternate; }
@keyframes float30 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-24px, -17px); }
  100% { transform: translate(-20px, 17px); }
}

.p31 { left: 78%; top: 27%; opacity: 0.131; animation: float31 14.6s 14.2s ease-in-out infinite alternate; }
@keyframes float31 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-36px, -23px); }
  100% { transform: translate(-38px, -20px); }
}

.p32 { left: 55%; top: 15%; opacity: 0.117; animation: float32 14.3s 14.1s ease-in-out infinite alternate; }
@keyframes float32 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-22px, -11px); }
  100% { transform: translate(39px, -30px); }
}

.p33 { left: 19%; top: 71%; opacity: 0.104; animation: float33 17.0s 6.1s ease-in-out infinite alternate; }
@keyframes float33 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-33px, 10px); }
  100% { transform: translate(-13px, -2px); }
}

.p34 { left: 53%; top: 21%; opacity: 0.42; animation: float34 14.9s 5.3s ease-in-out infinite alternate; }
@keyframes float34 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-33px, -22px); }
  100% { transform: translate(36px, 19px); }
}

.p35 { left: 79%; top: 57%; opacity: 0.086; animation: float35 9.2s 1.9s ease-in-out infinite alternate; }
@keyframes float35 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3px, -19px); }
  100% { transform: translate(-18px, -4px); }
}

.p36 { left: 28%; top: 76%; opacity: 0.43; animation: float36 13.0s 4.8s ease-in-out infinite alternate; }
@keyframes float36 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-11px, 24px); }
  100% { transform: translate(-8px, -23px); }
}

.p37 { left: 48%; top: 28%; opacity: 0.095; animation: float37 13.0s 10.2s ease-in-out infinite alternate; }
@keyframes float37 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-39px, 7px); }
  100% { transform: translate(-34px, -9px); }
}

.p38 { left: 53%; top: 48%; opacity: 0.081; animation: float38 12.0s 12.3s ease-in-out infinite alternate; }
@keyframes float38 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(13px, 22px); }
  100% { transform: translate(7px, 4px); }
}

.p39 { left: 6%; top: 52%; opacity: 0.41; animation: float39 12.0s 10.8s ease-in-out infinite alternate; }
@keyframes float39 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(16px, -16px); }
  100% { transform: translate(-1px, 24px); }
}

.p40 { left: 85%; top: 44%; opacity: 0.108; animation: float40 14.9s 1.6s ease-in-out infinite alternate; }
@keyframes float40 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0px, -17px); }
  100% { transform: translate(-9px, -6px); }
}

.p41 { left: 98%; top: 15%; opacity: 0.44; animation: float41 12.2s 13.2s ease-in-out infinite alternate; }
@keyframes float41 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, -26px); }
  100% { transform: translate(24px, -12px); }
}

.p42 { left: 43%; top: 66%; opacity: 0.45; animation: float42 17.3s 8.0s ease-in-out infinite alternate; }
@keyframes float42 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, -3px); }
  100% { transform: translate(-3px, -4px); }
}

.p43 { left: 80%; top: 25%; opacity: 0.41; animation: float43 14.8s 4.2s ease-in-out infinite alternate; }
@keyframes float43 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(37px, 25px); }
  100% { transform: translate(39px, 12px); }
}

.p44 { left: 26%; top: 53%; opacity: 0.108; animation: float44 10.0s 5.1s ease-in-out infinite alternate; }
@keyframes float44 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-40px, 12px); }
  100% { transform: translate(5px, 14px); }
}

.p45 { left: 26%; top: 90%; opacity: 0.42; animation: float45 15.9s 10.0s ease-in-out infinite alternate; }
@keyframes float45 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-7px, 12px); }
  100% { transform: translate(13px, 17px); }
}

.p46 { left: 92%; top: 34%; opacity: 0.39; animation: float46 16.6s 6.1s ease-in-out infinite alternate; }
@keyframes float46 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(11px, -30px); }
  100% { transform: translate(-26px, 2px); }
}

.p47 { left: 2%; top: 71%; opacity: 0.095; animation: float47 14.7s 4.7s ease-in-out infinite alternate; }
@keyframes float47 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-19px, 2px); }
  100% { transform: translate(16px, 29px); }
}

.p48 { left: 97%; top: 58%; opacity: 0.42; animation: float48 13.3s 7.0s ease-in-out infinite alternate; }
@keyframes float48 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(39px, 19px); }
  100% { transform: translate(40px, 23px); }
}

.p49 { left: 38%; top: 30%; opacity: 0.45; animation: float49 18.0s 11.1s ease-in-out infinite alternate; }
@keyframes float49 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1px, -26px); }
  100% { transform: translate(34px, -28px); }
}


/* Additional particles p50-p99 */
.p50 { left: 34%; top: 46%; opacity: 0.13; animation: float50 9.9s 3.0s ease-in-out infinite alternate; }
@keyframes float50 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-26px, -12px); }
  100% { transform: translate(20px, 30px); }
}

.p51 { left: 80%; top: 35%; opacity: 0.072; animation: float51 14.3s 2.2s ease-in-out infinite alternate; }
@keyframes float51 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(24px, -30px); }
  100% { transform: translate(-5px, -29px); }
}

.p52 { left: 65%; top: 27%; opacity: 0.07; animation: float52 9.9s 11.9s ease-in-out infinite alternate; }
@keyframes float52 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(9px, -19px); }
  100% { transform: translate(2px, -10px); }
}

.p53 { left: 72%; top: 38%; opacity: 0.08; animation: float53 10.0s 8.0s ease-in-out infinite alternate; }
@keyframes float53 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-16px, -26px); }
  100% { transform: translate(-30px, 24px); }
}

.p54 { left: 73%; top: 61%; opacity: 0.1; animation: float54 13.4s 8.9s ease-in-out infinite alternate; }
@keyframes float54 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-28px, 23px); }
  100% { transform: translate(-13px, 17px); }
}

.p55 { left: 13%; top: 17%; opacity: 0.063; animation: float55 16.3s 8.7s ease-in-out infinite alternate; }
@keyframes float55 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(28px, -24px); }
  100% { transform: translate(-6px, -2px); }
}

.p56 { left: 72%; top: 20%; opacity: 0.13; animation: float56 13.3s 5.3s ease-in-out infinite alternate; }
@keyframes float56 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(11px, 18px); }
  100% { transform: translate(34px, 30px); }
}

.p57 { left: 33%; top: 33%; opacity: 0.077; animation: float57 12.0s 8.6s ease-in-out infinite alternate; }
@keyframes float57 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-23px, 19px); }
  100% { transform: translate(9px, -30px); }
}

.p58 { left: 6%; top: 11%; opacity: 0.09; animation: float58 8.4s 7.4s ease-in-out infinite alternate; }
@keyframes float58 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(5px, 18px); }
  100% { transform: translate(15px, -23px); }
}

.p59 { left: 66%; top: 77%; opacity: 0.1; animation: float59 8.6s 10.3s ease-in-out infinite alternate; }
@keyframes float59 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(20px, 22px); }
  100% { transform: translate(-28px, -21px); }
}

.p60 { left: 13%; top: 7%; opacity: 0.072; animation: float60 17.2s 12.7s ease-in-out infinite alternate; }
@keyframes float60 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(13px, 6px); }
  100% { transform: translate(-40px, -27px); }
}

.p61 { left: 20%; top: 8%; opacity: 0.07; animation: float61 10.4s 10.5s ease-in-out infinite alternate; }
@keyframes float61 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(19px, -23px); }
  100% { transform: translate(9px, 0px); }
}

.p62 { left: 19%; top: 35%; opacity: 0.06; animation: float62 15.7s 3.9s ease-in-out infinite alternate; }
@keyframes float62 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-29px, -20px); }
  100% { transform: translate(-19px, -21px); }
}

.p63 { left: 31%; top: 90%; opacity: 0.12; animation: float63 11.8s 7.5s ease-in-out infinite alternate; }
@keyframes float63 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(33px, 15px); }
  100% { transform: translate(36px, -4px); }
}

.p64 { left: 36%; top: 81%; opacity: 0.09; animation: float64 9.0s 12.6s ease-in-out infinite alternate; }
@keyframes float64 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(39px, -4px); }
  100% { transform: translate(-3px, 4px); }
}

.p65 { left: 60%; top: 29%; opacity: 0.07; animation: float65 12.9s 0.3s ease-in-out infinite alternate; }
@keyframes float65 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-36px, -29px); }
  100% { transform: translate(-22px, -30px); }
}

.p66 { left: 15%; top: 70%; opacity: 0.063; animation: float66 8.8s 3.1s ease-in-out infinite alternate; }
@keyframes float66 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, -20px); }
  100% { transform: translate(-27px, 30px); }
}

.p67 { left: 38%; top: 63%; opacity: 0.09; animation: float67 13.3s 13.2s ease-in-out infinite alternate; }
@keyframes float67 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(11px, -18px); }
  100% { transform: translate(14px, 24px); }
}

.p68 { left: 13%; top: 72%; opacity: 0.068; animation: float68 17.1s 4.9s ease-in-out infinite alternate; }
@keyframes float68 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-5px, -7px); }
  100% { transform: translate(21px, 17px); }
}

.p69 { left: 85%; top: 72%; opacity: 0.063; animation: float69 13.3s 5.9s ease-in-out infinite alternate; }
@keyframes float69 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, -6px); }
  100% { transform: translate(31px, 23px); }
}

.p70 { left: 41%; top: 15%; opacity: 0.077; animation: float70 9.0s 4.1s ease-in-out infinite alternate; }
@keyframes float70 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-23px, -7px); }
  100% { transform: translate(-34px, -17px); }
}

.p71 { left: 77%; top: 84%; opacity: 0.068; animation: float71 14.8s 8.4s ease-in-out infinite alternate; }
@keyframes float71 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-33px, 3px); }
  100% { transform: translate(-38px, 24px); }
}

.p72 { left: 77%; top: 20%; opacity: 0.081; animation: float72 16.2s 9.6s ease-in-out infinite alternate; }
@keyframes float72 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-6px, 20px); }
  100% { transform: translate(-20px, 11px); }
}

.p73 { left: 9%; top: 91%; opacity: 0.1; animation: float73 14.2s 7.7s ease-in-out infinite alternate; }
@keyframes float73 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8px, -25px); }
  100% { transform: translate(-2px, -25px); }
}

.p74 { left: 84%; top: 84%; opacity: 0.11; animation: float74 8.1s 11.1s ease-in-out infinite alternate; }
@keyframes float74 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(17px, 17px); }
  100% { transform: translate(-21px, 1px); }
}

.p75 { left: 70%; top: 14%; opacity: 0.077; animation: float75 9.1s 6.4s ease-in-out infinite alternate; }
@keyframes float75 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8px, 19px); }
  100% { transform: translate(-24px, -28px); }
}

.p76 { left: 83%; top: 38%; opacity: 0.07; animation: float76 17.4s 12.3s ease-in-out infinite alternate; }
@keyframes float76 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-18px, 4px); }
  100% { transform: translate(-29px, -26px); }
}

.p77 { left: 95%; top: 54%; opacity: 0.068; animation: float77 8.7s 7.7s ease-in-out infinite alternate; }
@keyframes float77 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(21px, -17px); }
  100% { transform: translate(29px, 6px); }
}

.p78 { left: 43%; top: 46%; opacity: 0.068; animation: float78 9.9s 7.0s ease-in-out infinite alternate; }
@keyframes float78 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(33px, -3px); }
  100% { transform: translate(32px, -6px); }
}

.p79 { left: 73%; top: 30%; opacity: 0.063; animation: float79 9.0s 6.0s ease-in-out infinite alternate; }
@keyframes float79 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(38px, 11px); }
  100% { transform: translate(-1px, 11px); }
}

.p80 { left: 45%; top: 87%; opacity: 0.1; animation: float80 13.0s 6.4s ease-in-out infinite alternate; }
@keyframes float80 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(5px, 20px); }
  100% { transform: translate(-13px, -14px); }
}

.p81 { left: 30%; top: 25%; opacity: 0.1; animation: float81 9.5s 5.2s ease-in-out infinite alternate; }
@keyframes float81 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-7px, 3px); }
  100% { transform: translate(17px, -12px); }
}

.p82 { left: 32%; top: 94%; opacity: 0.081; animation: float82 12.8s 14.1s ease-in-out infinite alternate; }
@keyframes float82 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-32px, -13px); }
  100% { transform: translate(-3px, -19px); }
}

.p83 { left: 39%; top: 79%; opacity: 0.072; animation: float83 13.2s 6.3s ease-in-out infinite alternate; }
@keyframes float83 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(38px, -3px); }
  100% { transform: translate(11px, 26px); }
}

.p84 { left: 15%; top: 92%; opacity: 0.11; animation: float84 16.6s 6.6s ease-in-out infinite alternate; }
@keyframes float84 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(5px, 0px); }
  100% { transform: translate(22px, 28px); }
}

.p85 { left: 23%; top: 54%; opacity: 0.081; animation: float85 13.5s 5.8s ease-in-out infinite alternate; }
@keyframes float85 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(38px, 18px); }
  100% { transform: translate(-7px, -29px); }
}

.p86 { left: 41%; top: 41%; opacity: 0.11; animation: float86 16.7s 6.6s ease-in-out infinite alternate; }
@keyframes float86 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(32px, -29px); }
  100% { transform: translate(33px, -26px); }
}

.p87 { left: 49%; top: 89%; opacity: 0.07; animation: float87 18.0s 4.0s ease-in-out infinite alternate; }
@keyframes float87 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-26px, -8px); }
  100% { transform: translate(5px, -21px); }
}

.p88 { left: 91%; top: 23%; opacity: 0.07; animation: float88 12.9s 2.5s ease-in-out infinite alternate; }
@keyframes float88 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3px, -9px); }
  100% { transform: translate(5px, 30px); }
}

.p89 { left: 86%; top: 37%; opacity: 0.13; animation: float89 9.4s 11.6s ease-in-out infinite alternate; }
@keyframes float89 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(2px, -3px); }
  100% { transform: translate(-37px, 0px); }
}

.p90 { left: 67%; top: 86%; opacity: 0.13; animation: float90 10.0s 6.5s ease-in-out infinite alternate; }
@keyframes float90 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(35px, -28px); }
  100% { transform: translate(21px, -24px); }
}

.p91 { left: 56%; top: 7%; opacity: 0.11; animation: float91 8.6s 1.4s ease-in-out infinite alternate; }
@keyframes float91 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(5px, 1px); }
  100% { transform: translate(19px, -13px); }
}

.p92 { left: 11%; top: 29%; opacity: 0.063; animation: float92 13.2s 7.6s ease-in-out infinite alternate; }
@keyframes float92 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(34px, 26px); }
  100% { transform: translate(-36px, 12px); }
}

.p93 { left: 75%; top: 26%; opacity: 0.1; animation: float93 13.6s 2.7s ease-in-out infinite alternate; }
@keyframes float93 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-13px, -13px); }
  100% { transform: translate(4px, 30px); }
}

.p94 { left: 96%; top: 74%; opacity: 0.063; animation: float94 13.2s 8.0s ease-in-out infinite alternate; }
@keyframes float94 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(6px, 10px); }
  100% { transform: translate(17px, 15px); }
}

.p95 { left: 33%; top: 19%; opacity: 0.12; animation: float95 12.5s 8.2s ease-in-out infinite alternate; }
@keyframes float95 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(9px, 16px); }
  100% { transform: translate(12px, 7px); }
}

.p96 { left: 49%; top: 26%; opacity: 0.068; animation: float96 13.0s 1.8s ease-in-out infinite alternate; }
@keyframes float96 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-4px, 21px); }
  100% { transform: translate(24px, -10px); }
}

.p97 { left: 44%; top: 66%; opacity: 0.09; animation: float97 11.1s 5.5s ease-in-out infinite alternate; }
@keyframes float97 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-37px, -28px); }
  100% { transform: translate(-37px, 5px); }
}

.p98 { left: 78%; top: 8%; opacity: 0.13; animation: float98 8.9s 6.3s ease-in-out infinite alternate; }
@keyframes float98 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-14px, 16px); }
  100% { transform: translate(14px, -16px); }
}

.p99 { left: 93%; top: 36%; opacity: 0.13; animation: float99 10.4s 4.6s ease-in-out infinite alternate; }
@keyframes float99 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-26px, 11px); }
  100% { transform: translate(2px, 1px); }
}


/* Additional particles */
.p25 { left: 53%; top: 53%; opacity: 0.61; animation: float25 9.3s 2.8s ease-in-out infinite alternate; }
@keyframes float25 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-14px, -18px); }
  100% { transform: translate(-34px, -3px); }
}

.p26 { left: 69%; top: 92%; opacity: 0.6; animation: float26 8.2s 9.8s ease-in-out infinite alternate; }
@keyframes float26 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(34px, 27px); }
  100% { transform: translate(-20px, 18px); }
}

.p27 { left: 77%; top: 32%; opacity: 0.58; animation: float27 17.2s 11.1s ease-in-out infinite alternate; }
@keyframes float27 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(4px, -8px); }
  100% { transform: translate(-26px, 24px); }
}

.p28 { left: 74%; top: 48%; opacity: 0.49; animation: float28 16.3s 1.2s ease-in-out infinite alternate; }
@keyframes float28 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(41px, -24px); }
  100% { transform: translate(15px, 5px); }
}

.p29 { left: 36%; top: 76%; opacity: 0.67; animation: float29 9.6s 0.1s ease-in-out infinite alternate; }
@keyframes float29 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(23px, -25px); }
  100% { transform: translate(14px, 31px); }
}

.p30 { left: 79%; top: 64%; opacity: 0.68; animation: float30 11.6s 13.7s ease-in-out infinite alternate; }
@keyframes float30 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-18px, -15px); }
  100% { transform: translate(11px, -13px); }
}

.p31 { left: 86%; top: 27%; opacity: 0.57; animation: float31 7.3s 0.5s ease-in-out infinite alternate; }
@keyframes float31 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(15px, 18px); }
  100% { transform: translate(-35px, 19px); }
}

.p32 { left: 20%; top: 44%; opacity: 0.66; animation: float32 12.0s 8.6s ease-in-out infinite alternate; }
@keyframes float32 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-28px, 31px); }
  100% { transform: translate(6px, -10px); }
}

.p33 { left: 9%; top: 86%; opacity: 0.67; animation: float33 10.3s 3.0s ease-in-out infinite alternate; }
@keyframes float33 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(6px, -19px); }
  100% { transform: translate(0px, 25px); }
}

.p34 { left: 18%; top: 81%; opacity: 0.4; animation: float34 9.0s 10.9s ease-in-out infinite alternate; }
@keyframes float34 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(7px, -20px); }
  100% { transform: translate(-33px, -20px); }
}

.p35 { left: 24%; top: 27%; opacity: 0.65; animation: float35 19.0s 5.7s ease-in-out infinite alternate; }
@keyframes float35 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(26px, 5px); }
  100% { transform: translate(18px, -6px); }
}

.p36 { left: 17%; top: 51%; opacity: 0.47; animation: float36 7.9s 2.6s ease-in-out infinite alternate; }
@keyframes float36 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-9px, -34px); }
  100% { transform: translate(29px, -29px); }
}

.p37 { left: 50%; top: 56%; opacity: 0.38; animation: float37 17.6s 4.7s ease-in-out infinite alternate; }
@keyframes float37 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(4px, 18px); }
  100% { transform: translate(2px, 33px); }
}

.p38 { left: 6%; top: 52%; opacity: 0.58; animation: float38 12.2s 10.1s ease-in-out infinite alternate; }
@keyframes float38 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(11px, -6px); }
  100% { transform: translate(-6px, -7px); }
}

.p39 { left: 41%; top: 18%; opacity: 0.5; animation: float39 16.4s 12.2s ease-in-out infinite alternate; }
@keyframes float39 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-18px, -4px); }
  100% { transform: translate(4px, 2px); }
}

.p40 { left: 12%; top: 61%; opacity: 0.63; animation: float40 18.8s 5.9s ease-in-out infinite alternate; }
@keyframes float40 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-37px, 29px); }
  100% { transform: translate(-8px, 6px); }
}

.p41 { left: 70%; top: 21%; opacity: 0.45; animation: float41 10.3s 13.0s ease-in-out infinite alternate; }
@keyframes float41 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, 17px); }
  100% { transform: translate(39px, -15px); }
}

.p42 { left: 88%; top: 91%; opacity: 0.47; animation: float42 19.8s 8.5s ease-in-out infinite alternate; }
@keyframes float42 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(40px, 21px); }
  100% { transform: translate(-21px, 13px); }
}

.p43 { left: 27%; top: 49%; opacity: 0.63; animation: float43 11.6s 0.1s ease-in-out infinite alternate; }
@keyframes float43 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, -11px); }
  100% { transform: translate(40px, -14px); }
}

.p44 { left: 35%; top: 89%; opacity: 0.58; animation: float44 16.8s 5.8s ease-in-out infinite alternate; }
@keyframes float44 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(45px, -6px); }
  100% { transform: translate(7px, 9px); }
}

.p45 { left: 2%; top: 19%; opacity: 0.53; animation: float45 9.6s 7.0s ease-in-out infinite alternate; }
@keyframes float45 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(21px, 4px); }
  100% { transform: translate(41px, -14px); }
}

.p46 { left: 58%; top: 31%; opacity: 0.57; animation: float46 18.1s 3.7s ease-in-out infinite alternate; }
@keyframes float46 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8px, 24px); }
  100% { transform: translate(26px, 32px); }
}

.p47 { left: 82%; top: 82%; opacity: 0.55; animation: float47 9.6s 10.8s ease-in-out infinite alternate; }
@keyframes float47 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-43px, -22px); }
  100% { transform: translate(-6px, -26px); }
}

.p48 { left: 9%; top: 58%; opacity: 0.7; animation: float48 19.6s 4.2s ease-in-out infinite alternate; }
@keyframes float48 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(35px, 2px); }
  100% { transform: translate(-21px, -23px); }
}

.p49 { left: 52%; top: 56%; opacity: 0.65; animation: float49 10.4s 11.0s ease-in-out infinite alternate; }
@keyframes float49 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3px, -19px); }
  100% { transform: translate(-29px, 22px); }
}

.p50 { left: 90%; top: 94%; opacity: 0.45; animation: float50 14.3s 5.4s ease-in-out infinite alternate; }
@keyframes float50 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-23px, 11px); }
  100% { transform: translate(-13px, -9px); }
}

.p51 { left: 75%; top: 94%; opacity: 0.69; animation: float51 17.7s 5.4s ease-in-out infinite alternate; }
@keyframes float51 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(16px, 25px); }
  100% { transform: translate(40px, -14px); }
}

.p52 { left: 70%; top: 35%; opacity: 0.47; animation: float52 13.8s 14.0s ease-in-out infinite alternate; }
@keyframes float52 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-31px, 7px); }
  100% { transform: translate(18px, -26px); }
}

.p53 { left: 95%; top: 5%; opacity: 0.49; animation: float53 13.9s 8.0s ease-in-out infinite alternate; }
@keyframes float53 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(36px, -34px); }
  100% { transform: translate(29px, 5px); }
}

.p54 { left: 23%; top: 22%; opacity: 0.43; animation: float54 7.6s 8.2s ease-in-out infinite alternate; }
@keyframes float54 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-41px, -29px); }
  100% { transform: translate(-2px, 30px); }
}