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

:root {
  --background: 220 20% 7%;
  --foreground: 210 40% 96%;

  --card: 220 18% 12%;
  --card-foreground: 210 40% 96%;

  --popover: 220 18% 12%;
  --popover-foreground: 210 40% 96%;

  --primary: 207 90% 54%;
  --primary-foreground: 220 20% 7%;

  --secondary: 220 16% 18%;
  --secondary-foreground: 210 40% 96%;

  --muted: 220 14% 15%;
  --muted-foreground: 215 15% 55%;

  --accent: 207 100% 44%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 220 16% 20%;
  --input: 220 16% 20%;
  --ring: 207 90% 54%;

  --radius: 0.75rem;

  --sidebar-background: 220 18% 10%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 207 90% 54%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 220 16% 18%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 20%;
  --sidebar-ring: 207 90% 54%;

  --water-blue: 207 90% 54%;
  --water-light: 200 85% 65%;
  --water-dark: 210 95% 35%;
  --navy: 220 20% 7%;
  --navy-light: 220 18% 12%;
  --shimmer: 0 0% 100%;
}

*,
*::before,
*::after {
  border-color: hsl(var(--border));
  box-sizing: border-box;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.text-gradient-water {
  background-image: linear-gradient(
    135deg,
    hsl(var(--water-light)),
    hsl(var(--primary)),
    hsl(var(--water-dark))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-water {
  background: linear-gradient(
    135deg,
    hsl(var(--water-dark)),
    hsl(var(--primary)),
    hsl(var(--water-light))
  );
}

.bg-gradient-card {
  background: linear-gradient(
    145deg,
    hsl(var(--card)),
    hsl(var(--secondary))
  );
}

.glow-blue {
  box-shadow:
    0 0 30px -5px hsl(var(--primary) / 0.4),
    0 0 60px -10px hsl(var(--primary) / 0.2);
}

.glow-blue-sm {
  box-shadow: 0 0 15px -3px hsl(var(--primary) / 0.3);
}

.water-shimmer {
  position: relative;
  overflow: hidden;
}

.water-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    hsl(var(--shimmer) / 0.05) 50%,
    transparent 60%
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}

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

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

.scroll-indicator {
  animation: scroll-bounce 2s infinite;
}

@keyframes scroll-bounce {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 8px);
  }
}

.hero-drop {
  position: absolute;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / 0.2);
  animation-name: hero-drop-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes hero-drop-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-30px) scale(1.3);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.2;
  }
}

#site-nav[data-scrolled="false"] {
  background-color: transparent;
}

#site-nav[data-scrolled="true"] {
  background-color: hsl(var(--background) / 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.js-mobile-menu {
  max-height: 0;
}

.js-mobile-menu.is-open {
  max-height: 400px;
}

[data-animate],
.animate-on-load {
  will-change: transform, opacity;
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].is-visible,
.animate-on-load.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

[data-animate="fade-up"],
.animate-on-load[data-animate-initial="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

[data-animate="fade-in"],
.animate-on-load[data-animate-initial="fade-in"] {
  opacity: 0;
  transform: translate3d(0, 0, 0);
}

[data-animate="slide-in-right"] {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
}

[data-animate="zoom-in"] {
  opacity: 0;
  transform: scale(0.9);
}

.animate-on-load {
  opacity: 0;
}

.prose.prose-invert a {
  color: hsl(var(--primary));
}

.prose.prose-invert a:hover {
  text-decoration: underline;
}