/* Avakode Hub: hub pages only (templates of the child theme). In 0.1: the page base, the reveal motion and the hero.
   The board (1.0), family sections and product cards (2.2) add their own blocks here or in their own files. */

body.hub-page {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--text); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.hub-page *, body.hub-page *::before, body.hub-page *::after { box-sizing: border-box; }
body.hub-page a { color: inherit; text-decoration: none; }
body.hub-page h1, body.hub-page h2, body.hub-page h3 { font-family: var(--display); font-weight: 500; margin: 0; }
body.hub-page :focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; }
.hub-main { position: relative; }
.hub-anchor { scroll-margin-top: var(--hub-bar); height: 0; }
.hub-grid { display: grid; grid-template-columns: var(--hub-gut) minmax(0, 1fr); column-gap: 24px; }

.hub-eyebrow { font: 500 11px/1.6 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--signal-hot); }

/* reveal: blocks come in on scroll (28 px, 0.9 s, the one curve); only transform and opacity move.
   Hidden only while scripts run (html.hub-js); shown at once for ?static=1, a stalled script and reduced motion. */
html.hub-js .hub-reveal { opacity: 0; transform: translateY(28px); }
html.hub-js .hub-reveal.is-visible { opacity: 1; transform: none; }
.hub-reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--hub-d, 0) * 1ms); }
html.hub-static .hub-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.hub-static .hub-cursor { animation: none; }

/* hero: type first, one violet glow, one primary button */
.hub-hero { position: relative; padding: 96px 0 88px; overflow: hidden; }
.hub-hero::before {
  content: ''; position: absolute; left: 50%; top: -10%; width: min(1100px, 150vw); height: 700px; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,92,252,.22), rgba(124,92,252,.06) 50%, transparent 72%);
}
.hub-hero .hub-grid { position: relative; }
.hub-hero__mark { display: block; width: 64px; height: 64px; margin-left: calc((var(--hub-gut) - 64px) / 2); }
.hub-hero__mark svg { display: block; width: 100%; height: 100%; }
body.hub-page .hub-hero__title {
  max-width: 12ch; margin: 16px 0 0;
  font-size: clamp(54px, 8.4vw, 124px); line-height: .94; letter-spacing: -.035em;
}
.hub-hero__lead { max-width: 54ch; margin: 24px 0 32px; color: var(--fg-2); font-size: 19px; }
.hub-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media (max-width: 960px) {
  .hub-grid { column-gap: 16px; }
  .hub-hero { padding: 56px 0 56px; }
  .hub-hero__mark { width: 28px; height: 28px; margin-left: 0; }
  .hub-hero__lead { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html.hub-js .hub-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Stand only: a product in development shown for review (inc/families.php avakode_hub_with_preview, owner 16.10) */
.hub-preview-tag {
  display: inline-block; align-self: flex-start; width: max-content; padding: 2px 8px;
  border: 1px dashed var(--signal-hot); border-radius: 4px;
  color: var(--signal-hot); font: 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}

/* the 404 (404.php): type first, the rhythm of /about/ (bar, rail gutter, one big line), pill buttons; the way out stays in the first screen */
.hub-404__sec { position: relative; padding: 112px 0 128px; overflow: hidden; } /* the glow is wider than a phone: clipped like the hero's */
.hub-404__sec::before {
  content: ''; position: absolute; left: 50%; top: -20%; width: min(900px, 140vw); height: 520px; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,92,252,.16), rgba(124,92,252,.04) 55%, transparent 74%);
}
.hub-404__sec .hub-grid { position: relative; }
body.hub-page .hub-404__title {
  max-width: 14ch; margin: 16px 0 0; overflow-wrap: break-word;
  font-size: clamp(54px, 8.4vw, 124px); line-height: .94; letter-spacing: -.035em;
}
.hub-404__lead { max-width: 54ch; margin: 28px 0 32px; color: var(--fg-2); font-size: 19px; }
.hub-404__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 960px) {
  .hub-404__sec { padding: 64px 0 80px; }
  .hub-404__lead { margin: 20px 0 28px; font-size: 17px; }
}
@media (max-width: 560px) {
  body.hub-page .hub-404__title { font-size: clamp(40px, 11vw, 54px); }
}