/* Custom styles + animations on top of Tailwind */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* Hide scrollbar styling for code blocks */
.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / .4);
  border-radius: 9999px;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgb(71 85 105 / .5);
}

/* Smooth card hover */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .15);
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fade in animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp .35s ease-out both; }
.animate-fade-in-delay-1 { animation: fadeInUp .35s ease-out .05s both; }
.animate-fade-in-delay-2 { animation: fadeInUp .35s ease-out .1s both; }
.animate-fade-in-delay-3 { animation: fadeInUp .35s ease-out .15s both; }

/* Pulse for highlighting */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(99 102 241 / .4); }
  50% { box-shadow: 0 0 0 8px rgb(99 102 241 / 0); }
}
.animate-soft-pulse { animation: softPulse 2s ease-in-out infinite; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgb(226 232 240) 0%, rgb(241 245 249) 50%, rgb(226 232 240) 100%);
  background-size: 200% 100%;
  animation: skeletonShine 1.4s linear infinite;
}
.dark .skeleton {
  background: linear-gradient(90deg, rgb(30 41 59) 0%, rgb(51 65 85) 50%, rgb(30 41 59) 100%);
  background-size: 200% 100%;
}
@keyframes skeletonShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pretty code block */
.code-box {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}