.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.atmosphere svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Kolory strukturalne biorą się z tokenów, żeby tło i kreski nie rozjechały
   się z paletą. Odcienie plam (.wash/.splash) to jednorazowe wartości
   malarskie i celowo zostają w samym SVG. */
.atmo-bg {
  fill: var(--paper);
}

.atmo-strokes {
  stroke: var(--line);
}

[data-theme="dark"] .atmosphere .wash {
  opacity: 0.45;
}

[data-theme="dark"] .atmosphere .splash {
  opacity: 0.28;
}

/* `forwards` jest konieczne: 3 iteracje `alternate` kończą się na klatce `to`,
   więc bez fill-mode element wracał skokowo do scale(1) — widoczne szarpnięcie. */
.wash {
  animation: wash-breathe 14s ease-in-out 3 alternate forwards;
  transform-origin: center;
}

.wash-2 {
  animation-delay: -5s;
  animation-duration: 18s;
}

.splash {
  animation: splash-drift 22s ease-in-out 2 alternate;
}

@keyframes wash-breathe {
  from { opacity: 0.7; transform: scale(1) translate(0, 0); }
  to { opacity: 1; transform: scale(1.06) translate(2%, -1%); }
}

@keyframes splash-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(1.5%, 2%) rotate(2deg); }
}