/* ==========================================================================
   Homepage (redesign) — themes/gk-nerd/layout/index.ejs
   Loaded only on the homepage (.page-home class on <body>).
   Mirrors the Open Design export's <style> block at
   /Users/glebkalinin/Downloads/Gleb's-portfolio-redesign/Gleb Homepage.dc.html
   ========================================================================== */

/* ---- Variable Monaspace instances: one request each covers 200-800 weight.
   The static 300/400/700 fallback webfonts were removed — the variable
   instance handles those weights via interpolation, so the ~40KB of static
   woff2s was dead weight on every cold load. */
@font-face {
  font-family: 'Monaspace Xenon VF';
  src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.101/fonts/webfonts/MonaspaceXenonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: 'Monaspace Neon VF';
  src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.101/fonts/webfonts/MonaspaceNeonVarVF%5Bwght,wdth,slnt%5D.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
}

/* ---- Base + body ---- */
.page-home {
  scroll-behavior: smooth;
}
/* `.page-home` is itself the body, not a parent of it. */
body.page-home {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Keyboard focus — explicit visible ring on every focusable surface.
   Inherits --lead which has a darker light-mode value (#9F4F38 → 5.5:1),
   so the outline passes WCAG 2.4.7 in both themes. */
.page-home :focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Transparent default for :focus (not :focus-visible) prevents the
   click-focus flash on .fx-card titles that aren't themselves links. */
.page-home :focus { outline: none; }

/* Body prose — every text block on the homepage uses the proportional
   face at normal weight so light-mode copy reads cleanly. The design's
   "tell" (Monaspace) stays on display headings, links, wordmark, and
   footer chrome. New prose blocks added to the homepage are safe by
   default as long as they inherit from body. */
.page-home p,
.page-home li,
.page-home blockquote,
.page-home dd,
.page-home figcaption,
.page-home label,
.page-home input,
.page-home button,
.page-home textarea,
.page-home address {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
}
.page-home strong,
.page-home b { font-family: inherit; font-weight: 600; }
.page-home em,
.page-home i { font-style: italic; }
.page-home a { color: var(--lead); text-decoration: none; transition: color .2s ease; }
.page-home a:hover { color: var(--fg); }
.page-home ::selection { background: var(--lead); color: var(--bg-base); }

/* ---- Typographic primitives ---- */
.page-home .vf-bloom {
  font-family: 'Monaspace Xenon VF', 'Monaspace Xenon', monospace !important;
}

/* Weight-bloom: display headings inhale from light to black as they scroll
   into the reading zone. CSS-only where supported; GSAP takes over under
   html.gsap-type (motion.js stands this down so font-variation-settings
   isn't fought over). */
@supports (animation-timeline: view()) {
  .page-home:not(.gsap-type) .vf-bloom {
    animation: wbloom linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }
  @keyframes wbloom {
    from { font-variation-settings: 'wght' 250; }
    to   { font-variation-settings: 'wght' 720; }
  }
}
/* Fallback: if GSAP times out, we still don't want a stuck mid-state */
.page-home.gsap-failed .vf-bloom {
  animation: none !important;
  font-variation-settings: 'wght' 720;
}

/* Big-type layer: display sizes scale with viewport */
.page-home .st-hero {
  font-family: 'Monaspace Xenon VF', 'Monaspace Xenon', monospace !important;
  font-size: clamp(46px, 7.2vw, 100px) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.045em !important;
}
.page-home h2.vf-bloom {
  font-size: clamp(42px, 6.4vw, 92px) !important;
  line-height: 0.97 !important;
  letter-spacing: -0.04em !important;
  max-width: none !important;
}
.page-home h3.vf-bloom {
  font-size: clamp(32px, 4.5vw, 58px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.03em !important;
}

/* Hover-weight on links: the Monaspace tell (fixed advance widths, no shift) */
.page-home a {
  font-family: 'Monaspace Neon VF', 'Monaspace Neon', monospace;
  font-variation-settings: 'wght' 400, 'slnt' 0;
  transition: font-variation-settings .25s var(--ease-soft), color .2s ease, border-color .2s ease, background .2s ease;
}
.page-home a:hover { font-variation-settings: 'wght' 620, 'slnt' -6; }

/* ---- Hover grammar (fine-pointer + motion-OK only) ---- */
@media (hover: hover) and (pointer: fine) {
  /* Nav links: underline draws left→right with the sharp expo settle */
  .page-home nav a { position: relative; }
  .page-home nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
    background: var(--lead); transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease-snap);
  }
  .page-home nav a:hover::after { transform: scaleX(1); }

  /* CTA buttons: spring lift, press-down on click */
  .page-home .cta-primary,
  .page-home .cta-ghost {
    transition: transform .3s var(--ease-spring), background .2s ease,
                color .2s ease, border-color .2s ease,
                font-variation-settings .25s var(--ease-soft);
  }
  .page-home .cta-primary:hover { transform: translateY(-3px) scale(1.02); background: var(--fg); }
  .page-home .cta-ghost:hover { transform: translateY(-3px) scale(1.02); border-color: var(--lead); color: var(--lead); }
  .page-home .cta-primary:active,
  .page-home .cta-ghost:active { transform: translateY(1px) scale(0.99); transition-duration: .08s; }

  /* Lab/community cards: spring lift + accent border; title drift wider.
     will-change is applied only on hover (or just before) so the GPU layer
     isn't allocated for the 18 cards that never get hovered at once. */
  .page-home .fx-card {
    transition: transform .38s var(--ease-spring), border-color .25s ease,
                box-shadow .38s var(--ease-snap), color .2s ease;
  }
  .page-home .fx-card:hover {
    will-change: transform;
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--lead) 35%, transparent);
  }
  .page-home .fx-card h3, .page-home .fx-card strong {
    transition: letter-spacing .42s var(--ease-soft), color .2s ease;
  }
  .page-home .fx-card:hover h3, .page-home .fx-card:hover strong {
    letter-spacing: .02em; color: var(--lead);
  }

  /* Chapter image cards: CSS zooms the art inside (GSAP tilts the card) */
  .page-home .ch-card { will-change: transform; transform-style: preserve-3d; }
  .page-home .ch-card img {
    transition: transform 1.1s var(--ease-snap), filter .5s ease;
    will-change: transform;
  }
  .page-home .ch-card:hover img { transform: scale(1.045); filter: saturate(1.12) brightness(1.05); }

  /* Method steps: whole row eases right, marker fires accent */
  .page-home .fx-step { transition: transform .35s var(--ease-spring); }
  .page-home .fx-step:hover { transform: translateX(8px); }

  /* Community cards: lift + accent border */
  .page-home .community-card {
    transition: transform .38s var(--ease-spring), border-color .25s ease,
                color .2s ease;
  }
  .page-home .community-card:hover {
    transform: translateY(-5px);
    border-color: var(--lead);
  }
}

