/* ForgeOS Site Life — the shared layer (forgeos-life.css) applied to the signed-out site.
 *
 * The owner, 2026-09-30: "Make the entire website this way" -- catchy, light,
 * visual, beautiful. Every public page loads this after forgeos-site.css and
 * forgeos-life.css. It adds; it removes nothing a page says. Palettes come
 * from the life-p1..p8 classes on <body>, so each page has its own accent
 * while sharing one look. Motion is decoration and stops for anyone who asked
 * for less of it.
 */

/* ── Every page head: a soft aura and two drifting shapes in its accent ──── */
.page-hero { overflow-x: clip; }
.page-hero > .wrap { position: relative; }
/* On the wrap, not the section: the section's own ::before and ::after are
   its grid and aura (forgeos-site.css), and these sit among them. */
.page-hero > .wrap::after { content: ""; position: absolute; z-index: -1; right: -140px; top: -120px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pa, var(--m19-brand-500)) 40%, transparent), transparent 70%); opacity: .5; animation: sl-drift 18s ease-in-out infinite alternate; }
.page-hero > .wrap::before { content: ""; position: absolute; z-index: -1; left: -160px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pc, var(--m19-spectrum-3)) 32%, transparent), transparent 70%); opacity: .45; animation: sl-drift 22s ease-in-out infinite alternate-reverse; }
@keyframes sl-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.08); } }
.page-hero .h1, .hero .display, .close .display { text-wrap: balance; }
.page-hero .eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--pa, var(--m19-brand-500)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa, var(--m19-brand-500)) 22%, transparent); }

/* ── Cards lift a little under a pointer, everywhere they are links ─────── */
a.card, .cap, .err-links .card, .plan > div { transition: transform var(--life-d2) var(--life-ease), box-shadow var(--life-d2) var(--life-ease), border-color var(--life-d2); }
a.card:hover, .cap:hover { transform: translateY(-3px); box-shadow: var(--life-shadow-2); }

/* ── The error pages: a number with some warmth in it ───────────────────── */
.err-code { background: linear-gradient(120deg, var(--m19-brand-400), var(--pa, var(--m19-spectrum-2)) 55%, var(--m19-spectrum-3)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: sl-bob 5s ease-in-out infinite; }
@keyframes sl-bob { 50% { transform: translateY(-8px); } }
.sl-err-art { display: block; width: min(260px, 70vw); height: auto; margin: 0 0 18px; }
.sl-err-art .t-paper { fill: var(--n-200, var(--m19-surface)); }

/* ── The homepage gallery strip ─────────────────────────────────────────── */
.sl-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sl-shot { display: grid; gap: 4px; align-content: start; padding: 10px 10px 16px; border: 1px solid var(--life-line); border-radius: var(--life-r-lg); background: var(--life-surface); box-shadow: var(--life-shadow-1); transition: transform var(--life-d2) var(--life-ease), box-shadow var(--life-d2) var(--life-ease); }
.sl-shot:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--life-shadow-3); }
.sl-shot:nth-child(2) { --i: 1; } .sl-shot:nth-child(3) { --i: 2; } .sl-shot:nth-child(4) { --i: 3; }
.sl-shot:nth-child(6) { --i: 1; } .sl-shot:nth-child(7) { --i: 2; } .sl-shot:nth-child(8) { --i: 3; }
.sl-shot-art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; margin-bottom: 8px; border-radius: 12px; }
.sl-shot b { font: 640 var(--life-t-3)/1.25 var(--life-display); letter-spacing: -.015em; color: var(--life-ink); }
.sl-shot span { font: 400 var(--life-t-small)/1.45 var(--life-text); color: var(--life-ink-3); }
.sl-note { max-width: 60ch; margin: 18px auto 0; text-align: center; font-size: var(--life-t-small); color: var(--life-ink-3); }
@media (max-width: 900px) { .sl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sl-strip { gap: 10px; } .sl-shot { padding: 8px 8px 12px; } .sl-shot span { font-size: var(--life-t-micro); } }

/* ── The homepage hero demo: an ask becoming a site, on a loop ──────────── */
/* Only while forgeos-site-life.js plays it; without script, or with reduced
   motion, the finished example stands as it always has. */
.demo-run .goal .t::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: sl-caret 1s steps(1) infinite; }
.demo-run.demo-typed .goal .t::after { display: none; }
@keyframes sl-caret { 50% { opacity: 0; } }
.demo-run .path .node { transition: opacity var(--life-d2) var(--life-ease), transform var(--life-d2) var(--life-ease); }
.demo-run .path .node.is-ahead { opacity: .3; }
.demo-run .path .node.is-ahead::before { background: transparent; border-style: dashed; box-shadow: none; }
.demo-run .reply, .demo-run .app-side .evidence > div, .demo-run .app-side .preview, .demo-run .app-side .decide, .demo-run .app-top .badge { transition: opacity var(--life-d3) var(--life-ease), transform var(--life-d3) var(--life-ease); }
.demo-run:not(.demo-ready) .reply, .demo-run:not(.demo-ready) .app-side .decide, .demo-run:not(.demo-ready) .app-top .badge { opacity: 0; transform: translateY(8px); }
.demo-run:not(.demo-checked) .app-side .evidence > div { opacity: .25; }
.demo-run.demo-checked .app-side .evidence > div:nth-child(2) { transition-delay: 120ms; }
.demo-run.demo-checked .app-side .evidence > div:nth-child(3) { transition-delay: 240ms; }
.demo-run.demo-checked .app-side .evidence > div:nth-child(4) { transition-delay: 360ms; }
.demo-run:not(.demo-built) .app-side .preview { opacity: .18; filter: blur(2px); }
.demo-run.demo-built .app-side .preview { animation: sl-pop 700ms var(--life-spring) both; }
@keyframes sl-pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .page-hero > .wrap::after, .page-hero > .wrap::before, .err-code, .demo-run .goal .t::after, .sl-shot, a.card, .cap, .demo-run.demo-built .app-side .preview { animation: none !important; transition: none !important; }
}
@media print { .page-hero > .wrap::after, .page-hero > .wrap::before { display: none; } }