/* style.css */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #f8fafc;
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-gradient {
  background: radial-gradient(circle at 10% 20%, rgba(2, 132, 199, 0.05) 0%, rgba(255, 255, 255, 0) 50%);
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

.text-gradient-orange {
   background: linear-gradient(to left, #f97316, #ea580c);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

.group:hover .group-hover\:shake {
  animation: shake 0.3s ease-in-out infinite;
}

/* Animation utilities */
.animate-on-scroll {
  opacity: 1;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-up {
  transform: translateY(0);
}

.animate-fade-in {
  transform: translateY(0);
}

.animate-scale-up {
  transform: scale(1);
}

.animate-slide-right {
  transform: translateX(0);
}

.animate-slide-left {
  transform: translateX(0);
}

.is-visible {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}