/* ===== WOW visible depth v5: noticeable, but not too bright ===== */
/* Один чистый верхний слой. Не трогает тексты, карточки, иконки и размеры. */

:root {
  --pv-v5-dark: 1;
}

/* Делаем сцену глубже, а не ярче */
body {
  background:
    radial-gradient(circle at 15% 44%, rgba(28, 118, 255, .13), transparent 34%),
    radial-gradient(circle at 78% 16%, rgba(0, 220, 255, .055), transparent 25%),
    radial-gradient(circle at 20% 86%, rgba(160, 64, 255, .06), transparent 30%),
    linear-gradient(180deg, #01030a 0%, #020712 54%, #010309 100%) !important;
}

/* Чуть меняем посадку V: больше и ближе к интерфейсу, но всё ещё сзади */
.pv-v-bg {
  --v-size: 790px !important;
  --v-left: -265px !important;
  --v-top: 118px !important;
  --v-right: auto !important;
  --v-bottom: auto !important;
  --v-rotate: 8deg !important;

  --tube-left: calc(-265px + 88px) !important;
  --tube-top: calc(118px + 98px) !important;

  --glow-x: 15% !important;
  --glow-y: 43% !important;
  --bloom-x: 16% !important;
  --bloom-y: 44% !important;
  --bloom2-x: 23% !important;
  --bloom2-y: 55% !important;

  filter:
    brightness(.93)
    saturate(1.18)
    contrast(1.10) !important;
}

/* Глубинная подложка, чтобы V ощущалась “за меню” */
.pv-v-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 14% 45%, rgba(80, 220, 255, .16), transparent 28%),
    radial-gradient(ellipse at 11% 48%, rgba(34, 92, 255, .13), transparent 43%),
    radial-gradient(ellipse at 48% 58%, rgba(0,0,0,.28), transparent 44%),
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 30%, rgba(0,0,0,.48));
  opacity: .95;
  mix-blend-mode: screen;
}

/* Мягкая линза при pull-down — заметная, но не белая вспышка */
.pv-v-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(circle at 16% 44%,
      rgba(130, 232, 255, calc(var(--pv-wow-pull) * .0045)),
      rgba(48, 132, 255, calc(var(--pv-wow-pull) * .0021)) 30%,
      transparent 62%),
    linear-gradient(180deg,
      rgba(255,255,255, calc(var(--pv-wow-pull) * .00065)),
      transparent 44%) !important;
  opacity: .82 !important;
  mix-blend-mode: screen;
}

.pv-v-outline {
  opacity: .42 !important;
  filter:
    drop-shadow(0 0 11px rgba(75, 205, 255, .36))
    drop-shadow(0 0 34px rgba(20, 116, 255, .24))
    drop-shadow(0 0 84px rgba(16, 80, 255, .13)) !important;
}

.pv-v-tube {
  opacity: .91 !important;
  filter: drop-shadow(0 0 14px rgba(90, 220, 255, .52)) !important;
}

.pv-v-tube::before {
  box-shadow:
    0 0 7px rgba(160, 245, 255, .72),
    0 0 18px rgba(76, 205, 255, .55),
    0 0 42px rgba(28, 138, 255, .35),
    0 0 82px rgba(24, 92, 255, .18) !important;
}

.pv-v-glow {
  opacity: .68 !important;
  filter: blur(25px) !important;
}

.pv-v-bloom {
  opacity: .58 !important;
}

.pv-v-noise {
  opacity: .36 !important;
}

/* Pull-down: “вау” за счёт глубины и движения */
body.pv-wow-pulling .app {
  transform:
    translate3d(0, calc(var(--pv-wow-pull) * .25px), 0)
    scale(calc(1 - var(--pv-wow-pull) * .00048)) !important;
}

body.pv-wow-pulling .cyber-shell {
  transform: translate3d(0, calc(var(--pv-wow-pull) * .050px), 0) !important;
}

body.pv-wow-pulling .pv-v-bg {
  transform:
    translate3d(0, calc(var(--pv-wow-pull) * .52px), 0)
    scale(calc(1 + var(--pv-wow-pull) * .00138)) !important;
  filter:
    brightness(calc(.94 + var(--pv-wow-pull) * .0024))
    saturate(calc(1.18 + var(--pv-wow-pull) * .0020))
    contrast(1.10) !important;
}

body.pv-wow-pulling .pv-v-bg::before {
  opacity: calc(.88 + var(--pv-wow-pull) * .0015) !important;
}

/* Медленное живое дыхание, без резких вспышек */
@keyframes pvVisibleDepthBreath {
  0%, 100% {
    opacity: .66;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: .78;
    transform: translate(-50%, -50%) scale(1.045);
  }
}

.pv-v-glow {
  animation:
    pvVGlowFlicker 2200ms linear both,
    pvVisibleDepthBreath 8800ms ease-in-out 2500ms infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .pv-v-bg::before,
  .pv-v-glow {
    animation: none !important;
  }
}