/* =============================================
   LIVE MOTION BACKGROUND — bg-motion.css
   Add to all pages EXCEPT landing (index.html)
   ============================================= */

/* ── Canvas sits fixed behind everything ── */
#particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Make sure all page content sits above ── */
.navbar,
.mobile-menu,
section,
.container,
footer,
.modal-overlay,
.r-panel,
.timeline,
.skills-categories,
.courses-grid,
.gallery-masonry,
.contact-layout {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════
   FLOATING ORB BLOBS
═══════════════════════════════════════ */
.motion-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: background 0.6s ease;
}

.motion-orb-1 {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(212,175,55,0.20), transparent 70%);
  top: -180px;
  right: -120px;
  animation: orbFloat1 14s ease-in-out infinite;
}

.motion-orb-2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(74,158,255,0.13), transparent 70%);
  bottom: -140px;
  left: -100px;
  animation: orbFloat2 18s ease-in-out infinite;
}

.motion-orb-3 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(32,178,170,0.11), transparent 70%);
  top: 38%;
  left: 38%;
  animation: orbFloat3 22s ease-in-out infinite;
}

.motion-orb-4 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(212,175,55,0.09), transparent 70%);
  top: 18%;
  left: 8%;
  animation: orbFloat4 17s ease-in-out infinite;
}

/* Light theme — softer orbs */
[data-theme="light"] .motion-orb-1 {
  background: radial-gradient(circle, rgba(160,124,32,0.13), transparent 70%);
}
[data-theme="light"] .motion-orb-2 {
  background: radial-gradient(circle, rgba(26,95,168,0.08), transparent 70%);
}
[data-theme="light"] .motion-orb-3 {
  background: radial-gradient(circle, rgba(20,122,115,0.07), transparent 70%);
}
[data-theme="light"] .motion-orb-4 {
  background: radial-gradient(circle, rgba(160,124,32,0.06), transparent 70%);
}

/* Orb float keyframes */
@keyframes orbFloat1 {
  0%   { transform: translate(0px,  0px) scale(1);    }
  25%  { transform: translate(-40px, 30px) scale(1.06); }
  50%  { transform: translate(-20px, 65px) scale(0.97); }
  75%  { transform: translate(35px,  20px) scale(1.04); }
  100% { transform: translate(0px,   0px) scale(1);    }
}
@keyframes orbFloat2 {
  0%   { transform: translate(0px,  0px)  scale(1);    }
  30%  { transform: translate(55px, -45px) scale(1.05); }
  60%  { transform: translate(20px, -75px) scale(0.96); }
  80%  { transform: translate(-30px,-30px) scale(1.03); }
  100% { transform: translate(0px,   0px) scale(1);    }
}
@keyframes orbFloat3 {
  0%   { transform: translate(0px,  0px)  scale(1);    }
  20%  { transform: translate(65px,  45px) scale(1.08); }
  50%  { transform: translate(-45px, 75px) scale(0.95); }
  75%  { transform: translate(-65px,-20px) scale(1.05); }
  100% { transform: translate(0px,   0px)  scale(1);    }
}
@keyframes orbFloat4 {
  0%   { transform: translate(0px,   0px) scale(1);    }
  35%  { transform: translate(-55px,-55px) scale(1.10); }
  65%  { transform: translate(45px, -30px) scale(0.94); }
  100% { transform: translate(0px,   0px)  scale(1);    }
}

/* ═══════════════════════════════════════
   ANIMATED GRID
═══════════════════════════════════════ */
.motion-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(212,175,55,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.045) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridPulse 9s ease-in-out infinite;
}

[data-theme="light"] .motion-grid {
  background-image:
    linear-gradient(rgba(160,124,32,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,124,32,0.06) 1px, transparent 1px);
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}

/* ═══════════════════════════════════════
   SCANLINE SWEEP
═══════════════════════════════════════ */
.motion-scanline {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent            0%,
    rgba(212,175,55,0.12) 20%,
    rgba(212,175,55,0.40) 50%,
    rgba(212,175,55,0.12) 80%,
    transparent           100%
  );
  pointer-events: none;
  z-index: 0;
  animation: scanMove 12s linear infinite;
  opacity: 0.55;
}

[data-theme="light"] .motion-scanline {
  background: linear-gradient(
    90deg,
    transparent            0%,
    rgba(160,124,32,0.08) 20%,
    rgba(160,124,32,0.22) 50%,
    rgba(160,124,32,0.08) 80%,
    transparent           100%
  );
  opacity: 0.35;
}

@keyframes scanMove {
  0%   { top: -4px;   }
  100% { top: 100vh;  }
}

/* ═══════════════════════════════════════
   CORNER ACCENT LINES
═══════════════════════════════════════ */
.motion-corner {
  position: fixed;
  width: 110px;
  height: 110px;
  pointer-events: none;
  z-index: 0;
}

.motion-corner-tl {
  top: 82px;       /* below navbar */
  left: 0;
  border-top:  1px solid var(--accent-gold);
  border-left: 1px solid var(--accent-gold);
  animation: cornerPulse 5s ease-in-out infinite;
}

.motion-corner-br {
  bottom: 0;
  right:  0;
  border-bottom: 1px solid var(--accent-gold);
  border-right:  1px solid var(--accent-gold);
  animation: cornerPulse 5s ease-in-out infinite 2.5s;
}

@keyframes cornerPulse {
  0%, 100% { opacity: 0.12; }
  50%       { opacity: 0.40; }
}