@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,700;0,800;1,800&display=swap");

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

.text-stroke {
  -webkit-text-stroke: 1px #3b82f6;
  color: transparent;
}
/* Perspective for 3D effect */
.perspective-1000 {
  perspective: 1000px;
}

/* Custom Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-bounce-slow {
  animation: float 6s ease-in-out infinite;
}

/* Glassmorphism Effect */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Text Stroke effect for the Hero H1 */
.text-stroke {
  -webkit-text-stroke: 1.5px #1e293b;
  color: transparent;
}

/* Slow spin for sync icon */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}
/* Update di style.css */
.bg-blue-600,
.text-blue-600,
.text-blue-500,
.text-stroke {
  transition: all 0.7s ease-in-out;
}

#mobile-screen-content {
  transition: opacity 0.3s ease-in-out;
}
.nav-dot {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dot.bg-blue-600 {
  background-color: var(--dynamic-color, #2563eb); /* Akan terupdate via JS */
}

#slide-desktop,
#slide-mobile {
  will-change: transform, opacity;
}