/* ==========================================================================
   H3 Showcase — Styles
   A dark, editorial design with warm amber and cool teal accents.
   ========================================================================== */

/* --- Layers --- */
@layer reset, tokens, base, layout, components, utilities;

/* --- Fonts --- */
@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* --- Reset --- */
@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, svg, canvas {
    display: block;
    max-width: 100%;
  }

  ul[role="list"] {
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }
}

/* --- Design Tokens --- */
@layer tokens {
  :root {
    /* Typography */
    --font-display: 'Instrument Serif', 'Georgia', serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Menlo', monospace;

    /* Type Scale (fluid) */
    --text-xs:   clamp(0.7rem,   0.65rem + 0.25vw, 0.8rem);
    --text-sm:   clamp(0.8rem,   0.75rem + 0.3vw,  0.9rem);
    --text-base: clamp(0.95rem,  0.88rem + 0.4vw,  1.1rem);
    --text-lg:   clamp(1.1rem,   0.95rem + 0.7vw,  1.35rem);
    --text-xl:   clamp(1.25rem,  1rem    + 1.1vw,  1.75rem);
    --text-2xl:  clamp(1.6rem,   1.1rem  + 2vw,    2.5rem);
    --text-3xl:  clamp(2rem,     1.3rem  + 3vw,    3.5rem);
    --text-4xl:  clamp(2.8rem,   1.6rem  + 4.5vw,  5.5rem);

    /* Surfaces */
    --surface-0: oklch(0.12 0.015 265);
    --surface-1: oklch(0.16 0.015 265);
    --surface-2: oklch(0.20 0.015 265);
    --surface-3: oklch(0.26 0.015 265);
    --surface-4: oklch(0.32 0.01  265);

    /* Text */
    --text-primary:   oklch(0.93 0.01 265);
    --text-secondary: oklch(0.62 0.02 265);
    --text-tertiary:  oklch(0.50 0.02 265);

    /* Accent — warm amber/gold */
    --accent:       oklch(0.78 0.155 75);
    --accent-dim:   oklch(0.55 0.10 75);
    --accent-glow:  oklch(0.85 0.12 75);
    --accent-bg:    oklch(0.20 0.04 75);

    /* Secondary — cool teal/cyan */
    --secondary:     oklch(0.72 0.12 195);
    --secondary-dim: oklch(0.50 0.08 195);

    /* Tertiary — muted rose */
    --tertiary:     oklch(0.68 0.12 15);
    --tertiary-dim: oklch(0.48 0.08 15);

    /* Semantic */
    --success: oklch(0.72 0.15 155);
    --warning: oklch(0.78 0.15 85);
    --info:    oklch(0.72 0.12 240);

    /* Spacing Scale (fluid) */
    --space-3xs: clamp(0.125rem, 0.1rem  + 0.15vw, 0.25rem);
    --space-2xs: clamp(0.25rem,  0.2rem  + 0.25vw, 0.5rem);
    --space-xs:  clamp(0.5rem,   0.4rem  + 0.5vw,  0.75rem);
    --space-sm:  clamp(0.75rem,  0.6rem  + 0.7vw,  1rem);
    --space-md:  clamp(1rem,     0.8rem  + 1vw,    1.5rem);
    --space-lg:  clamp(1.5rem,   1.1rem  + 1.8vw,  2.5rem);
    --space-xl:  clamp(2.5rem,   1.5rem  + 3.5vw,  4.5rem);
    --space-2xl: clamp(3.5rem,   2rem    + 5vw,    7rem);
    --space-3xl: clamp(5rem,     3rem    + 7vw,    10rem);

    /* Layout */
    --content-width: 72rem;
    --narrow-width:  48rem;

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* Borders */
    --border-subtle: 1px solid oklch(0.25 0.01 265);
    --border-accent: 1px solid var(--accent-dim);

    /* Shadows */
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.3);
    --shadow-md: 0 4px 16px oklch(0 0 0 / 0.4);
    --shadow-lg: 0 8px 40px oklch(0 0 0 / 0.5);
    --shadow-glow: 0 0 40px oklch(0.78 0.155 75 / 0.15);
  }
}

