@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

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

:root {
  --primary: #0C3B2E;
  --secondary: #FFB703;
  --accent: #219EBC;
  --bg-light: #F8F9FA;
  --text-dark: #333333;
  --glass: rgba(255, 255, 255, 0.7);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevent horizontal scrolling globally */
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Glassmorphism Classes */
.glass-nav {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

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

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Custom Button */
.btn-primary {
  @apply bg-[#0C3B2E] text-[#ffffff] px-6 py-2 rounded-full font-semibold transition-all hover:bg-[#092a21] hover:shadow-lg active:scale-95 border border-white/20;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-secondary {
  @apply bg-[#FFB703] text-[#ffffff] px-6 py-2 rounded-full font-semibold transition-all hover:bg-[#e5a602] hover:shadow-lg active:scale-95 border border-white/20;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

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

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

/* 3D Canvas Responsive Fixes */
#woven-container canvas {
  max-width: 100vw;
  z-index: 10 !important; /* Ensure canvas stays below header (z-50) */
  pointer-events: none; /* Let the container handle mouse events */
}

#woven-container {
  pointer-events: auto; /* Catch mouse events for Three.js interaction */
}