/* =====================================================
   ZWDevs — Matrix Rain + WebGL Enhancement Layer
   ===================================================== */

/* ── Matrix Canvas (full-bleed background) ── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* ── Hero content MUST sit above canvas ── */
.hero {
  position: relative;
}

.hero-bg {
  position: relative;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
}

.scroll-indicator {
  position: absolute;
  z-index: 3;
}

/* ── Sphere Canvas ── */
#sphere-canvas {
  width: 480px;
  height: 480px;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 0 60px rgba(58, 175, 169, 0.35)) drop-shadow(0 0 120px rgba(60, 57, 130, 0.25));
  animation: spherePulse 4s ease-in-out infinite;
}

@keyframes spherePulse {
  0%, 100% { filter: drop-shadow(0 0 60px rgba(58,175,169,0.35)) drop-shadow(0 0 120px rgba(60,57,130,0.25)); }
  50%       { filter: drop-shadow(0 0 90px rgba(58,175,169,0.55)) drop-shadow(0 0 160px rgba(60,57,130,0.4)); }
}

@media (max-width: 1024px) {
  #sphere-canvas { width: 320px; height: 320px; }
}

/* ── Hero section z-index fix ── */
.hero-content {
  position: relative;
  z-index: 2;
}

.hero-bg {
  z-index: 0;
}

/* ── Gradient spheres — keep but reduce opacity (WebGL takes over) ── */
.gradient-sphere {
  opacity: 0.18 !important;
}

/* ── Loader upgrade ── */
.loader {
  background: #0a0812;
}

.loader-content {
  position: relative;
}

.loader-text {
  font-size: 5rem;
  letter-spacing: -2px;
  position: relative;
}

.loader-text::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(58,175,169,0.3) 0%, transparent 70%);
  animation: loaderGlow 1.5s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes loaderGlow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%       { transform: scale(1.3); opacity: 1; }
}

/* ── Navbar glass upgrade ── */
.navbar.scrolled {
  background: rgba(10, 8, 18, 0.95) !important;
  border-bottom: 1px solid rgba(58, 175, 169, 0.1);
}

/* ── Section reveal base — DO NOT hide by default, GSAP handles fromTo ── */
/* .animate-on-scroll opacity stays at 1 — GSAP uses fromTo, not to */

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* ── Service cards — subtle upgrade, no heavy backdrop-filter ── */
.service-card {
  background: rgba(22, 23, 77, 0.85) !important;
  border: 1px solid rgba(58, 175, 169, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
}

.service-card:hover {
  border-color: rgba(58, 175, 169, 0.5) !important;
  box-shadow: 0 24px 60px rgba(58, 175, 169, 0.12), 0 0 0 1px rgba(58,175,169,0.2) !important;
}

/* ── Project cards ── */
.project-card {
  background: rgba(22, 23, 77, 0.9) !important;
  border: 1px solid rgba(60, 57, 130, 0.2);
  position: relative;
  overflow: hidden;
}

/* ── Testimonial cards ── */
.testimonial-card {
  background: rgba(22, 23, 77, 0.9) !important;
  border: 1px solid rgba(58, 175, 169, 0.1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
}

/* ── Info cards ── */
.info-card {
  background: rgba(22, 23, 77, 0.9) !important;
  border: 1px solid rgba(58, 175, 169, 0.1) !important;
}

/* ── WhatsApp card ── */
.whatsapp-card {
  background: rgba(22, 23, 77, 0.9) !important;
  border: 1px solid rgba(37, 211, 102, 0.2) !important;
  box-shadow: 0 20px 60px rgba(37, 211, 102, 0.08);
}

/* ── Scroll progress bar ── */
.scroll-progress-bar {
  background: linear-gradient(90deg, #3C3982, #3AAFA9) !important;
  box-shadow: 0 0 12px rgba(58, 175, 169, 0.6);
  height: 3px !important;
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* ── Page-level scroll progress indicator ── */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #3C3982, #3AAFA9, #3C3982);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  z-index: 10003;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(58, 175, 169, 0.8);
}

@keyframes progressShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Section dividers ── */
section::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58,175,169,0.2), transparent);
  margin-top: 0;
}

/* ── Floating icons — enhanced ── */
.floating-icon {
  background: rgba(22, 23, 77, 0.8) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(58, 175, 169, 0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(58,175,169,0.1);
}

/* ── Skill bars — glow ── */
.skill-progress {
  box-shadow: 0 0 12px rgba(58, 175, 169, 0.4);
  position: relative;
  overflow: visible !important;
}

.skill-progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3AAFA9;
  box-shadow: 0 0 10px #3AAFA9, 0 0 20px rgba(58,175,169,0.5);
}

/* ── Back to top ── */
.back-to-top {
  background: linear-gradient(135deg, #3C3982, #3AAFA9) !important;
  box-shadow: 0 8px 30px rgba(58, 175, 169, 0.4) !important;
  border: none !important;
}

/* ── Footer ── */
.footer {
  background: #0a0812 !important;
  border-top: 1px solid rgba(58, 175, 169, 0.1);
}

/* ── Hero text — always visible, GSAP enhances on top ── */
.hero-text,
.hero-title,
.hero-badge,
.hero-description,
.hero-buttons,
.hero-stats {
  opacity: 1;
}

/* ── Hero visual — replace code window with sphere ── */
.hero-visual .code-window {
  display: none;
}

.hero-visual {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-visual .floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ── Glow orbs behind sphere ── */
.hero-visual::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(58,175,169,0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: orbGlow 3s ease-in-out infinite;
  pointer-events: none;
}

.hero-visual::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(60,57,130,0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: orbGlow 4s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes orbGlow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.2); opacity: 1; }
}

/* ── Horizontal scroll container ── */
.projects-horizontal {
  cursor: grab;
}

.projects-horizontal:active {
  cursor: grabbing;
}

/* ── Section badge — glow ── */
.section-badge {
  box-shadow: 0 0 20px rgba(58, 175, 169, 0.15);
}

/* ── Highlight text — animated gradient ── */
.highlight {
  background: linear-gradient(135deg, #3C3982, #3AAFA9, #5A57A8, #3AAFA9) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 4s ease infinite !important;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero-visual {
    display: flex !important;
  }
}

@media (max-width: 600px) {
  #sphere-canvas {
    width: 260px !important;
    height: 260px !important;
  }
}

/* ── Magnetic button wrapper ── */
.btn-primary, .btn-outline {
  will-change: transform;
}