/* Home page only: the example and the invitation after the hero. Loaded after site.css. */

/* The fixed scene shows through on the right. The copy column keeps to the left 46% so the scene stays clear. */
body.page-home .home-example, body.page-home .home-invite { position: relative; z-index: 1; }
body.page-home .home-window { display: none; }
.example-column, .invite-column { width: min(100%, max(46%, 540px)); }

.home-example { padding-block: 88px 64px; }
.example-column .section-index { margin-bottom: 24px; }
.example-column h2 { font-size: clamp(36px, 3.8vw, 56px); line-height: 1.06; }
.example-lede { margin-top: 20px; color: var(--muted); }
.example-column .workflow-console { margin-top: 32px; }
.example-column .text-link { margin-top: 20px; color: var(--text); }

.home-invite { display: flex; flex-direction: column; justify-content: space-between; min-height: min(78svh, 720px); padding-top: 72px; }
.invite-column h2 { font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
.invite-column h2 em { font-style: italic; }
.invite-column > p { margin-top: 28px; color: var(--muted); }
.invite-column .invite-terms { margin-top: 20px; color: var(--text); }
.invite-column .invite-terms strong { font-weight: 500; }

/* The floor line of the far Gate lands here, as the threshold line does under the hero. */
.invite-rule { margin-top: 56px; height: 0; border-top: 1px solid var(--amber); box-shadow: 0 -1px 18px rgba(245, 196, 81, .2); }

/* With the scene running, one fixed canvas replaces the hero's own stage so it can follow the page. */
html[data-stage="fixed"] body.page-home .top { z-index: 3; }
html[data-stage="fixed"] .page-home .hero { overflow: visible; isolation: auto; }
html[data-stage="fixed"] .page-home #scene-stage { position: fixed; inset: 0; z-index: 0; height: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }

@media (max-width: 900px) {
  .home-example { padding-block: 44px 40px; background: linear-gradient(to right, var(--bg) 0 calc(var(--pad) + 1px), transparent calc(var(--pad) + 1px) calc(100% - var(--pad) - 1px), var(--bg) calc(100% - var(--pad) - 1px)), linear-gradient(to bottom, var(--bg) 0 var(--picture-start, 100%), transparent var(--picture-start, 100%) var(--picture-end, 100%), var(--bg) var(--picture-end, 100%) 100%); }
  .home-invite { min-height: 0; padding-block: 44px 0; background: var(--bg); }
  .example-column, .invite-column { width: auto; }
  .example-column h2 { font-size: clamp(32px, 9vw, 44px); }
  .invite-column h2 { font-size: clamp(36px, 10.4vw, 56px); }
  .invite-rule { margin-top: 40px; }

  /* Scene windows: short openings onto the fixed scene, with no copy. The hero's own band is the first of them. */
  html[data-stage="fixed"] body.page-home .home-window { display: block; position: relative; z-index: 1; height: 44svh; min-height: 280px; border-block: 1px solid rgba(245, 196, 81, .3); pointer-events: none; }
  html[data-stage="fixed"] body.page-home .home-window[data-window="hero"] { height: var(--band); min-height: 0; margin-top: 24px; border-block: 0; }
  html[data-stage="fixed"] body.page-home .home-window[data-window="hero"]::before { content: ""; position: absolute; inset: 0 0 auto; height: 14%; background: linear-gradient(180deg, var(--bg), transparent); }
  html[data-stage="fixed"] body.page-home .home-window[data-window="invite"] { height: 36svh; min-height: 240px; }
  html[data-stage="fixed"] .page-home .hero > .wrap { width: 100%; padding: 0 var(--pad) 8px; background: radial-gradient(90% 70% at 90% 0, rgba(63, 167, 166, .12), transparent 70%), var(--bg); }
  html[data-stage="fixed"] .page-home .visual-caption { background: var(--bg); }

  /* The review console is opaque except for its own window onto the scene, so the decision is seen as it is made. */
  .example-column .workflow-console { background: none; }
  .example-column .workflow-console > :not(.home-window) { background: var(--surface); }
  .example-column .workflow-console > .model-bar { background: var(--raised); }
  .example-column .workflow-console > .home-window { background: none; }
  .example-column .workflow-console > .review-boundary { background: linear-gradient(120deg, rgba(125, 211, 192, .05), transparent), var(--surface); }
  .example-column .workflow-console > .switcher { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .invite-rule { box-shadow: none; }
}

@media (forced-colors: active) {
  .home-example, .home-invite { background: Canvas; }
  .invite-rule { border-top-color: CanvasText; box-shadow: none; }
}

@media print {
  body.page-home .home-window, .invite-rule { display: none !important; }
  .example-column, .invite-column { width: auto; }
  .home-example, .home-invite { min-height: 0; padding-block: 24px; }
  .invite-column h2 { font-size: 28pt; }
}