/* ── THE SACRED FORM BEHIND THE FRONT PAGE ─────────────────────────────────
   public/js/sacred.js draws it; src/routes/home.js puts the canvas first in
   <main>. The /learn globe's layering: one canvas fixed behind the page,
   between the page's black and every band's content.

   <main> is its own stacking context and paints the page's black once; the
   canvas sits one layer above that; the bands that stand on that same black
   lift their own off (they are the same black, so nothing changes with the
   form away), and the form shows through wherever the page is bare. The
   worlds and the Apps paint their own grounds over it, as they should. */
.page-home main { isolation: isolate; background: var(--black); }
.page-home main > :is(.flood, .cwall, .sonic, .dstack, .lab, .upgrade),
.page-home .sonic__canvas { background: transparent; }

/* NO HARD EDGES. The Code wall and Vibranautic fade into the page at their
   top and bottom by laying black over themselves, which laid black over the
   form too and cut it with a straight line at each boundary. On this page
   they fade their own pictures out instead (a mask), so what they fade into
   is the page — with the form on it. The same look over black. The wall's
   darkening in the middle, behind its words, stays as it was. */
.page-home .cwall__veil { background: radial-gradient(ellipse 46% 36% at 50% 50%, rgba(4, 5, 7, .82), rgba(4, 5, 7, 0) 100%); }
.page-home .cwall__stage {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .434) 20%, rgba(0, 0, 0, .434) 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .434) 20%, rgba(0, 0, 0, .434) 80%, transparent 100%);
}
.page-home .sonic__shade { display: none; }
.page-home .sonic__canvas {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, .7) 50%, #000 100%);
          mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, .7) 50%, #000 100%);
}

.sacred {
  position: fixed; left: 0; top: 0; z-index: -1;
  width: 100%;
  /* The large viewport, so a phone's collapsing toolbar never resizes it. */
  height: 100vh; height: 100lvh;
  pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
}
.sacred.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sacred { transition: none; } }