/* ============================================
   CS GROWTH LAB — PREMIUM ANIMATIONS CSS
   Additive layer only — no existing styles modified
   ============================================ */

/* ─── Three.js Background Canvas ─── */
#threejs-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2 !important; /* Strictly in the background */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
#threejs-bg.loaded {
  opacity: 0.65; /* Reduced intensity globally for text readability */
}

/* ─── Custom Cursor ─── */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              opacity 0.3s ease;
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              opacity 0.3s ease;
  opacity: 0;
}
.cursor-dot.visible,
.cursor-ring.visible {
  opacity: 1;
}
.cursor-ring.hover {
  width: 56px;
  height: 56px;
  border-color: rgba(255, 255, 255, 0.6);
}
.cursor-dot.hover {
  width: 8px;
  height: 8px;
}
.cursor-ring.clicking {
  width: 28px;
  height: 28px;
}
/* Hide default cursor on desktop when custom cursor is active */
body.custom-cursor-active,
body.custom-cursor-active * {
  cursor: none !important;
}

/* ─── Ambient Light Glow ─── */
.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1 !important; /* Strictly behind content */
  opacity: 0;
  transition: opacity 1s ease;
}
.ambient-glow.active {
  opacity: 0.8; /* Subtle background glow */
}
.ambient-glow-inner {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 120, 255, 0.06) 0%, rgba(100, 120, 255, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: none;
}

/* ─── 3D Card Hover Effect ─── */
.card-3d-active {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.card-3d-active .card-3d-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}
.card-3d-active:hover .card-3d-glare {
  opacity: 1;
}

/* ─── Magnetic Button ─── */
.magnetic-btn {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ─── Enhanced Reveal — blur entrance (disabled for text sharpness) ─── */
.reveal-enhanced {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Smooth Parallax Sections ─── */
.parallax-section {
  will-change: transform;
}

/* ─── Disable heavy effects on mobile ─── */
@media (max-width: 1024px) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: auto !important;
  }
  #threejs-bg {
    display: none !important;
  }
  .ambient-glow {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .card-3d-active {
    transform: none !important;
  }
  .magnetic-btn {
    transform: none !important;
  }
}

/* ─── Reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring,
  #threejs-bg,
  .ambient-glow {
    display: none !important;
  }
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: auto !important;
  }
  .card-3d-active {
    transform: none !important;
  }
  .magnetic-btn {
    transform: none !important;
  }
  .reveal-enhanced {
    filter: none !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
  }
}

/* ─── Transparency and root stacking fixes ─── */
html {
  background-color: #0a0a0a !important;
}
body {
  background-color: transparent !important;
}
.csg-hero,
.elementor-element-header-section,
.site-header {
  background-color: transparent !important;
  background: transparent !important;
}