/* ============================================================
   Generative Art Pack — landing styles (warm dark, editorial)
   ============================================================ */
:root {
  --bg: #0b0a0f;
  --bg-soft: #131119;
  --fg: #f2efe9;
  --muted: #a39db0;
  --line: rgba(255, 255, 255, 0.09);
  --card: rgba(255, 255, 255, 0.025);
  --a1: #ff6b5c; --a2: #ffb347; --a3: #e85aff; --a4: #3ad6c5;
  --grad: linear-gradient(100deg, var(--a1), var(--a2) 32%, var(--a3) 68%, var(--a4));
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.nav, main, .footer { position: relative; z-index: 3; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 16px clamp(20px, 5vw, 56px);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(11, 10, 15, .6); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav__brand { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.nav__logo { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.nav__links a { color: var(--muted); font-size: .92rem; transition: color .25s; }
.nav__links a:hover { color: var(--fg); }
.nav__cta { border: 1px solid var(--line); border-radius: 100px; padding: 7px 16px; color: var(--fg) !important; }
.nav__cta:hover { border-color: var(--a3); box-shadow: 0 0 24px -8px var(--a3); }
@media (max-width: 700px) { .nav__links a:not(.nav__cta) { display: none; } }

/* ---------- Layout ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(70px, 12vh, 140px) clamp(20px, 5vw, 40px); }
.section__head { max-width: 780px; margin-bottom: clamp(34px, 6vw, 60px); }
.kicker { display: inline-block; font-family: var(--sans); font-size: .76rem; letter-spacing: 3px; text-transform: uppercase; color: var(--a2); margin-bottom: 16px; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 3.3rem); line-height: 1.04; letter-spacing: -.5px; }
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.16rem; letter-spacing: -.2px; }
h4 { font-family: var(--sans); font-weight: 600; font-size: .76rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--a4); margin-bottom: 16px; }
.lead { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.16rem); margin-top: 16px; max-width: 650px; }
.lead strong { color: var(--fg); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,10,15,.85) 0%, rgba(11,10,15,.5) 45%, rgba(11,10,15,.15) 100%); }
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.hero__eyebrow { font-family: var(--sans); font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 10vw, 7rem); line-height: .98; letter-spacing: -2px; }
.hero__title .reveal-line { display: block; }
.hero__sub { color: var(--muted); max-width: 560px; margin: 26px 0 34px; font-size: clamp(1rem, 1.8vw, 1.18rem); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll { margin-top: 56px; color: var(--muted); font-size: .76rem; letter-spacing: 1.5px; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.hero__scroll span { width: 1px; height: 34px; background: linear-gradient(var(--a3), transparent); display: inline-block; animation: sl 2s var(--ease) infinite; transform-origin: top; }
@keyframes sl { 0%,100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 500; font-size: .95rem; padding: 13px 26px; border-radius: 100px; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--grad); color: #1a1014; font-weight: 600; box-shadow: 0 10px 40px -12px var(--a3); }
.btn--ghost { border: 1px solid var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--a3); background: rgba(232, 90, 255, .08); }

/* ---------- Stats ---------- */
.stats { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.stat { background: var(--bg-soft); padding: clamp(24px, 4vw, 40px) 20px; text-align: center; }
.stat__num { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.3rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.stat__label { display: block; margin-top: 10px; color: var(--muted); font-size: .84rem; }
@media (max-width: 680px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.piece { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease); }
.piece:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.piece canvas { width: 100%; aspect-ratio: 4 / 5; display: block; background: var(--bg); }
.piece__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: .82rem; border-top: 1px solid var(--line); }
.piece__bar > span:first-child { font-family: var(--serif); font-weight: 600; }
.piece__seed { margin-left: auto; color: var(--muted); font-family: ui-monospace, monospace; font-size: .76rem; }
.piece__bar button { background: transparent; border: 1px solid var(--line); color: var(--fg); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; transition: .25s; }
.piece__bar button:hover { border-color: var(--a3); color: var(--a3); transform: rotate(90deg); }

/* ---------- Cards (agents/skills) ---------- */
.cards { display: grid; gap: 18px; }
.cards--agents { grid-template-columns: repeat(3, 1fr); }
.cards--skills { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .cards--agents { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards--agents, .cards--skills { grid-template-columns: 1fr; } }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease); }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c, var(--a3)) 16%, transparent), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c, var(--a3)) 50%, transparent); }
.card:hover::before { opacity: 1; }
.card__icon { font-size: 1.5rem; color: var(--c, var(--a3)); display: block; margin-bottom: 14px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .94rem; }
.card--skill code { display: inline-block; font-size: .95rem; color: var(--fg); background: rgba(232,90,255,.12); border: 1px solid var(--line); padding: 7px 13px; border-radius: 9px; margin-bottom: 14px; }

/* ---------- Stack ---------- */
.stack__groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .stack__groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stack__groups { grid-template-columns: 1fr; } }
.stack__group { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; }
.stack__group ul { list-style: none; }
.stack__group li { color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.stack__group li:last-child { border-bottom: none; }

/* ---------- Install ---------- */
.code-block { background: #08070b; border: 1px solid var(--line); border-radius: 16px; padding: 26px clamp(18px, 3vw, 32px); overflow-x: auto; box-shadow: 0 30px 80px -40px #000; }
.code-block pre { margin: 0; }
.code-block code { font-size: clamp(.82rem, 1.6vw, .95rem); line-height: 1.9; color: #ded9e6; white-space: pre; }
.c-comment { color: #635c70; }
.c-str { color: #ffb37e; }

/* ---------- Related ---------- */
.related__card { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(26px, 4vw, 44px); }
.related__card h3 { font-size: 1.5rem; margin: 10px 0; }
.related__card p { color: var(--muted); max-width: 560px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 40px; background: rgba(11,10,15,.6); backdrop-filter: blur(10px); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 44px clamp(20px, 5vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer__brand { font-family: var(--serif); font-weight: 600; }
.footer p { color: var(--muted); font-size: .9rem; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal-line { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal-line { opacity: 1 !important; transform: none !important; } }