/* Temple Night background: a fixed layer that shows behind the hero only.
   The sections below keep their own solid backgrounds and cover it. */
.temple-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* one fixed height (the tall screen, bars hidden): on phones the address bar slides in and out while
     scrolling, and a backdrop that followed it would resize and redraw every time, like a page refresh */
  bottom: auto; height: 100vh; height: 100lvh;
  background: #05070a; opacity: 0; transition: opacity .6s ease;
}
.temple-bg.is-on { opacity: 1; }
.temple-bg canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.temple-bg canvas.is-ready { opacity: 1; }
/* a dark veil so the hero text stays readable over the scene */
.temple-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,10,.55), rgba(7,7,10,.35) 40%, rgba(7,7,10,.6));
}
.hero, .site, .footer { position: relative; z-index: 1; }