/* ---- Scroll-tempo word reveal ---- */
.page-home .tempo .w {
  display: inline-block; opacity: 0;
  transform: translateY(.36em) scale(.96);
  transition: opacity .5s var(--ease-soft), transform .6s var(--ease-soft);
}
.page-home .tempo .w.on { opacity: 1; transform: none; }

/* Chapter accent rule */
.page-home .ch-rule {
  display: block; width: 56px; height: 2px; margin: 0 0 24px;
  background: var(--lead); transform-origin: left center;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.page-home .home-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Nav ---- */
.page-home .home-nav {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1040px; margin: 0 auto;
  padding: 28px 32px; font-size: 13px;
}
.page-home .home-nav .wordmark {
  color: var(--fg);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em;
}
.page-home .home-nav .nav-links { display: flex; gap: 28px; flex-wrap: wrap; }
.page-home .home-nav .nav-links a { color: var(--muted); }
.page-home .home-nav .nav-links a:hover { color: var(--fg); }

/* ---- Hero ---- */
.page-home .home-hero {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 96px 32px 88px;
  min-height: 620px;
  display: flex; align-items: center;
  overflow: visible;
}
.page-home .hero-copy {
  position: relative; z-index: 1;
  max-width: 900px;
}
.page-home .hero-copy h1 {
  margin: 0 0 32px;
  text-wrap: balance;
}
.page-home .hero-copy p {
  font-size: 18px; line-height: 1.65; color: var(--fg); opacity: 0.85;
  font-weight: 350;
  margin: 0 0 18px; max-width: 580px; text-wrap: pretty;
}
.page-home .hero-copy p + p { margin-bottom: 40px; }
.page-home .hero-actions {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.page-home .cta-primary {
  display: inline-block; background: var(--lead); color: var(--bg-base);
  font-size: 14px; font-weight: 500;
  padding: 14px 26px; border-radius: var(--radius-md);
}
.page-home .cta-ghost {
  display: inline-block; color: var(--fg); font-size: 14px; font-weight: 500;
  padding: 14px 26px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.page-home .hero-visual {
  position: absolute; z-index: 0;
  top: 0; right: -80px; bottom: 0;
  width: 62%; min-width: 420px;
}
.page-home .hero-visual .vault-graph-container {
  position: absolute; inset: 0; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.page-home .hero-visual .hero-caption {
  position: absolute; bottom: 24px; right: 96px;
  font-size: 11px; color: var(--fg); opacity: 0.7; letter-spacing: 0.04em;
  font-weight: 500; margin: 0;
  pointer-events: none; z-index: 2;
}

/* ---- Section header (story / workbench / labs / community intro) ---- */
.page-home .section-intro {
  max-width: 760px;
  margin: 0 0 88px;
  border-top: 1px solid var(--border-soft);
  padding-top: 40px;
}
.page-home .section-intro h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 30px);
  margin: 0 0 20px; letter-spacing: -0.01em;
}
.page-home .section-intro p {
  font-size: 17px; line-height: 1.7; color: var(--muted);
  margin: 0; text-wrap: pretty;
}

/* ---- Chapters ---- */
.page-home .story {
  max-width: 1040px; margin: 0 auto;
  padding: 24px 32px 40px;
}
.page-home .ch-block {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 56px; align-items: start;
}
.page-home .ch-text h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2;
  margin: 0 0 20px; letter-spacing: -0.01em; text-wrap: balance;
}
.page-home .ch-text .ch-fict {
  font-size: 16px; line-height: 1.7; color: var(--fg); opacity: 0.78;
  margin: 0 0 16px; text-wrap: pretty;
}
.page-home .ch-text .ch-fict + .ch-fict { margin-bottom: 28px; }
.page-home .ch-text .ch-real {
  font-size: 15px; line-height: 1.7; color: var(--fg); opacity: 0.88;
  margin: 0; border-top: 2px solid var(--lead);
  padding-top: 20px; text-wrap: pretty;
}
.page-home .ch-text .ch-real strong {
  color: var(--lead); font-weight: 600;
}

.page-home .ch-card { position: sticky; top: 32px; }
.page-home .ch-card .card-frame {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.page-home .ch-card .card-image {
  height: 260px;
  background: var(--bg-base);
  overflow: hidden;
}
.page-home .ch-card .card-image img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-home .ch-card .card-body { padding: 22px 24px; }
.page-home .ch-card .card-body .project {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; margin: 0; color: var(--fg);
}
.page-home .ch-card .card-body .tagline {
  font-size: 14px; line-height: 1.6; color: var(--muted);
  margin: 8px 0 16px;
}
.page-home .ch-card .card-body .ch-link {
  font-size: 13px;
}

.page-home .ch-divider {
  display: flex; justify-content: center;
  padding: 60px 0;
}
.page-home .ch-divider span {
  color: color-mix(in srgb, var(--muted) 50%, transparent);
  letter-spacing: 0.5em;
}

/* ---- Workbench + Labs card grid ---- */
.page-home .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.page-home .fx-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.page-home .fx-card .kind {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lead); margin: 0;
}
.page-home .fx-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; margin: 0;
}
.page-home .fx-card p.desc {
  font-size: 14px; line-height: 1.65; color: var(--muted);
  margin: 0; flex: 1; text-wrap: pretty;
}
.page-home .fx-card .meta {
  font-size: 12px; color: var(--muted); margin: 0;
}
.page-home .fx-card .lab-link {
  font-size: 13px;
}

