html {
  scroll-padding-top: 5rem;
}
body {
  font-family: "Fira Sans", sans-serif;
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}
.bento-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Dark Mode Styles */
.dark body {
  background-color: #050505;
  background-image: radial-gradient(
    circle at top right,
    rgba(59, 130, 246, 0.05),
    transparent 40%
  ),
  radial-gradient(
    circle at bottom left,
    rgba(139, 92, 246, 0.05),
    transparent 40%
  );
  color: #e2e8f0;
}
.dark .bento-card {
  background: rgba(18, 18, 18, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Light Mode Styles */
body {
  background-color: #f8fafc;
  color: #1e293b;
}
.bento-card {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .bento-card:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(30, 30, 30, 0.8);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}
.bento-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.15);
}

.tech-icon {
  filter: grayscale(100%);
  transition: all 0.4s ease;
}
.bento-card:hover .tech-icon {
  filter: grayscale(0%);
  transform: scale(1.2) rotate(5deg);
}

/* Animasi Halus untuk Navigasi */
nav {
  transition: all 0.3s ease;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.animate-float {
  display: inline-block;
  animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
  display: inline-block;
  animation: float 4s ease-in-out infinite;
  animation-delay: 1s; /* Membuat gerakan tidak barengan agar lebih dinamis */
}

/* Efek Interaktif saat Hover */
.hover-pop {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-pop:hover {
  transform: scale(1.1) rotate(-2deg);
  filter: drop-shadow(0 10px 15px rgba(59, 130, 246, 0.3));
}

/* Efek Warna Bergerak */
.color-change {
  background: linear-gradient(to right, #3b82f6, #8b5cf6, #3b82f6);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  transition: 0.5s;
}

.color-change:hover {
  background-position: right center;
  color: transparent;
}

/* Custom Scrollbar for Modal */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(113, 113, 122, 0.2);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(113, 113, 122, 0.4);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(63, 63, 70, 0.5);
}