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

@layer base {
  body {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .prose {
    @apply max-w-none prose-lg prose-gray dark:prose-invert dark:prose-p:text-gray-300 dark:prose-headings:text-gold;
  }
}

/* Theme transition */
.theme-transition {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Progressive image loading styles */
img {
  transition: filter 0.3s ease-out;
}

img[data-progressive]:not(.loaded) {
  filter: blur(10px);
}

img.loaded {
  filter: blur(0);
}

/* Prevent layout shift while loading */
img {
  aspect-ratio: attr(width) / attr(height);
}

/* Image zoom animation */
.image-zoom-enter {
  opacity: 0;
  transform: scale(0.95);
}

.image-zoom-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.image-zoom-exit {
  opacity: 1;
  transform: scale(1);
}

.image-zoom-exit-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 300ms, transform 300ms;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}