/*
 * components.css — Named component classes.
 *
 * Canonical source: docs/design-system.md §6 (Component inventory).
 * Section order matches §6.1 → §6.8. Rules are extracted verbatim from
 * reference/prototype.html's <style> block; only grouping and section
 * headers are added.
 *
 * Hairlines, eyebrow, and other global primitives live in base.css per
 * the §6 introduction. The §6.3 sub-divisions (.window-titlebar,
 * .window-tabs, .window-body) are NOT classes — they are structural
 * divisions composed in HTML via Tailwind utilities. Composite mockups
 * (AI tier cards, minimap, versions browser) reuse the primitives in
 * this file; they do not have dedicated component classes.
 *
 * No HTML consumes these styles yet — src/_partials/head.html is a
 * Step 2.3 placeholder and does not <link> any stylesheet.
 */

/* ========== Navigation (§6.1) ========== */

.nav-shell {
    transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
    border-bottom: 1px solid transparent;
}
.nav-shell.scrolled {
    background: rgba(10,10,10,0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--line);
}
.nav-link {
    color: var(--fg-2);
    transition: color .15s ease;
}
.nav-link:hover { color: var(--fg); }

/* ========== Buttons (§6.2) ========== */

.btn-primary {
    background: var(--accent);
    color: #1a1108;
    font-weight: 500;
    transition: background .2s ease, transform .2s ease;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost {
    border: 1px solid var(--line);
    color: var(--fg);
    transition: border-color .2s ease, background .2s ease;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.02); }

/* ========== Hero window mockup (§6.3) ========== */

/* Window container */
.window {
    background: linear-gradient(180deg, #161513 0%, #121110 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 30px 80px -20px rgba(0,0,0,0.7),
        0 60px 120px -40px rgba(181,137,111,0.18);
}

/* Titlebar — traffic-light dots */
.traffic { width: 12px; height: 12px; border-radius: 50%; }
.traffic.r { background: #FF5F57; }
.traffic.y { background: #FEBC2E; }
.traffic.g { background: #28C840; }

/* Tabs */
.tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-right: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--fg-3);
}
.tab.active {
    color: var(--fg);
    background: var(--bg-2);
    border-bottom: 1px solid var(--bg-2);
    margin-bottom: -1px;
}

/* Editor body — gutter line numbers */
.gutter-num { color: #4A4742; }

/* AI panel (right side of body, slide-in via .ai-panel.in — see §7.3) */
.ai-panel {
    transform: translateX(16px);
    opacity: 0;
    transition: transform .6s ease-out, opacity .6s ease-out;
}
.ai-panel.in { transform: translateX(0); opacity: 1; }

/* Syntax highlighting */
.tk-key { color: #C9A085; }
.tk-str { color: #9EBE8F; }
.tk-num { color: #D6B07A; }
.tk-bool { color: #B79CC4; }
.tk-punct { color: #6E6862; }
.tk-comment { color: #585450; font-style: italic; }
.tk-tag { color: #C9A085; }
.tk-attr { color: #B79CC4; }

/* Hero typing animation — blinking caret (see §7.2) */
.cursor {
    display: inline-block; width: 7px; height: 1.05em;
    background: var(--accent); vertical-align: -2px;
    animation: blink 1.05s steps(2, start) infinite;
    margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Tree-sitter ripple highlight after typing (see §7.2) */
.ripple {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(181,137,111,0.18), transparent);
    transform: translateX(-100%);
}
.ripple.go { animation: ripple 1.4s ease-in-out 1; }
@keyframes ripple {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(120%); }
}

/* ========== Format tile (§6.4) ========== */

.tile {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.tile:hover {
    transform: translateY(-3px);
    border-color: rgba(181,137,111,0.45);
    box-shadow: 0 18px 40px -20px rgba(181,137,111,0.25);
    background: #100F0D;
}
.tile:hover .tile-edit { color: var(--accent); }
.tile:hover .edit-cell { animation: editpulse 1.4s ease-in-out infinite; border-radius: 3px; }
@keyframes editpulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(181,137,111,0.12); }
}

/* ========== Pricing card (§6.5) ========== */

.price-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 36px;
    background: var(--bg-2);
    position: relative;
}
.price-card.primary {
    border-color: rgba(181,137,111,0.4);
    background: linear-gradient(180deg, #14110E 0%, #100F0D 100%);
}
.price-card.primary::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: 12px; pointer-events: none;
    background: linear-gradient(180deg, rgba(181,137,111,0.25), transparent 30%);
    -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    -webkit-mask-composite: xor; mask-composite: exclude;
    padding: 1px;
}

/* ========== FAQ accordion (§6.6) ========== */

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; padding: 26px 4px; display: flex; justify-content: space-between; align-items: center; gap: 24px; transition: color .15s ease; }
.faq-q:hover { color: var(--fg); }
.faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, padding .35s ease, opacity .35s ease;
    opacity: 0;
    color: var(--fg-2);
    padding: 0 4px;
}
.faq-item.open .faq-a { max-height: 360px; opacity: 1; padding: 0 4px 26px; }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--accent); }
.faq-icon { transition: transform .25s ease, color .25s ease; color: var(--fg-3); }

/* ========== Format marquee (§6.7) ========== */

.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
    display: flex; gap: 56px; width: max-content;
    animation: scroll 38s linear infinite;
}
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
/* §7.4 hover-pause */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Format chip primitive (used in marquee and inline) */
.fmt-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fg-2);
    background: rgba(255,255,255,0.015);
}
.fmt-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ========== Footer (§6.8) ========== */

.footer-link { color: var(--fg-2); transition: color .15s; }
.footer-link:hover { color: var(--fg); }

/* ========== Reduced motion (§7.6) ========== */

/* Implements docs/design-system.md §7.6 for component-level animation.
   The .reveal primitive is handled in base.css. The JS side (hero
   typing, AI-panel timing) checks window.prefersReducedMotion (defined
   in scripts/main.js) at each animation entry point.

   Per §7.6: marquee freezes; cursor blink stops; ripple does not play;
   AI panel transition is zeroed (JS still toggles .in, but the change
   is instant); tile hover drops its lift translate (border-color and
   box-shadow color changes are retained per "color changes are kept,
   transforms are dropped"); editpulse on .edit-cell stops.

   Not neutralized — these are functional/state indicators, not
   decorative motion: FAQ accordion max-height transition; .faq-icon
   plus→x rotation; nav-shell backdrop transition (color, not motion). */
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .ai-panel { transition: none; }
    .ripple.go { animation: none; }
    .cursor { animation: none; }
    .tile:hover { transform: none; }
    .tile:hover .edit-cell { animation: none; }
}