@import "tailwindcss";

@source "../**/*.astro";

@theme {
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --color-surface: #0c0f0e;
  --color-surface-raised: #141917;
  --color-surface-overlay: #1a1f1d;

  --color-ink: #e4e8e6;
  --color-ink-muted: #8a9490;
  --color-ink-faint: #4a5552;

  --color-teal: #3dd8b5;
  --color-teal-dim: #2aaa8e;
  --color-teal-faint: rgba(61, 216, 181, 0.08);
  --color-teal-glow: rgba(61, 216, 181, 0.15);

  --color-rule: rgba(255, 255, 255, 0.06);
}

html {
  scroll-behavior: smooth;
}

body {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Staggered fade-in for page load */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.rise { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rise-d1 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }
.rise-d2 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }
.rise-d3 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; }
.rise-d4 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }

/* Typing cursor blink for code block */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s step-end infinite;
}

/* Smooth scroll-triggered reveals via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Thin scrollbar for catalog */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}