@import url("/hero-variants.css");

/* Homepage concepts from Jaycee's Oct 18 sketches, at /design/concepts/.
   Phone rules first; wider screens layer on. Motion stops for reduced motion. */

/* ---------- Pipes: pipes run down the page and hook up to things. ---------- */
/* Every piece is generated art in the chosen style; see concept-pipes.js. */
.concept-pipes { position: relative; isolation: isolate; }
.pipes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pipes-run { position: absolute; inset: 0; }
.pipe-seg { position: absolute; background-repeat: repeat-y; background-position: center top; background-size: var(--w) auto; }
.pipe-seg.h { background-repeat: repeat-x; background-position: left center; background-size: auto var(--w); }
.pipe-joint { position: absolute; height: auto; }
.pipe-part { position: absolute; display: none; height: auto; }

/* ---------- Connector: cards around the copy connect into Powerplant (see concept-connector.js). ---------- */
.hero-slot-gather { display: none; }
@media (min-width: 1200px) {
  .vpage .vhero.has-slot-gather.gather-live { display: grid; grid-template-columns: minmax(0, 1fr); height: 280vh; align-items: start; gap: 0; padding-top: 0 !important; }
  .vpage .vhero.has-slot-gather.gather-live > div:first-child { grid-area: 1 / 1; position: sticky; top: 0; height: 100vh; padding-top: 250px; align-content: start; z-index: 2; pointer-events: none; }
  .vpage .vhero.has-slot-gather.gather-live > div:first-child > * { pointer-events: auto; }
  .vpage .vhero.has-slot-gather.gather-live h1:has(.l) { font-size: min(3.6rem, 100cqi * 0.5 / 9.6); }
  .vpage .vhero.has-slot-gather.gather-live .vlead { max-width: 40ch; }
  .gather-live .hero-slot-gather { display: block; grid-area: 1 / 1; position: sticky; top: 0; height: 100vh; width: 100%; max-width: none; margin: 0; z-index: 1; }
  .gather-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .gather-lines path { fill: none; stroke: var(--palette-holly-400); stroke-width: 2; stroke-dasharray: 1; stroke-linecap: round; }
  .gather-cards.feeders-pile { position: absolute; inset: 0; margin: 0; display: block; }
  .gather-cards.feeders-pile .feeder { position: absolute; left: 0; top: 0; width: 236px; margin: 0; transform-origin: center; will-change: transform; translate: none; }
  /* Only the message on each card. */
  .gather-cards .f-a, .gather-cards .flag { display: none; }
  /* The header's own yellow and orange logo, glowing yellow as the conversations arrive. */
  .gather-node { position: absolute; margin: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 999px; transition: box-shadow 0.4s ease, background-color 0.4s ease; }
  .gather-node img { display: block; height: auto; }
  .gather-node img:first-child { width: 30px; }
  .gather-node .ivory-wordmark { width: 150px; }
  :root[data-theme="dark"] .gather-node .ivory-wordmark { filter: brightness(0) invert(0.9); }
  .gather-node.is-lit { background: var(--theme-surface-raised); box-shadow: 0 0 0 calc(var(--glow, 0) * 2px) var(--palette-golden-400), 0 0 calc(var(--glow, 0) * 56px) calc(var(--glow, 0) * 12px) color-mix(in srgb, var(--palette-golden-400) 55%, transparent); }
  /* The pile, trunk and second logo would repeat the cards: the glowing logo leads straight into the buttons. */
  .vpage:has(.gather-live) #feeders, .vpage:has(.gather-live) .beams-trunk, .vpage:has(.gather-live) .mcp-node { display: none; }
}

/* Pipes: a smaller headline leaves room for the pipes beside it on desktop. */
@media (min-width: 1200px) {
  .vpage.concept-pipes .vhero.hero-stage h1:has(.l) { font-size: min(3.6rem, 100cqi * 0.55 / 9.6); }
  .vpage.concept-pipes .vhero.hero-stage .vlead { max-width: 44ch; }
}

/* Style switcher for the Pipes concept. */
body:has(.style-review) { padding-bottom: 160px; }
.nav-review.style-review { bottom: 76px; }
.style-review .nav-review-options { overflow-x: auto; scrollbar-width: none; gap: 0; }
.style-review .nav-review-options a { flex: none; min-width: 0; padding: 0 10px; font-size: 13px; white-space: nowrap; }