@import "tailwindcss";

@theme {
  /* Spectra color system */
  --color-spectra-bg: #0c0d11;
  --color-spectra-surface: #14151a;
  --color-spectra-raised: #1c1d24;
  --color-spectra-border: #2a2b35;
  --color-spectra-accent: #e05047;
  --color-spectra-accent-dim: #b33d36;
  --color-spectra-muted: #6b6d7b;
  --color-spectra-text: #e2e4ed;
  --color-spectra-text-dim: #9a9caa;

  /* Spectra fonts */
  --font-display: "Space Mono", monospace;
  --font-body: "Outfit", "Noto Sans JP", sans-serif;

  /* Animations */
  --animate-pulse-dot: pulse-dot 2.5s ease-in-out infinite;
  --animate-flow: flow 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes flow {
  0% { transform: translateX(-4px); opacity: 0.3; }
  50% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(4px); opacity: 0.3; }
}

/* Light mode overrides */
html:not(.dark) {
  --color-spectra-bg: #f8f8fa;
  --color-spectra-surface: #ffffff;
  --color-spectra-raised: #f0f0f3;
  --color-spectra-border: #e0e0e6;
  --color-spectra-accent: #d0443c;
  --color-spectra-accent-dim: #b33d36;
  --color-spectra-muted: #8b8d9b;
  --color-spectra-text: #1a1b23;
  --color-spectra-text-dim: #5a5c6a;
}

/* Theme-aware visibility */
.dark .light-only { display: none; }
html:not(.dark) .dark-only { display: none; }

/* Base styles */
body {
  background: var(--color-spectra-bg);
  color: var(--color-spectra-text);
  font-family: var(--font-body);
}

html {
  scroll-behavior: smooth;
}

/* Dot grid background */
.dot-grid {
  background-image: radial-gradient(circle, var(--color-spectra-border) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Glow effects */
.glow-red {
  box-shadow: 0 0 60px color-mix(in srgb, var(--color-spectra-accent) 15%, transparent),
              0 0 120px color-mix(in srgb, var(--color-spectra-accent) 5%, transparent);
}

.glow-red-sm {
  box-shadow: 0 0 30px color-mix(in srgb, var(--color-spectra-accent) 12%, transparent);
}

/* Nav blur */
.nav-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Scroll fade-in */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.stagger > .reveal:nth-child(5) { transition-delay: 320ms; }

/* Subtle noise texture overlay */
.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Feature card hover */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-spectra-accent) 25%, transparent);
  box-shadow: 0 8px 40px color-mix(in srgb, var(--color-spectra-accent) 8%, transparent);
}

/* Download button */
.dl-btn {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.dl-btn:hover {
  background-color: var(--color-spectra-accent-dim);
  transform: translateY(-1px);
}

.dl-btn:active {
  transform: translateY(0);
}

/* Terminal block */
.terminal-block {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.terminal-block:hover {
  border-color: color-mix(in srgb, var(--color-spectra-accent) 40%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--color-spectra-accent) 10%, transparent);
}

/* Workflow node */
.wf-node {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wf-node:hover {
  border-color: var(--color-spectra-accent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--color-spectra-accent) 15%, transparent);
}

/* App preview — seamless floating window */
.app-ambient-glow {
  width: clamp(300px, 60vw, 700px);
  height: clamp(200px, 40vw, 500px);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--color-spectra-accent) 8%, transparent) 0%,
    color-mix(in srgb, var(--color-spectra-accent) 3%, transparent) 40%,
    transparent 70%
  );
  filter: blur(60px);
}