/* ============================================================
   Jerry Labs — Colors & Type
   Two-font system. Locked palette. Dark/light section rhythm.
   ============================================================ */

/* ---------- Web fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

/* pulsing brand period (matches the green status dots site-wide) */
@keyframes brand-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .nav-brand-name .dot { animation: none !important; } }

/* small inline icons next to footer handle/email (all pages) */
.sf-ic { display:inline-flex; width:13px; height:13px; vertical-align:middle; margin-right:8px; flex:none; }
.sf-ic svg { width:13px; height:13px; display:block; }

:root {
  /* ---------- Brand color (LOCKED) ---------- */
  --jl-green:        #00FF41;   /* matrix green — signal only, never wallpaper */
  --jl-green-dim:    #00C233;   /* hover / pressed for green elements         */
  --jl-green-glow:   rgba(0, 255, 65, 0.22);
  --jl-green-haze:   rgba(0, 255, 65, 0.08);

  /* ---------- Secondary green family (mint/emerald/spruce, hue ~166) ----------
     Sampled from the plexus orb video (2026-06-10). Matrix green = SIGNAL ONLY
     (status, cursor, CTA dots, hero, comet). This family = AMBIENT green. */
  --jl-mint:         #68D2BA;   /* accent on dark: links, kickers, hovers      */
  --jl-emerald:      #2E8B72;   /* mid tone: washes, glows, large type         */
  --jl-spruce:       #0F5848;   /* deep tint: backgrounds, graphics            */
  --jl-mint-glow:    rgba(104, 210, 186, 0.22);
  --jl-mint-haze:    rgba(46, 139, 114, 0.10);

  /* ---------- Dark surfaces (LOCKED) ---------- */
  --jl-bg:           #0A0A0A;   /* near-black, deep workshop                  */
  --jl-surface:      #0D0D0D;   /* slight separation for cards/interiors      */
  --jl-surface-2:    #121212;   /* hover lift                                 */
  --jl-hairline:     rgba(104, 210, 186, 0.20);  /* green hairline on dark       */
  --jl-rule:         rgba(255, 255, 255, 0.08);

  /* ---------- Text on dark (LOCKED) ---------- */
  --jl-fg:           #FFFFFF;
  --jl-fg-muted:     rgba(255, 255, 255, 0.62);
  --jl-fg-faint:     rgba(255, 255, 255, 0.38);

  /* ---------- Light surfaces (designer's call) ---------- */
  --jl-paper:        #F5F3ED;   /* warm off-white — the ONE light surface     */
  --jl-paper-2:      #F5F3ED;   /* legacy alias — collapsed to paper          */
  --jl-graphite:     #2A2A2A;   /* body text on light                         */
  --jl-graphite-2:   #4A4A4A;   /* secondary text on light                    */
  --jl-graphite-3:   #6E6E6E;   /* meta / captions on light                   */
  --jl-rule-light:   rgba(42, 42, 42, 0.12);

  /* ---------- Hover accent (desaturated graphite-green) ---------- */
  --jl-accent-light: #135645;   /* link / hover on light sections             */
  --jl-accent-dark:  #68D2BA;   /* tinted green for hover on dark             */

  /* ---------- Type families ---------- */
  --jl-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --jl-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---------- Type scale (1.25 — major third) ---------- */
  --jl-fs-xs:    12px;   /* eyebrow / meta / footer */
  --jl-fs-sm:    14px;   /* captions, secondary */
  --jl-fs-base:  17px;   /* body */
  --jl-fs-md:    20px;   /* lede, large body */
  --jl-fs-lg:    24px;   /* card titles */
  --jl-fs-xl:    32px;   /* section heading */
  --jl-fs-2xl:   44px;   /* page heading */
  --jl-fs-3xl:   64px;   /* hero on small / desktop H1 */
  --jl-fs-4xl:   88px;   /* hero, desktop */
  --jl-fs-5xl:  120px;   /* oversized display */

  /* ---------- Line heights ---------- */
  --jl-lh-tight:  1.05;  /* display */
  --jl-lh-snug:   1.18;  /* headings */
  --jl-lh-body:   1.55;  /* paragraphs */
  --jl-lh-loose:  1.7;   /* small caption blocks */

  /* ---------- Letter spacing ---------- */
  --jl-tracking-tight:   -0.02em;  /* display mono */
  --jl-tracking-normal:   0;
  --jl-tracking-wide:     0.02em;
  --jl-tracking-eyebrow:  0.14em;   /* mono small caps eyebrow */

  /* ---------- Weights ---------- */
  --jl-w-regular:  400;
  --jl-w-medium:   500;
  --jl-w-semi:     600;
  --jl-w-bold:     700;

  /* ---------- Spacing scale (4px base) ---------- */
  --jl-s-1:   4px;
  --jl-s-2:   8px;
  --jl-s-3:   12px;
  --jl-s-4:   16px;
  --jl-s-5:   24px;
  --jl-s-6:   32px;
  --jl-s-7:   48px;
  --jl-s-8:   64px;
  --jl-s-9:   96px;
  --jl-s-10: 128px;
  --jl-s-11: 192px;

  /* ---------- Layout ---------- */
  --jl-container:      1240px;
  --jl-container-wide: 1440px;
  --jl-gutter:         32px;

  /* ---------- Radius (small, technical) ---------- */
  --jl-r-0:  0;
  --jl-r-1:  2px;
  --jl-r-2:  4px;
  --jl-r-3:  6px;
  --jl-r-pill: 999px;

  /* ---------- Elevation — almost none. We use hairlines + glow. ---------- */
  --jl-shadow-card-dark:  0 1px 0 rgba(0, 255, 65, 0.06) inset;
  --jl-shadow-card-light: 0 1px 0 rgba(0, 0, 0, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.03);
  --jl-shadow-glow-sm:    0 0 12px rgba(0, 255, 65, 0.18);
  --jl-shadow-glow-md:    0 0 28px rgba(0, 255, 65, 0.24), 0 0 8px rgba(0, 255, 65, 0.18);
  --jl-shadow-glow-lg:    0 0 80px rgba(0, 255, 65, 0.18), 0 0 24px rgba(0, 255, 65, 0.28);

  /* ---------- Motion ---------- */
  --jl-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --jl-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --jl-ease-organic:   cubic-bezier(0.45, 0, 0.25, 1);
  --jl-t-fast:         120ms;
  --jl-t-base:         240ms;
  --jl-t-slow:         480ms;

  /* ---------- Z scale ---------- */
  --jl-z-nav:    50;
  --jl-z-modal:  100;
}

