/* Shared design system — Premium Dark Tech */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Base palette */
  --bg-0: #070708;
  --bg-1: #0d0d10;
  --bg-2: #131318;
  --bg-3: #1a1a20;
  --ink-0: #ffffff;
  --ink-1: rgba(255, 255, 255, 0.86);
  --ink-2: rgba(255, 255, 255, 0.58);
  --ink-3: rgba(255, 255, 255, 0.38);
  --ink-4: rgba(255, 255, 255, 0.14);
  --hair: rgba(255, 255, 255, 0.08);

  /* Accent — gradient (lime → cobalt) */
  --acc-lime: #c6ff3d;
  --acc-blue: #3b82ff;
  --acc-violet: #b794ff;
  --acc: #c6ff3d;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 16px;

  /* Type */
  --font-display: 'Instrument Serif', 'Noto Serif SC', serif;
  --font-sans: 'Inter', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-grotesk: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-zh: 'PingFang SC', 'Noto Sans SC', -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--ink-1); font-family: var(--font-sans), var(--font-zh); -webkit-font-smoothing: antialiased; }

/* ============ Glass utilities ============ */
.glass {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.08) 20%, transparent 40%, transparent 60%, rgba(255,255,255,.08) 80%, rgba(255,255,255,.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ============ Grain ============ */
/* Disabled — site no longer uses noise overlay */
.grain { display: none; }

/* ============ Neon text glow ============ */
.neon-lime { color: var(--acc-lime); text-shadow: 0 0 18px rgba(198,255,61,.45), 0 0 42px rgba(198,255,61,.18); }
.neon-blue { color: var(--acc-blue); text-shadow: 0 0 18px rgba(59,130,255,.5), 0 0 42px rgba(59,130,255,.22); }

/* ============ Scan line ============ */
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
.scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--acc-lime), transparent); opacity: .35; filter: blur(1px); animation: scan 8s linear infinite; }

/* ============ Tickers ============ */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Shimmer ============ */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg, var(--ink-1) 0%, #fff 40%, var(--acc-lime) 50%, #fff 60%, var(--ink-1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ============ Mono label ============ */
.mono-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.mono-mini { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; font: 500 13px/1 var(--font-sans); cursor: pointer; border: 1px solid var(--ink-4); background: transparent; color: var(--ink-1); transition: all .22s; }
.btn:hover { border-color: var(--ink-2); background: rgba(255,255,255,.04); }
.btn-accent { background: var(--acc-lime); color: #0a0a0a; border-color: transparent; }
.btn-accent:hover { box-shadow: 0 0 40px rgba(198,255,61,.4); transform: translateY(-1px); }

/* Hide scrollbars inside artboards & page */
::-webkit-scrollbar { width: 0; height: 0; }

/* Universal safety nets — no media queries, no breakpoints.
   - Prevent unintended horizontal scroll if something inside ever pushes
     a child beyond the viewport.
   - Inline-styled images that already have `width: 100%` stay capped to
     their container instead of overflowing on very narrow renders. */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* Cap `min-height: 100vh` sections at 1100px ON TOUCH DEVICES ONLY.
   Detection uses `pointer: coarse` (primary input is touch) AND
   `hover: none` (no hover capability) — together this matches phones
   and tablets but not laptops/desktops (even touchscreen laptops with
   a trackpad keep `pointer: fine` so this stays off).

   Why this matters: with no viewport meta, phones render at a 980px
   layout viewport where 100vh ≈ 2126 layout px ≈ 853 visible — a full
   screen of mostly empty padding around the scaled-down content. On a
   PC the section continues to fill the actual viewport (16" MBP 1117,
   etc.) — 0 loss because the rule simply does not apply. The portrait
   `min(100vh, 1100px)` still respects landscape phones where layout
   vh drops to ~452 (no cap kicks in there). */
@media (pointer: coarse) and (hover: none) {
  /* (1) inline `min-height: 100vh` — case-01 SnapshotV4 / case-02 C2Problems
        / case-04 C4Intro·Backtest·PhaseI / case-05 C5Work* / index Hero */
  [style*="min-height: 100vh"] {
    min-height: min(100vh, 1100px) !important;
  }
  /* (2) inline `height: 100vh` (without 100vh min-height) — case-02
        Case2HeroB hero uses `height: 100vh, min-height: 760`. The `:not()`
        prevents double-matching the rules above. */
  [style*="height: 100vh"]:not([style*="min-height: 100vh"]) {
    height: min(100vh, 1100px) !important;
    min-height: 0 !important;
  }
  /* (3) case-03/04/05 `.hero-section { height: 100vh }` from each html's
        inline <style> block (not in style attr, so attribute selectors
        above miss it). The inline `<style>` also sets `min-height: 820/860`
        which we leave alone — it acts as a landscape-phone safety floor. */
  .hero-section {
    height: min(100vh, 1100px) !important;
  }

  /* (4) Case-01 typewriter palette — let it break out of the narrow
        center column (~400 layout px on phone) and stay centered in
        the viewport so the typed prompt fits without wrapping. `left:
        50% + translateX(-50%)` anchors the palette to the center
        column's center, then expands symmetrically. Targeted by the
        palette's unique inline style combo so case-02's IsoStack and
        nav `.glass` pill (different border-radius) are untouched. */
  .glass[style*="border-radius: 16"] {
    width: calc(100vw - 60px) !important;
    max-width: 700px !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}