/* =========================================================
   BACKGROUND & VISUAL EFFECTS - SILIH ASAH
   Tema: "Silih Asah • Diajar Motékar"
   Latar terang dengan dua warna dari logo:
   - biru/cyan  = panah melingkar "silih" (saling, timbal balik)
   - emas/amber = bilah kujang "asah" & slogan Motékar (kreatif)
   ========================================================= */

/* Background Canvas (Interactivity with Mouse) */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* Background Atmosphere Layers */
.bg-ambient-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Latar dasar: biru sejuk di atas, perlahan menghangat ke krem keemasan di bawah */
body {
  background-color: #f7f8f6;
  background-image:
    radial-gradient(ellipse at 5%  5%,  rgba(37, 99, 235, 0.09) 0%, transparent 45%),
    radial-gradient(ellipse at 95% 8%,  rgba(245, 158, 11, 0.09) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(217, 119, 6, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 62%, rgba(6, 182, 212, 0.06) 0%, transparent 40%),
    linear-gradient(170deg, #f4f7fd 0%, #f8f8f6 50%, #fbf6ea 100%);
  background-attachment: fixed;
}

/* Blueprint / Circuit Grid */
.bg-grid-overlay {
  position: fixed;
  inset: 0;
  background-size: 48px 48px;
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.12) 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.12) 100%);
}

/* Glowing Ambient Orbs */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  animation: floatOrb 18s ease-in-out infinite alternate;
}

/* Orb 1 - Soft Blue (kiri atas) */
.orb-1 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.06) 55%, transparent 100%);
  top: -100px;
  left: -100px;
  opacity: 0.6;
  animation-duration: 17s;
}

/* Orb 2 - Emas kujang (kanan bawah) */
.orb-2 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.06) 55%, transparent 100%);
  bottom: -60px;
  right: -120px;
  opacity: 0.55;
  animation-duration: 23s;
}

/* Orb 3 - Cyan panah "silih" (tengah kanan) */
.orb-3 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, rgba(6, 182, 212, 0.05) 60%, transparent 100%);
  top: 38%;
  left: 55%;
  opacity: 0.5;
  animation-duration: 21s;
}

/* Orb 4 - Amber lembut Motékar (kiri tengah bawah) */
.orb-4 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 60%, transparent 100%);
  bottom: 18%;
  left: -50px;
  opacity: 0.45;
  animation-duration: 26s;
  animation-direction: alternate-reverse;
}

@keyframes floatOrb {
  0%   { transform: translate(0px,  0px)  scale(1);    }
  33%  { transform: translate(40px, -32px) scale(1.07); }
  66%  { transform: translate(-22px, 18px) scale(0.96); }
  100% { transform: translate(-38px, 50px) scale(1.05); }
}

/* =========================================================
   SCANLINE — very subtle texture, barely visible on light bg
   ========================================================= */
.bg-ambient-layer::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(37, 99, 235, 0.012) 3px,
    rgba(37, 99, 235, 0.012) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   CORNER TECH ACCENTS
   ========================================================= */
.bg-ambient-layer::before {
  content: '';
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.55);
  box-shadow:
    0 0 10px rgba(37, 99, 235, 0.55),
    120px 80px  0 2px rgba(245, 158, 11, 0.40),
    calc(100vw - 150px) 55px  0 2px rgba(37, 99, 235, 0.32),
    calc(100vw - 70px)  calc(100vh - 110px) 0 2px rgba(6, 182, 212, 0.32),
    75px calc(100vh - 75px) 0 2px rgba(217, 119, 6, 0.32);
  top: 55px;
  left: 55px;
  pointer-events: none;
  z-index: 2;
  animation: techPing 4s ease-in-out infinite;
}

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

/* =========================================================
   CIRCUIT PULSE GLOW
   ========================================================= */
@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.25), inset 0 0 8px rgba(37, 99, 235, 0.10);
  }
  50% {
    box-shadow: 0 0 22px rgba(37, 99, 235, 0.45), inset 0 0 16px rgba(37, 99, 235, 0.20);
  }
}

.neon-border-pulse {
  animation: neonPulse 3s infinite ease-in-out;
}