/* ---- Method ---- */
.page-home .method {
  background: color-mix(in srgb, var(--surface) 60%, var(--bg-base));
  border-top: 1px solid var(--border-soft);
  padding: 96px 32px;
}
.page-home .method h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 34px); line-height: 1.15;
  margin: 0 0 20px; max-width: 680px;
  letter-spacing: -0.015em; text-wrap: balance;
}
.page-home .method .lede {
  font-size: 17px; line-height: 1.7;
  color: var(--muted); max-width: 580px;
  margin: 0 0 64px; text-wrap: pretty;
}
.page-home .fx-step {
  border-top: 2px solid var(--lead);
  padding-top: 24px;
}
.page-home .fx-step h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; margin: 0 0 12px;
}
.page-home .fx-step p {
  font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0;
}

/* ---- Timeline ---- */
.page-home .timeline {
  max-width: 760px; margin: 0 auto;
  padding: 96px 32px;
}
.page-home .timeline h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 30px); line-height: 1.2;
  margin: 0 0 20px; letter-spacing: -0.01em; text-wrap: balance;
}
.page-home .timeline .lede {
  font-size: 16px; line-height: 1.7; color: var(--muted);
  margin: 0 0 48px; text-wrap: pretty;
}
.page-home .fx-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
}
.page-home .fx-row .when {
  font-size: 13px; color: var(--lead); margin: 0;
}
.page-home .fx-row .what-note {
  font-size: 15px; line-height: 1.65; color: var(--muted);
  margin: 0; text-wrap: pretty;
}
.page-home .fx-row .what-note strong {
  color: var(--fg); font-weight: 400;
}

