/* Original V1 geometry is a transparent, fixed background on every Hosta page.
   Load after the page stylesheet. Insert #geometry-canvas first inside <body>. */
#geometry-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: transparent;
  opacity: var(--geometry-opacity, .48);
  /* Attenuate the content side without adding an opaque overlay. */
  -webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,.55) 38%,#000 78%);
  mask-image: linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,.55) 38%,#000 78%);
}

body.hosta-geometry > main,
body.hosta-geometry > footer,
body.hosta-geometry > [data-geometry-content] {
  position: relative;
  z-index: 1;
}

/* Hero and contact may expose more of the filaments. Override these variables
   in the site theme when a particular composition needs stronger gold. */
#geometry-canvas[data-geometry-scene="hero"] {
  opacity: var(--geometry-hero-opacity, .68);
}
#geometry-canvas[data-geometry-scene="contact"] {
  opacity: var(--geometry-contact-opacity, .58);
  -webkit-mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.6) 50%,rgba(0,0,0,.32));
  mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.6) 50%,rgba(0,0,0,.32));
}

/* Opt-in for inherited sections that previously painted an opaque background.
   Keep cards/inputs opaque when that improves legibility. */
body.hosta-geometry [data-geometry-surface="transparent"] {
  background-color: transparent;
}
body.hosta-geometry [data-geometry-surface="veil"] {
  background-color: rgba(0,0,0,.44);
}

@media (max-width: 759px) {
  #geometry-canvas {
    opacity: var(--geometry-mobile-opacity, .39);
    -webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.56) 50%,#000);
    mask-image: linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.56) 50%,#000);
  }
  #geometry-canvas[data-geometry-scene="hero"] {
    opacity: var(--geometry-hero-mobile-opacity, .57);
  }
  #geometry-canvas[data-geometry-scene="contact"] {
    opacity: var(--geometry-contact-mobile-opacity, .44);
    -webkit-mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.42));
    mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.42));
  }
}

@media print {
  #geometry-canvas { display: none; }
}