/* --- Base --- */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--text-primary);
    background: var(--surface-0);
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
  }

  h1 { font-size: var(--text-4xl); letter-spacing: -0.03em; }
  h2 { font-size: var(--text-3xl); letter-spacing: -0.025em; }
  h3 { font-size: var(--text-xl);  letter-spacing: -0.01em; }
  h4 { font-size: var(--text-lg);  letter-spacing: -0.01em; }

  em {
    font-style: italic;
    color: var(--accent);
  }

  p {
    max-width: 65ch;
    color: var(--text-secondary);
  }

  ::selection {
    background: oklch(0.78 0.155 75 / 0.3);
    color: var(--text-primary);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Noise texture overlay */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    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='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)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px;
  }
}

/* --- Layout --- */
@layer layout {
  .section {
    position: relative;
    padding: var(--space-3xl) var(--space-lg);
  }

  .section-inner {
    max-width: var(--content-width);
    margin: 0 auto;
  }

  .section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
  }

  .section-number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    opacity: 0.7;
  }

  .section-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }

  .section-title {
    margin-bottom: var(--space-md);
  }

  .section-title--center {
    text-align: center;
    margin-inline: auto;
  }

  .section-lead {
    font-size: var(--text-lg);
    line-height: 1.5;
    max-width: 52ch;
  }

  .section-lead--center {
    text-align: center;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
  }
}

/* --- Navigation --- */
@layer components {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--space-sm) var(--space-lg);
    transition: background var(--duration-normal) var(--ease-smooth),
                backdrop-filter var(--duration-normal) var(--ease-smooth);
  }

  .site-header.scrolled {
    background: oklch(0.12 0.015 265 / 0.85);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: var(--border-subtle);
  }

  .nav {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-primary);
    transition: color var(--duration-fast);
  }

  .nav-logo:hover {
    color: var(--accent);
  }

  .logo-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
  }

  .nav-links {
    display: flex;
    gap: var(--space-md);
  }

  .nav-links a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--duration-fast);
    position: relative;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }

  .nav-links a:hover {
    color: var(--text-primary);
  }

  .nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .nav-cta {
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--border-accent);
    border-radius: 6px;
    color: var(--accent);
    transition: all var(--duration-fast);
  }

  .nav-cta:hover {
    background: var(--accent);
    color: var(--surface-0);
  }

  /* Mobile nav toggle + drawer */
  .nav-toggle {
    display: none;
    color: var(--text-secondary);
    padding: var(--space-2xs);
    transition: color var(--duration-fast);
  }

  .nav-toggle:hover { color: var(--text-primary); }

  .nav-toggle .hamburger-top,
  .nav-toggle .hamburger-mid,
  .nav-toggle .hamburger-bot {
    transition: transform var(--duration-normal) var(--ease-smooth),
                opacity var(--duration-fast);
    transform-origin: center;
  }

  .nav-toggle[aria-expanded="true"] .hamburger-top {
    transform: translateY(5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .hamburger-mid {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .hamburger-bot {
    transform: translateY(-5px) rotate(-45deg);
  }

  .mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: oklch(0.13 0.015 265 / 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-subtle);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duration-normal) var(--ease-smooth),
                transform var(--duration-normal) var(--ease-smooth);
  }

  .mobile-nav.open {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mobile-nav a {
    display: block;
    padding: var(--space-xs) 0;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: var(--border-subtle);
    transition: color var(--duration-fast);
  }

  .mobile-nav a:hover {
    color: var(--accent);
  }

  .mobile-nav ul li:last-child a {
    border-bottom: none;
  }

  @media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-toggle { display: block; }
    .mobile-nav { display: block; }
  }
}

/* --- Hero --- */
@layer components {
  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    overflow: hidden;
    background:
      radial-gradient(ellipse at 60% 40%, oklch(0.35 0.12 60 / 0.4) 0%, transparent 70%),
      radial-gradient(ellipse at 30% 70%, oklch(0.25 0.08 195 / 0.25) 0%, transparent 60%),
      var(--surface-0);
  }

  #hero-shader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    max-width: 52rem;
  }

  .hero-kicker {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-md);
    opacity: 0;
    animation: fade-in-up 800ms var(--ease-out-expo) 200ms forwards;
  }

  .hero-title {
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    opacity: 0;
    animation: fade-in-up 800ms var(--ease-out-expo) 400ms forwards;
  }

  .hero-sub {
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 42ch;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
    opacity: 0;
    animation: fade-in-up 800ms var(--ease-out-expo) 600ms forwards;
  }

  .hero-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fade-in-up 800ms var(--ease-out-expo) 800ms forwards;
  }

  .hero-scroll-hint {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    animation: fade-in 1200ms var(--ease-smooth) 1500ms forwards;
    z-index: 1;
  }

  .hero-scroll-hint svg {
    animation: scroll-bounce 2s var(--ease-smooth) infinite;
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 0.6; }
  }

  @keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }
}

