:root {
  --neon-green: var(--color-primary-light);
  --neon-blue: var(--color-accent-light);
  --neon-teal: var(--color-primary);
  --glow-green: color-mix(in srgb, var(--color-primary-light), transparent 60%);
  --glow-blue: color-mix(in srgb, var(--color-accent-light), transparent 60%);
  --glow-teal: color-mix(in srgb, var(--color-primary), transparent 60%);
  --glass-bg: color-mix(in srgb, var(--color-card), transparent 30%);
  --glass-border: color-mix(in srgb, var(--color-line), transparent 50%);
  --glass-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.08);
}

/* Canvas particles background */
#canvas-particles-3d {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Hero 3D floating orbs overlay */
.hero-3d-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

@keyframes hero-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  25% { transform: translate(30px, -40px) scale(1.2); opacity: 0.35; }
  50% { transform: translate(-20px, 20px) scale(0.9); opacity: 0.25; }
  75% { transform: translate(20px, -30px) scale(1.1); opacity: 0.3; }
}

/* Glass effect */
.glass-card { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }

/* Mesh gradient background */
.mesh-bg {
  background:
    radial-gradient(ellipse 80% 50% at 0% 50%, color-mix(in srgb, var(--color-primary-soft), transparent 60%), transparent),
    radial-gradient(ellipse 80% 50% at 100% 50%, color-mix(in srgb, var(--color-accent-soft), transparent 60%), transparent),
    radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--color-primary), transparent 85%), transparent),
    radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--color-accent), transparent 85%), transparent);
}

/* Ripple effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%);
  transform: scale(0);
  animation: ripple-anim 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* Floating orbs */
.orb-float {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  animation: orb-float 20s ease-in-out infinite;
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  25% { transform: translate(30px, -40px) scale(1.2); opacity: 0.5; }
  50% { transform: translate(-20px, 20px) scale(0.8); opacity: 0.2; }
  75% { transform: translate(20px, -30px) scale(1.1); opacity: 0.4; }
}

/* Scroll progress ring */
#scroll-ring {
  position: fixed;
  bottom: 2rem;
  inset-inline-end: 2rem;
  width: 50px;
  height: 50px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#scroll-ring.is-visible { opacity: 1; }
#scroll-ring svg { transform: rotate(-90deg); }
#scroll-ring circle { fill: none; stroke-width: 3; }
#scroll-ring .track { stroke: var(--color-line); }
#scroll-ring .progress { stroke: url(#scroll-gradient); stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }

/* Section 3D reveal on scroll */
.section-3d-reveal {
  opacity: 0;
  transform: perspective(1200px) translateZ(-80px) rotateX(8deg) translateY(40px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.section-3d-reveal.is-visible {
  opacity: 1;
  transform: perspective(1200px) translateZ(0) rotateX(0) translateY(0);
}

/* Perspective grid overlay */
.perspective-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-line), transparent 85%) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-line), transparent 85%) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(500px) rotateX(60deg) translateY(-50%);
  transform-origin: 50% 0;
  pointer-events: none;
  opacity: 0.5;
}

/* Legacy: text glow */
.neon-text { text-shadow: 0 0 7px var(--neon-green), 0 0 10px var(--neon-green), 0 0 21px var(--neon-green), 0 0 42px var(--glow-green); }
.neon-text-blue { text-shadow: 0 0 7px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 21px var(--neon-blue), 0 0 42px var(--glow-blue); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #canvas-particles-3d { display: none !important; }
  .section-3d-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .perspective-grid::before { display: none !important; }
  .orb-float { animation: none !important; display: none !important; }
}