/*! VC global background v2 (interactive, pro; no cursor follow) */
:root {
  --vc-orange: #FF7A00;
  --vc-magenta: #FF3D7F;
  --vc-violet: #8E2DE2;
  --vc-blue: #1E63FF;
}

body.vc-bg {
  background: #000;
  color: #F8F9FA;
  overflow-x: hidden
}

/* fixed glow layers with subtle drift */
.vc-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  transition: all .8s ease;
  will-change: transform;
}

.vc-glow-orange {
  background: radial-gradient(ellipse 1200px 800px at 20% 30%, rgba(255, 122, 0, 0.14) 0%, transparent 52%);
  z-index: -5;
  animation: vc-drift-1 26s ease-in-out infinite;
}

.vc-glow-magenta {
  background: radial-gradient(ellipse 1000px 600px at 80% 20%, rgba(255, 61, 127, 0.10) 0%, transparent 55%);
  z-index: -5;
  animation: vc-drift-2 32s ease-in-out infinite;
}

.vc-glow-violet {
  background: radial-gradient(ellipse 1400px 900px at 70% 80%, rgba(142, 45, 226, 0.12) 0%, transparent 55%);
  z-index: -5;
  animation: vc-drift-3 30s ease-in-out infinite;
}

.vc-glow-blue {
  background: radial-gradient(ellipse 900px 600px at 90% 90%, rgba(30, 99, 255, 0.08) 0%, transparent 55%);
  z-index: -5;
  animation: vc-drift-4 28s ease-in-out infinite;
}

@keyframes vc-drift-1 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(24px, -18px) scale(1.03)
  }

  100% {
    transform: translate(0, 0) scale(1)
  }
}

@keyframes vc-drift-2 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(-28px, 20px) scale(1.02)
  }

  100% {
    transform: translate(0, 0) scale(1)
  }
}

@keyframes vc-drift-3 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(18px, 18px) scale(1.02)
  }

  100% {
    transform: translate(0, 0) scale(1)
  }
}

@keyframes vc-drift-4 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(-22px, -16px) scale(1.02)
  }

  100% {
    transform: translate(0, 0) scale(1)
  }
}

/* flow overlay that slowly orbits for an interactive feel */
.vc-flow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -4;
  opacity: .10;
  mix-blend-mode: screen;
  will-change: transform;
  background:
    radial-gradient(900px 700px at 12% 18%, rgba(255, 122, 0, .35), transparent 60%),
    radial-gradient(700px 600px at 85% 22%, rgba(255, 61, 127, .25), transparent 60%),
    radial-gradient(950px 750px at 70% 78%, rgba(142, 45, 226, .25), transparent 60%),
    radial-gradient(650px 550px at 92% 85%, rgba(30, 99, 255, .25), transparent 60%);
  animation: vc-orbit 60s linear infinite;
}

@keyframes vc-orbit {
  0% {
    transform: rotate(0deg) scale(1)
  }

  50% {
    transform: rotate(180deg) scale(1.02)
  }

  100% {
    transform: rotate(360deg) scale(1)
  }
}

/* PARTICLES */
.vc-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3
}

.vc-part {
  position: absolute;
  border-radius: 50%;
  filter: blur(.6px);
  opacity: .35;
  will-change: transform, opacity
}

/* sizes */
.vc-part.s1 {
  width: 4px;
  height: 4px
}

.vc-part.s2 {
  width: 5px;
  height: 5px
}

.vc-part.s3 {
  width: 6px;
  height: 6px
}

/* color tints */
.vc-part.t1 {
  background: radial-gradient(circle, rgba(255, 122, 0, .65) 0%, rgba(255, 122, 0, .12) 70%, transparent 100%)
}

.vc-part.t2 {
  background: radial-gradient(circle, rgba(255, 61, 127, .6) 0%, rgba(255, 61, 127, .10) 70%, transparent 100%)
}

.vc-part.t3 {
  background: radial-gradient(circle, rgba(142, 45, 226, .6) 0%, rgba(142, 45, 226, .10) 70%, transparent 100%)
}

.vc-part.t4 {
  background: radial-gradient(circle, rgba(30, 99, 255, .6) 0%, rgba(30, 99, 255, .10) 70%, transparent 100%)
}

/* float & twinkle */
@keyframes vc-float-a {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: .35
  }

  50% {
    transform: translate(22px, -16px) scale(1.1);
    opacity: .55
  }

  100% {
    transform: translate(0, 0) scale(1);
    opacity: .35
  }
}

@keyframes vc-float-b {
  0% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(-26px, 20px) scale(.92)
  }

  100% {
    transform: translate(0, 0) scale(1)
  }
}

@keyframes vc-float-c {
  0% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(18px, 18px) scale(1.04)
  }

  100% {
    transform: translate(0, 0) scale(1)
  }
}

@keyframes vc-twinkle {

  0%,
  100% {
    opacity: .35
  }

  50% {
    opacity: .7
  }
}

.vc-part.a {
  animation: vc-float-a 24s ease-in-out infinite, vc-twinkle 6s ease-in-out infinite
}

.vc-part.b {
  animation: vc-float-b 28s ease-in-out infinite, vc-twinkle 7s ease-in-out infinite
}

.vc-part.c {
  animation: vc-float-c 30s ease-in-out infinite, vc-twinkle 8s ease-in-out infinite
}

/* ORBS (blurred color blobs moving slowly for depth) */
.vc-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -4
}

.vc-orb {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .10;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.vc-orb.o1 {
  background: var(--vc-orange)
}

.vc-orb.o2 {
  background: var(--vc-magenta)
}

.vc-orb.o3 {
  background: var(--vc-violet)
}

.vc-orb.o4 {
  background: var(--vc-blue)
}

@keyframes vc-orb-move {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(var(--dx), var(--dy))
  }

  100% {
    transform: translate(0, 0)
  }
}

/* Responsive softness */
@media (max-width: 768px) {
  .vc-glow-orange {
    background: radial-gradient(ellipse 900px 600px at 15% 25%, rgba(255, 122, 0, 0.12) 0%, transparent 55%)
  }

  .vc-glow-violet {
    background: radial-gradient(ellipse 1100px 700px at 70% 80%, rgba(142, 45, 226, 0.1) 0%, transparent 55%)
  }
}