/* ============================================================================
 * EFEK AMBIEN: AURORA LEMBUT + SALJU/KILAU JATUH (bergerak terus)
 * Dibuat elemen-elemennya oleh ambient-effect.js. Dinonaktifkan otomatis bila
 * pengguna memilih "kurangi gerakan", atau bisa dimatikan manual lewat tombol.
 * ==========================================================================*/

/* ---------- AURORA: gumpalan warna pastel yang menyala & bergerak pelan ---------- */
#sdpAurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* dasar gradien lembut supaya tetap terasa "aurora" walau di sela kartu */
  background:
    radial-gradient(130% 90% at 50% -15%, rgba(150,195,255,.35), transparent 55%),
    radial-gradient(90% 70% at 85% 0%, rgba(217,164,65,.18), transparent 55%),
    linear-gradient(180deg, #e9eef8 0%, #f0f2f5 50%);
}
#sdpAurora .sdp-blob {
  position: absolute; border-radius: 50%;
  filter: blur(55px); opacity: .5; will-change: transform;
  mix-blend-mode: multiply;
}
#sdpAurora .b1 {
  width: 46vw; height: 34vw; top: -8vw; left: -6vw;
  background: radial-gradient(circle at 50% 50%, rgba(120,225,205,.8), rgba(120,225,205,0) 70%);
  animation: sdpBlobA 26s ease-in-out infinite alternate;
}
#sdpAurora .b2 {
  width: 42vw; height: 32vw; top: -6vw; left: 38vw;
  background: radial-gradient(circle at 50% 50%, rgba(165,150,245,.75), rgba(165,150,245,0) 70%);
  animation: sdpBlobB 32s ease-in-out infinite alternate;
}
#sdpAurora .b3 {
  width: 40vw; height: 30vw; top: -7vw; right: -6vw;
  background: radial-gradient(circle at 50% 50%, rgba(217,164,65,.55), rgba(217,164,65,0) 70%);
  animation: sdpBlobC 29s ease-in-out infinite alternate;
}
#sdpAurora .b4 {
  width: 60vw; height: 40vw; bottom: -18vw; left: 20vw;
  background: radial-gradient(circle at 50% 50%, rgba(150,200,245,.6), rgba(150,200,245,0) 70%);
  animation: sdpBlobD 34s ease-in-out infinite alternate;
}
@keyframes sdpBlobA {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(6vw, 4vw) scale(1.12); }
  100% { transform: translate(-3vw, 8vw) scale(1.05); }
}
@keyframes sdpBlobB {
  0%   { transform: translate(0,0) scale(1.05); }
  50%  { transform: translate(-7vw, 5vw) scale(1); }
  100% { transform: translate(4vw, 9vw) scale(1.15); }
}
@keyframes sdpBlobC {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-5vw, 6vw) scale(1.14); }
  100% { transform: translate(3vw, 3vw) scale(1.02); }
}
@keyframes sdpBlobD {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(8vw, -4vw) scale(1.1); }
  100% { transform: translate(-6vw, -7vw) scale(1.05); }
}

/* ---------- KANVAS SALJU/KILAU: lapisan paling atas, tak menghalangi klik ---------- */
#sdpSnow {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; display: block;
}

/* ---------- TOMBOL ON/OFF EFEK (pojok kanan bawah) ---------- */
#sdpEfekToggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 22px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  color: #0b2545; background: rgba(255,255,255,.85);
  border: 1px solid #e3e8f0;
  box-shadow: 0 4px 16px rgba(16,30,54,.14); backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  user-select: none;
}
#sdpEfekToggle:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,30,54,.20); }
#sdpEfekToggle .sdp-efek-ico { font-size: 14px; line-height: 1; animation: sdpSpin 9s linear infinite; }
#sdpEfekToggle .sdp-efek-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #1c8a5a;
  box-shadow: 0 0 0 0 rgba(28,138,90,.5); animation: sdpPulseDot 2.2s infinite;
}
@keyframes sdpSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sdpPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(28,138,90,.5); }
  70% { box-shadow: 0 0 0 8px rgba(28,138,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,138,90,0); }
}

/* Saat efek DIMATIKAN (class di <html>) */
html.sdp-efek-off #sdpAurora { display: none; }
html.sdp-efek-off #sdpSnow { display: none; }
html.sdp-efek-off #sdpEfekToggle .sdp-efek-ico { animation: none; opacity: .5; }
html.sdp-efek-off #sdpEfekToggle .sdp-efek-dot { background: #5b6b85; animation: none; box-shadow: none; }

/* Hormati "kurangi gerakan": matikan animasi blob, tombol tetap ada untuk mengaktifkan manual */
@media (prefers-reduced-motion: reduce) {
  #sdpAurora .sdp-blob { animation: none; }
}