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

:root {
  --motion-duration-short: 180ms;
  --motion-duration-medium: 260ms;
  --motion-ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
  --card-translate-y: -6px;
}

body {
  @apply bg-white text-gray-900 transition-colors duration-200 ease-snappy dark:bg-gray-950 dark:text-gray-100 text-[15px] sm:text-base;
}

.toc-target-highlight {
  @apply bg-yellow-50/60 dark:bg-yellow-900/40 transition-colors duration-500;
}

/* Subtle hover for article elements */
.prose blockquote {
  @apply transition-transform transition-shadow duration-180 ease-snappy;
}

.prose blockquote:hover {
  @apply -translate-y-0.5 shadow-sm;
}

.prose pre {
  @apply transition-transform transition-shadow duration-180 ease-snappy;
}

.prose pre:hover {
  @apply -translate-y-0.5 shadow-md;
}

.prose h1 > a,
.prose h2 > a,
.prose h3 > a,
.prose h4 > a,
.prose h5 > a,
.prose h6 > a {
  text-decoration: none !important;
  color: inherit !important;
}

.hero-title {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}

.hero-title__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 10%, rgba(59, 130, 246, 0.35) 45%, transparent 90%);
  transform: translateX(-120%);
  animation: hero-sweep 4s var(--motion-ease-snappy) infinite;
  pointer-events: none;
}

.toc-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.toc-list li {
  list-style: none !important;
  padding-left: 0 !important;
}

.toc-list li::marker {
  content: '' !important;
}

@keyframes hero-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  60% {
    transform: translateX(120%);
    opacity: 0;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

.tag-chip {
  position: relative;
  overflow: hidden;
  transition: color var(--motion-duration-short) var(--motion-ease-snappy), background-color var(--motion-duration-short) var(--motion-ease-snappy);
}

.tag-chip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
  transition: width var(--motion-duration-short) var(--motion-ease-snappy), left var(--motion-duration-short) var(--motion-ease-snappy);
}

.tag-chip:hover::after,
.tag-chip:focus-visible::after {
  width: 100%;
  left: 0;
}

@layer components {
  .motion-card {
    transition: transform var(--motion-duration-medium) var(--motion-ease-snappy),
      box-shadow var(--motion-duration-medium) var(--motion-ease-snappy),
      background-color var(--motion-duration-medium) var(--motion-ease-snappy),
      border-color var(--motion-duration-medium) var(--motion-ease-snappy);
  }

  .motion-card:hover {
    transform: translateY(var(--card-translate-y));
  }

  .motion-link {
    transition: color var(--motion-duration-short) var(--motion-ease-snappy),
      transform var(--motion-duration-short) var(--motion-ease-snappy);
  }
}