/* --- Buttons --- */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 8px;
    transition: all var(--duration-fast) var(--ease-smooth);
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--accent);
    color: var(--surface-0);
    box-shadow: 0 0 0 0 oklch(0.78 0.155 75 / 0);
  }

  .btn-primary:hover {
    background: var(--accent-glow);
    box-shadow: 0 0 24px oklch(0.78 0.155 75 / 0.3);
    transform: translateY(-1px);
  }

  .btn-ghost {
    border: var(--border-subtle);
    color: var(--text-secondary);
  }

  .btn-ghost:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
    background: var(--surface-1);
  }
}

/* --- Platform Section --- */
@layer components {
  .platform {
    border-top: var(--border-subtle);
  }

  .platform-intro {
    margin-bottom: var(--space-2xl);
  }

  .platform-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-lg);
  }

  .pillar {
    padding: var(--space-lg);
    background: var(--surface-1);
    border: var(--border-subtle);
    border-radius: 12px;
    transition: all var(--duration-normal) var(--ease-smooth);
  }

  .pillar:hover {
    border-color: var(--accent-dim);
    background: var(--surface-2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
  }

  .pillar-icon {
    color: var(--accent);
    margin-bottom: var(--space-md);
  }

  .pillar h3 {
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
  }

  .pillar p {
    font-size: var(--text-sm);
    line-height: 1.6;
  }
}

/* --- Agents Section --- */
@layer components {
  .agents {
    border-top: var(--border-subtle);
    background: var(--surface-1);
  }

  .agents-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  @media (max-width: 900px) {
    .agents-layout {
      grid-template-columns: 1fr;
    }
  }

  .agents-text .section-lead {
    margin-bottom: var(--space-lg);
  }

  .feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .feature-list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-xs) 0;
    border-bottom: var(--border-subtle);
  }

  .feature-list li:last-child {
    border-bottom: none;
  }

  .feature-list strong {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent);
  }

  .feature-list span {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Terminal */
  .terminal {
    background: oklch(0.10 0.01 265);
    border: var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: calc(var(--space-3xl) + 60px);
  }

  .terminal-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: oklch(0.14 0.01 265);
    border-bottom: var(--border-subtle);
  }

  .terminal-dots {
    display: flex;
    gap: 6px;
  }

  .terminal-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface-3);
  }

  .terminal-dots span:first-child { background: oklch(0.65 0.2 25); }
  .terminal-dots span:nth-child(2) { background: oklch(0.75 0.15 90); }
  .terminal-dots span:last-child { background: oklch(0.65 0.15 145); }

  .terminal-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  .terminal-body {
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.8;
    min-height: 320px;
  }

  .term-line {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth);
  }

  .term-line.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .term-indent {
    padding-left: var(--space-md);
  }

  .term-prompt {
    color: var(--accent);
    margin-right: var(--space-2xs);
  }

  .term-cmd {
    color: var(--text-primary);
    font-weight: 500;
  }

  .term-dim { color: var(--text-tertiary); }
  .term-accent { color: var(--accent); }
  .term-secondary { color: var(--secondary); }
  .term-success { color: var(--success); }
  .term-warn { color: var(--warning); }
  .term-info { color: var(--info); }
}

/* --- Knowledge Graph --- */
@layer components {
  .knowledge {
    border-top: var(--border-subtle);
  }

  .graph-container {
    position: relative;
    margin-top: var(--space-lg);
    border: var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    background: oklch(0.10 0.01 265);
  }

  #knowledge-graph {
    width: 100%;
    height: 500px;
    cursor: crosshair;
  }

  .graph-legend {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
  }

  .legend-item i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .legend-item[data-type="repo"] i { background: var(--accent); }
  .legend-item[data-type="user"] i { background: var(--secondary); }
  .legend-item[data-type="ticket"] i { background: var(--tertiary); }
  .legend-item[data-type="conversation"] i { background: oklch(0.68 0.12 290); }
  .legend-item[data-type="pr"] i { background: var(--success); }
}