/* ---- Labs (extends .grid-3) ---- */
.page-home .labs-section { padding: 32px 32px 96px; }
.page-home .labs-section .quote {
  margin: 56px 0 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--lead);
  max-width: 720px;
}
.page-home .labs-section .quote p {
  font-size: 20px; line-height: 1.6; font-style: italic;
  color: var(--fg); margin: 0 0 12px; text-wrap: pretty;
}
.page-home .labs-section .quote cite {
  font-size: 13px; color: var(--muted); font-style: normal;
}

/* ---- Community ---- */
.page-home .community {
  background: color-mix(in srgb, var(--surface) 60%, var(--bg-base));
  border-top: 1px solid var(--border-soft);
  padding: 96px 32px;
}
.page-home .community h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 30px);
  margin: 0 0 20px; max-width: 560px;
  letter-spacing: -0.01em; text-wrap: balance;
}
.page-home .community .lede {
  font-size: 16px; line-height: 1.7; color: var(--muted);
  max-width: 580px; margin: 0 0 48px; text-wrap: pretty;
}
.page-home .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.page-home .community-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 26px;
  color: var(--fg);
}
.page-home .community-card .c-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
}
.page-home .community-card .c-desc {
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.page-home .community-card .c-size {
  font-size: 12px; color: var(--lead);
}

/* ---- Footer (the homepage footer — extends the global site-footer) ---- */
.page-home .home-footer {
  max-width: 1040px; margin: 0 auto;
  padding: 72px 32px 56px;
}
.page-home .home-footer h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15;
  margin: 0 0 20px; max-width: 640px;
  letter-spacing: -0.015em; text-wrap: balance;
}
.page-home .home-footer .lede {
  font-size: 17px; line-height: 1.7; color: var(--muted);
  max-width: 560px; margin: 0 0 36px; text-wrap: pretty;
}
.page-home .home-footer .socials {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 14px; margin-bottom: 56px;
}
.page-home .home-footer .legal {
  display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border-soft);
  padding-top: 24px;
  font-size: 12px; color: var(--muted);
}
.page-home .home-footer .legal a { color: var(--muted); }

/* ---- Humane Agentic Design ---- */
.page-home .humane-section .humane-install {
  margin: 72px 0 0;
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
}
.page-home .humane-section .humane-install h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 12px; letter-spacing: -0.01em;
}
.page-home .humane-section .humane-install > p {
  font-size: 16px; line-height: 1.65; color: var(--muted);
  margin: 0 0 24px; max-width: 560px;
}
.page-home .humane-section .install-cmds {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 28px;
}
.page-home .humane-section .install-cmd {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: 'Monaspace Neon VF', 'Monaspace Neon', monospace;
  font-size: 14px;
  color: var(--fg);
  overflow-x: auto;
  white-space: nowrap;
}
.page-home .humane-section .install-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lead);
  flex: 0 0 auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .page-home .home-hero { padding: 64px 24px 48px; min-height: 0; }
  .page-home .hero-visual { display: none; }       /* hide 3D graph on small screens */
  .page-home .ch-block { grid-template-columns: 1fr; gap: 32px; }
  .page-home .ch-card { position: static; }
  .page-home .grid-3 { grid-template-columns: 1fr; }
  .page-home .grid-2 { grid-template-columns: 1fr; }
  .page-home .method,
  .page-home .community { padding: 64px 24px; }
}

@media (max-width: 600px) {
  .page-home .home-nav { padding: 20px 24px; font-size: 12px; }
  .page-home .home-nav .nav-links { gap: 16px; }
  .page-home .home-container,
  .page-home .story,
  .page-home .labs-section,
  .page-home .home-footer { padding-left: 24px; padding-right: 24px; }
  .page-home .fx-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .page-home .fx-row .when { font-size: 12px; }
}

/* ==========================================================================
   Reduced motion — kill all transforms/animations on this page
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .page-home .vf-bloom { animation: none; }
  .page-home .tempo .w { opacity: 1 !important; transform: none !important; transition: none; }
  .page-home a { transition: none; }
  .page-home .fx-card,
  .page-home .fx-card:hover,
  .page-home .fx-step,
  .page-home .fx-step:hover,
  .page-home .cta-primary:hover,
  .page-home .cta-ghost:hover,
  .page-home .ch-card:hover img,
  .page-home .community-card,
  .page-home .community-card:hover { transform: none; transition: none; }
}