/* =============================================================================
   Synapse HOME — the institute front page.

   Layered on top of site.css. Everything here is scoped to the home page's own
   sections so it cannot leak into the library, an item page or a deck.

   Colours come from the site tokens, never hard-coded, so the page follows the
   theme rather than fighting it.
   ========================================================================== */

/* ----------------------------------------------------------------- nav ----
   Everywhere else the header is a solid white bar with a rule under it. On the
   home page that bar sat on top of the hero's colour wash rather than belonging
   to it, and the seam was the first thing you saw. Here the header is lifted out
   of flow and left transparent, so the hero runs the full height of the window
   behind it; once you scroll off the hero it takes its usual solid treatment
   back, because over body copy it needs the contrast.
   ------------------------------------------------------------------------- */
.nav-home {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav-home.stuck {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
/* the hero now starts under the header, so it carries the header's height */
.hero-x.hero-home { padding-top: calc(104px + var(--nav-h) + env(safe-area-inset-top, 0px)); }

/* ---------------------------------------------------------------- hero ---- */
.hero-x { position: relative; padding: 104px 0 78px; overflow: hidden; isolation: isolate; }

/* Two soft light sources behind the type. Sized in vmax so they scale with the
   viewport instead of becoming a hard disc on a wide screen. */
.hero-x::before,
.hero-x::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(90px); opacity: .5; pointer-events: none;
}
.hero-x::before { width: 62vmax; height: 62vmax; top: -34vmax; left: -18vmax;
  background: radial-gradient(circle, var(--violet), transparent 62%); }
.hero-x::after  { width: 52vmax; height: 52vmax; top: -18vmax; right: -22vmax;
  background: radial-gradient(circle, var(--cyan), transparent 62%); opacity: .38; }

/* The network canvas is positioned, so at z-index 0 it painted above the hero's
   in-flow text — lines ran straight through the headline. It belongs with the
   glows, behind everything, and .hero-x's isolation keeps it there. */
.hero-x #neural-bg { z-index: -1; }

.hero-x .rule { width: 54px; height: 3px; border-radius: 3px; background: var(--grad);
  margin: 0 0 22px; }
.hero-x .kicker { display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px; }
.hero-x .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

.hero-x h1 { font-family: var(--display); font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.035em; margin: 0 0 24px; max-width: 16ch; }
.hero-x h1 .soft { color: var(--muted); }
.hero-x .lead { font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.55;
  color: var(--muted); max-width: 58ch; margin: 0 0 34px; }
.hero-x .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 64px; }

/* the figures sit on a rule, like a masthead */
.hero-x .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px; border-top: 1px solid var(--border); padding-top: 26px; }
.hero-x .figures .f .n { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.hero-x .figures .f .l { font-size: .78rem; color: var(--faint); margin-top: 8px;
  letter-spacing: .02em; }

/* ------------------------------------------------------------- strands ---- */
/* One row, always. Five equal columns rather than auto-fit, so the strands read
   as a single band across the page instead of reflowing into a ragged grid —
   which means each card is small, and the copy inside it has to be short. */
.strands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.strand { display: block; color: inherit; position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px 16px;
  transition: border-color .18s, transform .18s, box-shadow .18s; }
.strand:hover { border-color: var(--border-2); transform: translateY(-2px);
  box-shadow: 0 16px 32px -24px rgba(15,25,55,.55); }
.strand .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  margin-bottom: 12px; font-size: .95rem; background: var(--grad-soft); color: var(--cyan); }
.strand h3 { font-size: .95rem; margin: 0 0 6px; letter-spacing: -.01em; }
.strand p { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 0; }
.strand .count { position: absolute; top: 15px; right: 15px; font-size: .72rem;
  font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Below about 1080px five columns stops being legible, so the row folds — but
   only then. */
@media (max-width: 1080px) { .strands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .strands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------- next ----- */
.next-list { display: flex; flex-direction: column; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.next-row { display: flex; align-items: baseline; gap: 18px; padding: 15px 20px;
  background: var(--surface); transition: background .14s; }
.next-row:hover { background: var(--bg); }
.next-row .when { flex: 0 0 118px; font-size: .8rem; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.next-row .what { flex: 1; min-width: 0; font-size: .95rem; font-weight: 500; }
.next-row .what .series { display: block; font-size: .76rem; color: var(--faint);
  font-weight: 400; margin-top: 3px; }
.next-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  align-self: center; background: var(--cyan); }
.next-empty { padding: 30px; text-align: center; color: var(--faint); font-size: .9rem;
  background: var(--surface); }

/* --------------------------------------------------------------- band ----- */
.band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-2); padding: 72px 0; }
.band .quote { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.35; letter-spacing: -.02em; max-width: 26ch; margin: 0 0 18px; }
.band .who { font-size: .85rem; color: var(--faint); }

/* Motion is opt-in: home.js adds .hx-on once GSAP is driving, so with the
   script absent the page is simply a finished page. */
.hx-on [data-hx] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .hero-x::before, .hero-x::after { animation: none !important; }
  .strand:hover { transform: none; }
}