/* Eigen Hitchens — Custom styles (supplements Tailwind CDN) */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Dark mode overrides */
[data-theme="dark"] {
  --tw-bg-base: #0f0f14;
  --tw-text-base: #e8e6e1;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #0f0f14; color: #e8e6e1; }
[data-theme="dark"] .bg-white, [data-theme="dark"] .bg-\[\#fafaf8\] { background: #0f0f14 !important; }
[data-theme="dark"] .bg-\[\#f4f4f0\] { background: #16161c !important; }
[data-theme="dark"] .text-\[\#1a1a1a\] { color: #e8e6e1 !important; }
[data-theme="dark"] .text-\[\#555\] { color: #aaa !important; }
[data-theme="dark"] .text-\[\#737373\] { color: #777 !important; }
[data-theme="dark"] .border-\[\#e2e2de\], [data-theme="dark"] .border-\[\#efefeb\] { border-color: #2a2a32 !important; }
[data-theme="dark"] .nav-glass { background: rgba(15,15,20,0.9) !important; }
[data-theme="dark"] .card-surface { background: #1a1a22 !important; border-color: #2a2a32 !important; }
[data-theme="dark"] .shadow-\[0_0_0_8px_white\] { --tw-shadow: 0 0 0 8px #0f0f14 !important; }

/* Selection */
::selection { background: #c4a04a; color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e2de; border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a32; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Nav glass effect */
.nav-glass {
  background: rgba(250,250,248,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Card surface helper */
.card-surface {
  background: #fff;
  border: 1px solid #e2e2de;
  transition: all 0.2s ease;
}
.card-surface:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* Clean section boundary rendering */
section + section { border-top: 1px solid transparent; }

/* Animated SVG */
@keyframes pulse-node {
  0%, 100% { r: 6; }
  50% { r: 8; }
}
@keyframes flow-line {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
.node-pulse { animation: pulse-node 3s ease-in-out infinite; }
.flow-animate { stroke-dasharray: 10 10; animation: flow-line 2s linear infinite; }

/* Fade-in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image marquee */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee-scroll 50s linear infinite;
}

/* Timeline scroll-tracking */
.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
}
.timeline-track-bg { background: #efefeb; }
[data-theme="dark"] .timeline-track-bg { background: #2a2a32; }
.timeline-track-fill {
  background: #1a1a1a;
  width: 3px;
  transition: height 0.1s linear;
}
[data-theme="dark"] .timeline-track-fill { background: #e8e6e1; }
.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  box-shadow: 0 0 0 6px #fafaf8;
  z-index: 20;
}
[data-theme="dark"] .timeline-dot { box-shadow: 0 0 0 6px #0f0f14; }
.timeline-dot.active { background: #1a1a1a; }
[data-theme="dark"] .timeline-dot.active { background: #e8e6e1; }

/* Theme toggle */
.theme-toggle {
  background: none;
  border: 1px solid #e2e2de;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
}
[data-theme="dark"] .theme-toggle { border-color: #2a2a32; color: #aaa; }
.theme-toggle:hover { border-color: #c4a04a; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in { transition: none; opacity: 1; transform: none; }
  .animate-marquee { animation: none; }
  .node-pulse { animation: none; }
  .flow-animate { animation: none; }
  canvas { animation: none; }
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Catalog filter buttons */
.catalog-filter {
  border-color: #e2e2de;
  color: #737373;
  cursor: pointer;
  transition: all 0.15s ease;
}
.catalog-filter:hover { border-color: #c4a04a; color: #c4a04a; }
.catalog-filter.active { border-color: #c4a04a; color: #c4a04a; background: rgba(196,160,74,0.06); }
[data-theme="dark"] .catalog-filter { border-color: #2a2a32; color: #777; }
[data-theme="dark"] .catalog-filter:hover, [data-theme="dark"] .catalog-filter.active { border-color: #c4a04a; color: #c4a04a; }

/* Pilot launch banner */
.pilot-banner {
  background: #1a1a1a;
  color: #fafaf8;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 28px;
  overflow: hidden;
}
.pilot-banner-track {
  display: flex;
  gap: 0;
  animation: banner-scroll 30s linear infinite;
  white-space: nowrap;
  height: 28px;
  align-items: center;
}
.pilot-banner-track:hover { animation-play-state: paused; }
.pilot-banner-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 32px;
  flex-shrink: 0;
}
.pilot-banner-item .accent { color: #c4a04a; font-weight: 600; }
.pilot-banner-item button {
  background: none;
  border: none;
  color: #fafaf8;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}
.pilot-banner-item button:hover { color: #c4a04a; }
@keyframes banner-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
[data-theme="dark"] .pilot-banner { background: #0a0a0f; }

/* Focus styles for keyboard navigation */
*:focus-visible {
  outline: 2px solid #c4a04a;
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid #c4a04a;
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}