/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID PARALLAX ENGINE v1.0
   Styles for decorative orbs and motion layers
   ───────────────────────────────────────────────────────────────────────── */

.parallax-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.liquid-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  mix-blend-mode: screen;
  will-change: transform;
}

/* Orb 1: Deep Indigo (Top Left) */
.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-indigo) 0%, transparent 70%);
  top: -10%;
  left: -5%;
}

/* Orb 2: Electric Cyan (Mid Right) */
.orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
  top: 40%;
  right: -10%;
}

/* Orb 3: Soft Violet (Bottom Left) */
.orb-3 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--accent-violet) 0%, transparent 70%);
  bottom: -10%;
  left: 10%;
}

/* Orb 4: Subtle Amber (Mid Left) */
.orb-4 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-amber) 0%, transparent 70%);
  top: 20%;
  left: 20%;
}

/* ─── PARALLAX UTILITY LAYERS ─── */
.p-layer-back {
  /* Handled by JS engine with 0.1x speed */
}

.p-layer-mid {
  /* Handled by JS engine with 0.2x speed */
}

.p-layer-front {
  /* Handled by JS engine with 0.3x speed */
}

/* High-Hz Promotion */
.liquid-orb, 
.parallax-card,
.p-layer-back,
.p-layer-mid,
.p-layer-front {
  transform: translateZ(0);
  backface-visibility: hidden;
}