/* ============================================================
   visual-bg.css — Cinematic Background Visual System
   Apple x Linear x Framer quality.
   6-layer depth compositing. All GPU-accelerated.
   ============================================================ */

/* Layer Stack */
.visual-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

.visual-bg__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Layer 1: Pure black base */
.visual-bg__base {
  background: #050608;
}

/* Layer 2: Structural ambient glow - two large barely-visible radial pools */
.visual-bg__ambient {
  background:
    radial-gradient(
      ellipse 80% 60% at 72% -5%,
      rgba(10, 25, 80, 0.55) 0%,
      rgba(5, 10, 40, 0.2) 50%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 70% 50% at -10% 95%,
      rgba(5, 18, 65, 0.45) 0%,
      transparent 65%
    );
}

/* Layer 3: Volumetric directional lighting - the cinematic beam */
.visual-bg__volumetric {
  background:
    radial-gradient(
      ellipse 120% 90% at 85% 10%,
      rgba(15, 60, 160, 0.18) 0%,
      rgba(10, 40, 120, 0.08) 35%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 40% at 50% 100%,
      rgba(8, 30, 100, 0.12) 0%,
      transparent 55%
    );
}

/* Layer 4: Dynamic blurred blob children */
.vbg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform, opacity;
}

.vbg-blob--1 {
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(41,98,255,0.22) 0%, rgba(20,60,200,0.10) 50%, transparent 75%);
  top: -10%;
  right: -8%;
  animation: blobDrift1 55s ease-in-out infinite alternate;
}

.vbg-blob--2 {
  width: 500px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(0,150,220,0.12) 0%, rgba(0,80,180,0.06) 50%, transparent 75%);
  top: 35%;
  left: -5%;
  animation: blobDrift2 70s ease-in-out infinite alternate;
}

.vbg-blob--3 {
  width: 600px;
  height: 450px;
  background: radial-gradient(ellipse at center, rgba(25,75,210,0.15) 0%, rgba(10,40,150,0.06) 50%, transparent 75%);
  bottom: 5%;
  right: 10%;
  animation: blobDrift3 45s ease-in-out infinite alternate;
}

/* Layer 5: Film grain / noise overlay */
.visual-bg__noise {
  opacity: 0.028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
}

/* Mobile: reduce GPU cost — fewer animated blobs, less blur */
@media (max-width: 768px) {
  .vbg-blob--1 { filter: blur(60px); } /* halve blur cost */
  .vbg-blob--2, .vbg-blob--3 { display: none; } /* hide 2 of 3 blobs */
}

/* Layer 6: Vignette - lens falloff */
.visual-bg__vignette {
  background: radial-gradient(
    ellipse 90% 85% at 50% 50%,
    transparent 40%,
    rgba(2, 3, 8, 0.35) 75%,
    rgba(2, 3, 8, 0.65) 100%
  );
}

/* Blob Animations - GPU only: transform + opacity */
@keyframes blobDrift1 {
  0%   { transform: translate(0px, 0px) scale(1); opacity: 1; }
  33%  { transform: translate(-30px, 25px) scale(1.04); opacity: 0.85; }
  66%  { transform: translate(15px, -20px) scale(0.97); opacity: 0.95; }
  100% {
    transform: translate(2%, 4%) scale(1.05);
    opacity: 0.8;
  }
}

/* ── Reduce motion for accessibility / performance ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vbg-blob--1,
  .vbg-blob--2,
  .vbg-blob--3 {
    animation: none !important;
  }
}

@keyframes blobDrift2 {
  0%   { transform: translate(0px, 0px) scale(1); opacity: 0.8; }
  40%  { transform: translate(40px, -30px) scale(1.08); opacity: 1; }
  80%  { transform: translate(-20px, 20px) scale(0.95); opacity: 0.7; }
  100% { transform: translate(25px, 10px) scale(1.03); opacity: 0.9; }
}
@keyframes blobDrift3 {
  0%   { transform: translate(0px, 0px) scale(1); opacity: 0.9; }
  50%  { transform: translate(-35px, -15px) scale(1.05); opacity: 0.75; }
  100% { transform: translate(20px, 25px) scale(0.98); opacity: 1; }
}

/* Section-specific lighting overlays */
/* Hero: Strong top-right cinematic spotlight */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 80% 0%, rgba(41,151,255,0.12) 0%, rgba(25,100,220,0.05) 45%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(10,50,150,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Services: Left diagonal haze */
#services { position: relative; }
#services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 80% at -5% 50%, rgba(20,80,200,0.09) 0%, rgba(10,40,140,0.04) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Work Highlights: Right + left corner dramatic contrast */
#work-highlights { position: relative; }
#work-highlights::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 100% 20%, rgba(30,90,220,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 0% 80%, rgba(15,50,170,0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Testimonials: Balanced center ambient bloom */
#testimonials { position: relative; }
#testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(20,70,190,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Footer: Natural deep fade into black */
footer { position: relative; }
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(2,3,8,0.4) 60%, rgba(2,3,8,0.8) 100%);
  pointer-events: none;
  z-index: 0;
}