/* ============================================================
   Semantic typography roles
   ============================================================ */

/* Display — Space Mono, oversized.
   For hero headlines. Tight tracking, very tight leading. */
.jl-display,
h1.jl-display {
  font-family: var(--jl-mono);
  font-weight: var(--jl-w-medium);
  font-size: clamp(40px, 7vw, var(--jl-fs-4xl));
  line-height: var(--jl-lh-tight);
  letter-spacing: var(--jl-tracking-tight);
  text-wrap: balance;
}

/* H1 — page heading (mono) */
.jl-h1, h1 {
  font-family: var(--jl-mono);
  font-weight: var(--jl-w-medium);
  font-size: clamp(32px, 4.5vw, var(--jl-fs-2xl));
  line-height: var(--jl-lh-snug);
  letter-spacing: var(--jl-tracking-tight);
}

/* H2 — section heading (mono) */
.jl-h2, h2 {
  font-family: var(--jl-mono);
  font-weight: var(--jl-w-medium);
  font-size: clamp(26px, 3vw, var(--jl-fs-xl));
  line-height: var(--jl-lh-snug);
  letter-spacing: var(--jl-tracking-tight);
}

/* H3 — card / sub-heading (mono) */
.jl-h3, h3 {
  font-family: var(--jl-mono);
  font-weight: var(--jl-w-medium);
  font-size: var(--jl-fs-lg);
  line-height: var(--jl-lh-snug);
  letter-spacing: var(--jl-tracking-tight);
}

/* Lede — Inter, larger body */
.jl-lede {
  font-family: var(--jl-sans);
  font-weight: var(--jl-w-regular);
  font-size: var(--jl-fs-md);
  line-height: var(--jl-lh-body);
  letter-spacing: var(--jl-tracking-normal);
  text-wrap: pretty;
}

/* Body — Inter, default paragraph */
.jl-body, p {
  font-family: var(--jl-sans);
  font-weight: var(--jl-w-regular);
  font-size: var(--jl-fs-base);
  line-height: var(--jl-lh-body);
  letter-spacing: var(--jl-tracking-normal);
  text-wrap: pretty;
}

