/* ==========================================================================
   CodeMist — Smoke layer
   Блок .smoke — фиксированный слой позади контента.
   Дым = размытые радиальные пятна, которые медленно "дрейфуют" через transform.
   Никогда не анимируем left/top/width — только transform (дешевле, без layout shift).
   ========================================================================== */

.smoke {
  position: fixed;
  inset: 0;
  z-index: var(--z-smoke);
  overflow: hidden;
  pointer-events: none;
  background: var(--c-bg);
}

.smoke__grain {
  position: absolute;
  inset: -10%;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.smoke__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  animation: smoke-drift 26s ease-in-out infinite;
}

.smoke__blob--1 {
  top: -12%;
  left: -8%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle at 30% 30%, rgba(var(--c-accent-rgb), .30), rgba(var(--c-accent-rgb), 0) 70%);
  animation-duration: 30s;
}

.smoke__blob--2 {
  top: 20%;
  right: -14%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle at 60% 40%, rgba(var(--c-accent-2-rgb), .26), rgba(var(--c-accent-2-rgb), 0) 70%);
  animation-duration: 34s;
  animation-delay: -6s;
}

.smoke__blob--3 {
  bottom: -18%;
  left: 12%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--c-accent-3-rgb), .14), rgba(var(--c-accent-3-rgb), 0) 70%);
  animation-duration: 40s;
  animation-delay: -14s;
}

.smoke__blob--4 {
  bottom: 6%;
  right: 8%;
  width: 34vw;
  height: 34vw;
  background: radial-gradient(circle at 40% 60%, rgba(var(--c-accent-rgb), .18), rgba(var(--c-accent-rgb), 0) 70%);
  animation-duration: 22s;
  animation-delay: -3s;
}

.smoke__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(5, 10, 8, 0) 0%, rgba(5, 10, 8, .55) 70%, var(--c-void) 100%);
}

@keyframes smoke-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(4%, -3%, 0) scale(1.06); }
  66%  { transform: translate3d(-3%, 4%, 0) scale(.97); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

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

/* на маленьких экранах пятна крупнее относительно вьюпорта — уменьшаем, чтобы не "забивали" контент */
@media (max-width: 640px) {
  .smoke__blob { filter: blur(46px); }
  .smoke__blob--1, .smoke__blob--3 { width: 80vw; height: 80vw; }
  .smoke__blob--2, .smoke__blob--4 { width: 70vw; height: 70vw; }
}