@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-white text-black font-sans;
  }
}

@keyframes sway {
  0% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
  100% { transform: rotate(-1deg); }
}

@keyframes mist {
  0% { transform: translateX(-5%); opacity: 0.3; }
  50% { transform: translateX(5%); opacity: 0.5; }
  100% { transform: translateX(-5%); opacity: 0.3; }
}

@keyframes breeze {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.animate-sway {
  animation: sway 8s ease-in-out infinite;
}

.animate-mist {
  animation: mist 15s ease-in-out infinite;
}

.animate-breeze {
  animation: breeze 10s ease-in-out infinite;
}

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

.glass-navbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.layered-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.shape-1 {
  width: 600px;
  height: 600px;
  background: rgba(0, 0, 0, 0.05);
  top: -200px;
  left: -200px;
}

.shape-2 {
  width: 500px;
  height: 500px;
  background: rgba(0, 0, 0, 0.03);
  bottom: -150px;
  right: -150px;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.hero-gradient {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.text-stroke {
  -webkit-text-stroke: 1px black;
  color: transparent;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}