/* Small / caption */
.jl-small, small {
  font-family: var(--jl-sans);
  font-size: var(--jl-fs-sm);
  line-height: var(--jl-lh-loose);
  color: var(--jl-fg-muted);
}

/* Eyebrow — mono, uppercase, wide tracking */
.jl-eyebrow {
  font-family: var(--jl-mono);
  font-weight: var(--jl-w-medium);
  font-size: var(--jl-fs-xs);
  line-height: 1;
  letter-spacing: var(--jl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--jl-green);
}

/* Code / mono inline */
.jl-mono, code, kbd {
  font-family: var(--jl-mono);
  font-weight: var(--jl-w-regular);
  font-size: 0.95em;
  letter-spacing: 0;
}

/* Stat block — large mono numbers / labels */
.jl-stat {
  font-family: var(--jl-mono);
  font-weight: var(--jl-w-medium);
  font-size: var(--jl-fs-xl);
  line-height: 1;
  letter-spacing: var(--jl-tracking-tight);
}

/* ============================================================
   Surface themes (apply to <section> or wrappers)
   ============================================================ */

.jl-dark {
  background: var(--jl-bg);
  color: var(--jl-fg);
}
.jl-dark .jl-body,
.jl-dark p { color: var(--jl-fg-muted); }
.jl-dark .jl-lede { color: var(--jl-fg); }

.jl-light {
  background: var(--jl-paper);
  color: var(--jl-graphite);
}
.jl-light .jl-body,
.jl-light p { color: var(--jl-graphite-2); }
.jl-light .jl-lede { color: var(--jl-graphite); }
.jl-light .jl-eyebrow { color: var(--jl-accent-light); }
.jl-light .jl-h1,
.jl-light .jl-h2,
.jl-light .jl-h3 { color: var(--jl-graphite); }

/* ============================================================
   The blinking cursor — canonical brand element
   ============================================================ */

.jl-cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.1em;
  vertical-align: 0;
  margin-left: 0.1em;
  background: var(--jl-green);
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
  animation: jl-blink 1.05s steps(2, jump-none) infinite;
}
.jl-light .jl-cursor {
  background: var(--jl-accent-light);
  box-shadow: none;
}
@keyframes jl-blink {
  50% { opacity: 0; }
}

/* ============================================================
   Breathing logo — STATIC mark
   The hexagon's concentric rings create the perception of
   movement (optical illusion). The PNG itself does not animate;
   only a soft, steady phosphor glow surrounds it.
   ============================================================ */

.jl-breathe {
  filter: drop-shadow(0 0 28px var(--jl-green-glow));
}

@media (prefers-reduced-motion: reduce) {
  .jl-breathe { filter: drop-shadow(0 0 20px var(--jl-green-glow)); }
}

/* ============================================================
   Reduced motion — disable all
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .jl-cursor { animation: none; opacity: 1; }
  .jl-breathe { animation: none; }
}

/* ============================================================
   Selection + shared scroll reveal (2026-06-10)
   JS (site.js) adds .reveal only when motion is allowed, so
   no-JS and reduced-motion users always see full content.
   ============================================================ */
::selection { background: var(--jl-mint); color: #0A0A0A; }
.jl-light ::selection, .section.light ::selection { background: #135645; color: #F5F3ED; }

.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity 480ms var(--jl-ease-out), transform 480ms var(--jl-ease-out);
  animation: jl-reveal-fallback 0s 1.2s forwards;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal :is(.build-card, .tier, .usecases li, .svc-card) {
  opacity: 0; transform: translateY(14px);
  transition: opacity 550ms var(--jl-ease-out), transform 550ms var(--jl-ease-out);
  animation: jl-reveal-fallback 0s 1.4s forwards;
}
.reveal.is-visible :is(.build-card, .tier, .usecases li, .svc-card) { opacity: 1; transform: none; }
.reveal :is(.build-card, .tier, .usecases li, .svc-card):nth-child(2) { transition-delay: 70ms; }
.reveal :is(.build-card, .tier, .usecases li, .svc-card):nth-child(3) { transition-delay: 140ms; }
.reveal :is(.build-card, .tier, .usecases li, .svc-card):nth-child(4) { transition-delay: 210ms; }
@keyframes jl-reveal-fallback { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal * { opacity: 1 !important; transform: none !important; animation: none !important; }
}