/* ============================================================
   kasidit-site — design system (titanwings pattern)
   Loaded AFTER Tailwind CDN. Dark-only. Amber on GitHub-dark.
   ============================================================ */

/* 1. Tokens — colors + accents */
:root {
  --surface-950: #0d1117;
  --surface-900: #161b22;
  --surface-800: #21262d;
  --surface-700: #30363d;
  --surface-600: rgba(48, 54, 61, 0.5);

  --text-primary: rgb(201, 209, 217);
  --text-heading: #ffffff;
  --text-muted: rgb(110, 118, 129);
  --text-dimmer: rgb(139, 148, 158);
  --text-subtle: rgb(177, 186, 196);

  --brand-400: #fcd34d;
  --brand-500: #f59e0b;
  --brand-600: #d97706;
  --brand-hover: #fbbf24;

  --amber-glow: rgba(245, 158, 11, 0.25);
  --amber-text-glow: rgba(251, 191, 36, 0.5);

  --accent-green: #22c55e;
  --accent-cyan: #06b6d4;
  --accent-purple: #a855f7;
  --accent-orange: #f97316;
}

/* 2. Base — html/body */
html {
  scroll-behavior: smooth;
  background: var(--surface-950);
}
body {
  background: var(--surface-950);
  color: var(--text-primary);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
::selection {
  background: rgba(245, 158, 11, 0.3);
  color: var(--text-heading);
}

/* 3. Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  padding: 8px 12px;
  background: var(--brand-500);
  color: var(--surface-950);
  font-weight: 600;
  border-radius: 6px;
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--brand-hover);
}

/* 4. Scrollbar — thin amber-on-dark */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--surface-950);
}
::-webkit-scrollbar-thumb {
  background: var(--surface-700);
  border-radius: 8px;
  border: 2px solid var(--surface-950);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-600);
}

/* 5. Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px 0 var(--amber-glow); }
  50%      { box-shadow: 0 0 40px 0 var(--amber-glow); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.animate-fade-in   { animation: fadeIn 0.4s ease forwards; }
.animate-fade-up   { animation: fadeUp 0.6s ease forwards; }
.animate-float     { animation: float 6s ease-in-out infinite; }
.animate-glow      { animation: glowPulse 3s ease-in-out infinite; }
.animate-blink     { animation: blink 1s step-end infinite; }

/* 6. Reveal on scroll — IntersectionObserver adds .visible */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 6b. Staggered children — cascade reveal inside grouped parents */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 100ms; }
.stagger-children > *:nth-child(3) { transition-delay: 200ms; }
.stagger-children > *:nth-child(4) { transition-delay: 300ms; }
.stagger-children > *:nth-child(5) { transition-delay: 400ms; }

/* 7. Backgrounds — grid-pattern + hero radial glow */
.bg-grid-pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><path d='M30 20 L30 40 M20 30 L40 30' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/></svg>");
  background-size: 60px 60px;
}
.bg-hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(245, 158, 11, 0.15) 0%, transparent 60%);
}

/* 8. Highlight amber — inline gradient-adjacent emphasis */
.highlight-amber {
  color: var(--brand-hover);
  text-shadow: 0 0 20px var(--amber-text-glow);
}

/* 9. Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--brand-500);
  color: var(--surface-950);
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--brand-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--amber-glow);
  outline: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--text-subtle);
  font-weight: 600;
  border: 1px solid var(--surface-700);
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: rgba(245, 158, 11, 0.5);
  background: var(--surface-900);
  color: var(--brand-hover);
  outline: none;
}

/* 10. Cards */
.card-base {
  background: var(--surface-900);
  border: 1px solid var(--surface-800);
  border-radius: 0.75rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--surface-600);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(245, 158, 11, 0.2);
}

/* 10b. Feature card accent tint — optional semantic accents */
.card-accent-amber  { --card-accent: var(--brand-500); }
.card-accent-green  { --card-accent: var(--accent-green); }
.card-accent-cyan   { --card-accent: var(--accent-cyan); }
.card-accent-purple { --card-accent: var(--accent-purple); }
.card-accent-orange { --card-accent: var(--accent-orange); }
.card-icon-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--card-accent, var(--brand-500)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--brand-500)) 30%, transparent);
}

/* 11. Terminal window */
.terminal-window {
  background: var(--surface-950);
  border: 1px solid var(--surface-800);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.terminal-header {
  background: var(--surface-900);
  border-bottom: 1px solid var(--surface-800);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.terminal-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}
.terminal-dot-red    { background: rgba(239, 68, 68, 0.8); }
.terminal-dot-yellow { background: rgba(234, 179, 8, 0.8); }
.terminal-dot-green  { background: rgba(34, 197, 94, 0.8); }
.terminal-body {
  padding: 1.25rem 1.5rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.terminal-prompt {
  color: var(--brand-500);
}
.terminal-comment {
  color: var(--text-dimmer);
}
.terminal-output {
  color: var(--text-dimmer);
}

/* 12. Tag pill */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  background: var(--surface-800);
  border: 1px solid rgba(48, 54, 61, 0.5);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dimmer);
  text-transform: none;
  letter-spacing: 0.02em;
}
.tag-pill-amber {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--brand-hover);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 13. Copy button */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--surface-800);
  border: 1px solid var(--surface-700);
  border-radius: 0.375rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-dimmer);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.copy-btn:hover,
.copy-btn:focus-visible {
  background: var(--surface-700);
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--brand-hover);
  outline: none;
}
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.copied {
  color: var(--accent-green);
  border-color: rgba(34, 197, 94, 0.5);
}

/* 14. Nav scroll-aware bg */
#navbar-bg {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#navbar-bg.visible {
  opacity: 1;
}

/* 16. Code blocks */
pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
  margin: 0;
}
code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
pre code { color: inherit; }

/* 16b. Skill card — compact catalog item */
.skill-card {
  display: block;
  position: relative;
  background: var(--surface-900);
  border: 1px solid var(--surface-800);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 3rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.skill-card:hover {
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -14px rgba(245, 158, 11, 0.28);
}
.skill-card .skill-title {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  color: var(--brand-400);
  margin: 0 0 0.35rem 0;
  font-weight: 600;
}
.skill-card .skill-meta {
  font-size: 0.875rem;
  color: var(--surface-300);
  line-height: 1.55;
  margin: 0 0 0.75rem 0;
}
.skill-card .pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--brand-hover);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.skill-card .ext {
  position: absolute;
  right: 1rem;
  bottom: 0.85rem;
  margin: 0;
}

/* 17. External arrow glyph inside skill cards */
.ext {
  display: inline-flex;
  margin-left: 0.5rem;
  color: var(--brand-500);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
a:hover .ext,
a:focus-visible .ext {
  transform: translateX(3px);
  opacity: 1;
  color: var(--brand-hover);
}

/* 18. Gradient text helper (when bg-clip utilities need support) */
.text-gradient-amber {
  background: linear-gradient(to right, #fbbf24, #d97706);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* 19. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* 20. i18n — language toggle (EN default, TH alternative) */
html[data-lang="en"] .lang-th { display: none !important; }
html[data-lang="th"] .lang-en { display: none !important; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--surface-700);
  background: var(--surface-900);
  color: var(--text-dimmer);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
  border-color: var(--brand-500);
  color: var(--brand-hover);
  background: var(--surface-800);
  outline: none;
}