body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-digital {
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.06em;
}

/* Efek Mesh Gradient bernuansa Coklat Tua, Coklat Muda, dan Kuning */
.mesh-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(48px);
  opacity: 0.42;
  pointer-events: none;
  will-change: auto;
}

.blob-dark-brown {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #5c3317 0%, #8b5a2b 70%, transparent 100%);
  top: 5%;
  left: 22%;
}

.blob-light-brown {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, #c69c6d 0%, #d9b382 70%, transparent 100%);
  bottom: 8%;
  left: 8%;
}

.blob-warm-yellow {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #f4c430 0%, #f7d97e 70%, transparent 100%);
  top: 28%;
  left: 34%;
  opacity: 0.35;
}

/* Pilihan Multi-Role saat aktif (Sign Up & Edit Profil) */
.role-chip.active,
.edit-role-chip.active {
  border-color: #6e4726;
  background-color: #f7efe6;
  color: #2b180a;
  box-shadow: 0 2px 8px rgba(110, 71, 38, 0.12);
}

/* Garis animasi saat kamera melakukan Scan Wajah */
.scan-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f4c430, #8c5a32, transparent);
  box-shadow: 0 0 14px #f4c430;
  animation: scanMove 2.2s infinite ease-in-out;
}

@keyframes scanMove {
  0% {
    top: 8%;
  }

  50% {
    top: 90%;
  }

  100% {
    top: 8%;
  }
}

/* Penyesuaian Z-Index Peta Leaflet */
#geofence-map {
  z-index: 1;
}

/* Responsif: batasi ukuran blob agar tidak memenuhi layar kecil */
@media (max-width: 640px) {
  .blob-dark-brown {
    width: 300px;
    height: 300px;
    left: 4%;
  }

  .blob-light-brown {
    width: 280px;
    height: 280px;
    left: -8%;
  }

  .blob-warm-yellow {
    width: 250px;
    height: 250px;
    left: 28%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scan-laser {
    animation: none;
    top: 50%;
  }
}

/* Efek Mirror (Cermin) pada Kamera Live agar kontrol posisi wajah natural */
#reg-video,
#scan-video {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}


/* Animasi Custom Toast Notification Bertema Website */
@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}

.toast-enter {
  animation: toastSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
  animation: toastFadeOut 0.22s ease-in forwards;
}


/* Optimasi rendering: efek dekoratif tidak menerima event dan tidak dipaksa
   menggunakan GPU terus-menerus. Hormati preferensi gerakan pengguna. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Elemen dekoratif tidak mengganggu interaksi formulir. */
.mesh-blob {
  pointer-events: none;
}