/* --- Integrations --- */
@layer components {
  .integrations {
    border-top: var(--border-subtle);
    background: var(--surface-1);
  }

  .integrations-layout {
    margin-bottom: var(--space-xl);
  }

  .integrations-text {
    margin-bottom: var(--space-xl);
  }

  .integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-sm);
    max-width: 42rem;
  }

  .integration-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
    background: var(--surface-2);
    border: var(--border-subtle);
    border-radius: 10px;
    transition: all var(--duration-normal) var(--ease-smooth);
    cursor: default;
  }

  .integration-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .integration-icon {
    color: var(--text-secondary);
    transition: color var(--duration-fast);
  }

  .integration-card:hover .integration-icon {
    color: var(--accent);
  }

  .integration-card span {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
  }

  .integration-card--more .integration-icon {
    color: var(--accent-dim);
  }

  .integration-count {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--accent-dim);
  }

  /* Code block */
  .integrations-code {
    margin-top: var(--space-xl);
  }

  .code-block {
    background: oklch(0.10 0.01 265);
    border: var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    max-width: 42rem;
  }

  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    background: oklch(0.14 0.01 265);
    border-bottom: var(--border-subtle);
  }

  .code-lang {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-dim);
    font-weight: 500;
  }

  .code-file {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  .code-block pre {
    padding: var(--space-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--text-secondary);
  }

  .code-kw { color: oklch(0.72 0.12 290); }
  .code-fn { color: var(--accent); }
  .code-str { color: var(--success); }
  .code-num { color: var(--tertiary); }
  .code-comment { color: var(--text-tertiary); font-style: italic; }
}

/* --- Pipelines --- */
@layer components {
  .pipelines {
    border-top: var(--border-subtle);
  }

  .pipeline-viz {
    margin-top: var(--space-xl);
  }

  .pipeline-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: var(--space-lg) 0;
    overflow-x: auto;
  }

  .pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    min-width: 120px;
    flex-shrink: 0;
  }

  .stage-node {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-1);
    transition: all var(--duration-slow) var(--ease-smooth);
    position: relative;
  }

  .stage-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface-3);
    transition: all var(--duration-slow) var(--ease-smooth);
  }

  .pipeline-stage.active .stage-node {
    border-color: var(--accent);
    box-shadow: 0 0 20px oklch(0.78 0.155 75 / 0.3);
  }

  .pipeline-stage.active .stage-indicator {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }

  .pipeline-stage.completed .stage-node {
    border-color: var(--success);
  }

  .pipeline-stage.completed .stage-indicator {
    background: var(--success);
  }

  .stage-content {
    text-align: center;
    max-width: 140px;
  }

  .stage-content h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-3xs);
  }

  .stage-content p {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    max-width: none;
  }

  .pipeline-connector {
    display: flex;
    align-items: center;
    padding-top: 22px; /* center with node */
    flex-shrink: 0;
  }

  .connector-line {
    width: clamp(24px, 4vw, 60px);
    height: 2px;
    background: var(--surface-3);
    position: relative;
    overflow: hidden;
  }

  .pipeline-stage.completed + .pipeline-connector .connector-line,
  .pipeline-stage.active + .pipeline-connector .connector-line {
    background: var(--accent-dim);
  }

  .connector-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: flow 2s linear infinite;
    opacity: 0;
  }

  .pipeline-stage.active + .pipeline-connector .connector-line::after {
    opacity: 1;
  }

  @keyframes flow {
    from { left: -50%; }
    to   { left: 100%; }
  }

  .pipeline-footnote {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-xl);
    font-style: italic;
  }

  /* Responsive: vertical on small screens */
  @media (max-width: 700px) {
    .pipeline-track {
      flex-direction: column;
      align-items: center;
    }

    .pipeline-stage {
      flex-direction: row;
      min-width: auto;
      gap: var(--space-md);
    }

    .stage-content {
      text-align: left;
      max-width: none;
    }

    .pipeline-connector {
      padding-top: 0;
      padding-left: 22px;
    }

    .connector-line {
      width: 2px;
      height: 32px;
    }
  }
}

/* --- Footer --- */
@layer components {
  .site-footer {
    border-top: var(--border-subtle);
    padding: var(--space-xl) var(--space-lg);
  }

  .footer-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--text-tertiary);
  }

  .footer-note {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
  }

  .footer-links {
    display: flex;
    gap: var(--space-md);
  }

  .footer-links a {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    transition: color var(--duration-fast);
  }

  .footer-links a:hover {
    color: var(--accent);
  }
}

/* --- Scroll Reveal --- */
@layer utilities {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 600ms var(--ease-out-expo),
                transform 600ms var(--ease-out-expo);
  }

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

  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .term-line {
    opacity: 1;
    transform: none;
  }
}

/* --- Scrollbar --- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--surface-4);
  }
}