/* ==========================================================================
   NEWTECHPRIVACY — ULTRA-FAST 120FPS GPU ACCELERATED MOTION SYSTEM
   Engineered for sub-millisecond paint times & zero CPU/GPU overhead
   ========================================================================== */

/* 1. SCROLL REVEAL UTILITY (GPU COMPOSITED) */
.reveal-on-scroll {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reveal-fade {
  opacity: 1;
  transition: opacity 0.35s ease;
}

.reveal-fade.is-visible {
  opacity: 1 !important;
}

.reveal-stagger-1 { transition-delay: 0.05s; }
.reveal-stagger-2 { transition-delay: 0.1s; }
.reveal-stagger-3 { transition-delay: 0.15s; }
.reveal-stagger-4 { transition-delay: 0.2s; }

/* ==========================================================================
   2. ULTRA-SMOOTH LIQUID AURORA MESH BACKGROUND (120FPS GPU ACCELERATED)
   Engineered with zero CPU overhead • Pure compositor thread transform3d
   ========================================================================== */
body {
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

/* Base Soft Radial Ambient Liquid Layer */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  width: 120vw;
  height: 120vh;
  background: 
    radial-gradient(circle at 15% 20%, var(--accent-primary-glow) 0%, transparent 45%),
    radial-gradient(circle at 85% 30%, var(--accent-secondary-glow) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, var(--mesh-3, rgba(16, 185, 129, 0.08)) 0%, transparent 50%);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  animation: liquidMeshFlow 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes liquidMeshFlow {
  0% {
    opacity: 0.65;
    transform: scale(1) translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.06) translate3d(20px, -15px, 0);
  }
  100% {
    opacity: 0.72;
    transform: scale(1.02) translate3d(-20px, 15px, 0);
  }
}

/* Floating Fluid Ambient Orbs with GPU Morphing */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translateZ(0);
  filter: blur(40px);
}

.glow-orb-champagne {
  width: clamp(280px, 36vw, 540px);
  height: clamp(280px, 36vw, 540px);
  background: radial-gradient(circle, var(--mesh-1, var(--accent-primary-glow)) 0%, transparent 65%);
  animation: floatOrbChampagne 24s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.glow-orb-cyan {
  width: clamp(260px, 32vw, 480px);
  height: clamp(260px, 32vw, 480px);
  background: radial-gradient(circle, var(--mesh-2, var(--accent-secondary-glow)) 0%, transparent 65%);
  animation: floatOrbCyan 28s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.glow-orb-emerald {
  width: clamp(240px, 30vw, 440px);
  height: clamp(240px, 30vw, 440px);
  background: radial-gradient(circle, var(--mesh-3, rgba(16, 185, 129, 0.15)) 0%, transparent 65%);
  animation: floatOrbEmerald 22s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes floatOrbChampagne {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate3d(50px, -35px, 0) scale(1.12) rotate(35deg);
  }
  66% {
    transform: translate3d(-35px, 45px, 0) scale(0.92) rotate(70deg);
  }
  100% {
    transform: translate3d(25px, -20px, 0) scale(1.06) rotate(110deg);
  }
}

@keyframes floatOrbCyan {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate3d(-45px, 50px, 0) scale(0.94) rotate(-35deg);
  }
  66% {
    transform: translate3d(40px, -30px, 0) scale(1.15) rotate(-70deg);
  }
  100% {
    transform: translate3d(-20px, 20px, 0) scale(1.04) rotate(-110deg);
  }
}

@keyframes floatOrbEmerald {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(30px, 40px, 0) scale(1.18);
  }
  100% {
    transform: translate3d(-40px, -25px, 0) scale(0.9);
  }
}

/* Light Mode Luxury Ivory Mesh */
[data-theme="ivory"] body::before {
  background: 
    radial-gradient(circle at 20% 20%, rgba(217, 119, 6, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(2, 132, 199, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 45%);
}

/* Accessibility: User prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before, .glow-orb-champagne, .glow-orb-cyan, .glow-orb-emerald {
    animation: none !important;
  }
}

/* 3. LIGHTWEIGHT MICRO-INTERACTIONS */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-glow:hover {
  box-shadow: 0 0 25px var(--accent-primary-glow);
}

.pulse-glow {
  animation: pulseGlow 3s infinite ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}