@layer base {
  body {
    font-family: 'Montserrat', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', system-ui, sans-serif;
  }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

@keyframes bubble-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(1deg); }
  66% { transform: translateY(8px) rotate(-1deg); }
}

@keyframes bubble-medium {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(10px) rotate(-1.5deg); }
  66% { transform: translateY(-14px) rotate(1deg); }
}

@keyframes bubble-fast {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

.bubble-float-slow { animation: bubble-slow 6s ease-in-out infinite; }
.bubble-float-medium { animation: bubble-medium 5s ease-in-out infinite; }
.bubble-float-fast { animation: bubble-fast 4s ease-in-out infinite; }

.bubble-item:hover { animation-play-state: paused; }

/* Blog prose styles — optimized for older readers */
.prose { color: #374151; }
.prose h1 { font-size: 2rem; line-height: 1.2; margin-top: 2em; margin-bottom: 0.5em; color: #111827; }
.prose h2 { font-size: 1.5rem; line-height: 1.3; margin-top: 1.8em; margin-bottom: 0.5em; color: #111827; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3em; }
.prose h3 { font-size: 1.25rem; line-height: 1.4; margin-top: 1.5em; margin-bottom: 0.4em; color: #1f2937; }
.prose p { font-size: 1.125rem; line-height: 1.8; margin-bottom: 1.2em; }
.prose ul, .prose ol { font-size: 1.125rem; line-height: 1.8; }
.prose li { margin-bottom: 0.4em; }
.prose strong { color: #111827; }
.prose a { color: #002c9b; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #001a6b; }
.prose blockquote { border-left-color: #002c9b; font-style: italic; color: #4b5563; }
.prose img { border-radius: 0.75rem; margin: 1.5em 0; }
.prose hr { border-color: #e5e7eb; margin: 2em 0; }

@keyframes marquee-videos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee-videos {
  animation: marquee-videos 40s linear infinite;
}
.animate-marquee-videos:hover {
  animation-play-state: paused;
}