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

:root {
  --color-navy: #003366;
  --color-turquoise: #40E0D0;
  --color-gold: #FFD700;
  --color-frosted: #F8FAFC;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-frosted);
  color: #1A202C;
}

h1, h2, h3, h4 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
}

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

.glass-dark {
  background: rgba(0, 51, 102, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.animate-pulse-soft {
  animation: pulse-soft 4s infinite ease-in-out;
}

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

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

/* Custom transitions */
.transition-all-custom {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hero Mosaic specific */
.mosaic-parallax {
  overflow: hidden;
}

.mosaic-parallax img {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mosaic-parallax:hover img {
  transform: scale(1.1);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-mask {
    mask-image: none;
  }
}