/* === VLK FX v1: fixed gradient + steam === */

/* 1) FIXED GRADIENT BACKGROUND (doesn't "ездит") */
/* We paint gradient on html::before (fixed), body stays transparent. */
html{ background: transparent !important; }
body{ background: transparent !important; }

html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* gradient tuned like warm/cold */
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(245,158,11,0.22), transparent 62%),
    radial-gradient(820px 460px at 85% 6%, rgba(14,165,233,0.18), transparent 64%),
    linear-gradient(180deg, #0b1022 0%, #141b34 44%, #050815 100%);
  transform: translateZ(0);
  will-change: transform;
}

/* If you still see iOS jitter: uncomment next block to degrade a bit on iOS */
/*
@supports (-webkit-touch-callout: none){
  html::before{ background-attachment: scroll !important; }
}
*/

/* 2) STEAM (пар) AT BOTTOM OF VIEWPORT */
.vlk-steam{
  position: fixed;
  left: 0;
  right: 0;
  bottom: -26px;
  height: 260px;
  z-index: 5;
  pointer-events: none;
  opacity: .70;
  filter: saturate(1.05);
  /* make it blend nicely over dark background */
  mix-blend-mode: screen;
  /* fade edges */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 16%, rgba(0,0,0,1) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 16%, rgba(0,0,0,1) 45%, transparent 100%);
}

.vlk-steam__puff{
  position: absolute;
  bottom: 0;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 55%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 32%,
      rgba(255,255,255,.06) 48%,
      rgba(255,255,255,0) 70%);
  filter: blur(14px);
  opacity: 0;
  animation: vlkSteamRise 10s ease-in-out infinite;
  transform: translate3d(0,0,0);
}

@keyframes vlkSteamRise{
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.70); }
  10%  { opacity: .85; }
  50%  { opacity: .55; }
  100% { opacity: 0; transform: translate3d(40px, -240px, 0) scale(1.55); }
}

/* different puffs */
.vlk-steam__puff:nth-child(1){ left: 6%;  animation-duration: 10.5s; animation-delay: .0s;  }
.vlk-steam__puff:nth-child(2){ left: 22%; animation-duration: 12.0s; animation-delay: 1.2s; transform-origin: 20% 60%; }
.vlk-steam__puff:nth-child(3){ left: 40%; animation-duration: 11.0s; animation-delay: .6s;  }
.vlk-steam__puff:nth-child(4){ left: 58%; animation-duration: 12.5s; animation-delay: 1.8s; }
.vlk-steam__puff:nth-child(5){ left: 74%; animation-duration: 10.8s; animation-delay: .9s;  }
.vlk-steam__puff:nth-child(6){ left: 88%; animation-duration: 12.2s; animation-delay: 1.5s; }

@media (max-width: 520px){
  .vlk-steam{ height: 220px; opacity: .62; }
  .vlk-steam__puff{ width: 220px; height: 220px; filter: blur(12px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .vlk-steam{ display:none !important; }
}