/* DDD Background Atmosphere
   Teal dot-field identity. CSS-first, GPU-safe, reduced-motion aware.

   .ddd-atm       CSS dot field + grid for supporting pages
   .ddd-atm--calm lower-opacity variant for content pages
   .ddd-atm-tint  data-reactive accent layer

   The homepage dot field is handled by js/dot-field.js, so the homepage
   only needs .ddd-atm-tint.
*/

.ddd-atm {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(125, 211, 192, 0.13) 1px, transparent 1px),
    radial-gradient(circle, rgba(125, 211, 192, 0.065) 1px, transparent 1px),
    radial-gradient(circle, rgba(200, 215, 225, 0.042) 1px, transparent 1px),
    linear-gradient(to right, rgba(125, 211, 192, 0.016) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125, 211, 192, 0.016) 1px, transparent 1px);
  background-size:
    71px 71px,
    103px 103px,
    149px 149px,
    48px 48px,
    48px 48px;
  background-position:
    0 0,
    36px 54px,
    19px 31px,
    0 0,
    0 0;
  animation: ddd-atm-drift 150s linear infinite;
}

.ddd-atm::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 22%, rgba(10, 13, 18, 0.80) 0%, transparent 100%),
    radial-gradient(ellipse 65% 48% at 50% 72%, rgba(10, 13, 18, 0.45) 0%, transparent 100%);
}

.ddd-atm--calm {
  opacity: 0.48;
}

@keyframes ddd-atm-drift {
  0% {
    background-position:
      0 0, 36px 54px, 19px 31px, 0 0, 0 0;
  }
  100% {
    background-position:
      71px 71px, 139px 157px, 168px 180px, 48px 48px, 48px 48px;
  }
}

.ddd-atm-tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 4s ease;
}

html[data-tape-trend="pos"] .ddd-atm-tint {
  opacity: 1;
  background: radial-gradient(
    ellipse 70% 35% at 50% 100%,
    rgba(45, 212, 191, 0.028) 0%,
    transparent 70%
  );
}

html[data-tape-trend="neg"] .ddd-atm-tint {
  opacity: 1;
  background: radial-gradient(
    ellipse 70% 35% at 50% 100%,
    rgba(251, 113, 133, 0.022) 0%,
    transparent 70%
  );
}

@media (prefers-reduced-motion: reduce) {
  .ddd-atm {
    animation: none;
  }
}

html.dt-anim-paused .ddd-atm {
  animation-play-state: paused;
}