/* ============================================================
   Starving Effort — Canvas UI brass mist (staging: index3.html)

   Loaded after v2.css. Everything here is additive: remove this file and the
   link to canvasui-hero.js and the hero returns to the shipped "Living Ledger"
   treatment untouched. The photographic flower is never touched — the mist
   sits around it.
   ============================================================ */

/* ---------- Brass mist (Clouds) ---------- */

.hero__mist {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Keep the mist off the headline column. The left third stays clear so
     the type never has to fight the weather for contrast. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 34%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 34%, #000 62%);
}
.hero__mist canvas { display: block; width: 100%; height: 100%; }

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
  /* On a narrow screen the flower sits behind the type, so the mist has to
     clear out of the way entirely rather than just fade on the left. */
  .hero__mist { opacity: .5; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* canvasui-hero.js never mounts under reduced motion, so this layer should
     never exist here — belt-and-braces in case it is ever added statically. */
  .hero__mist { display: none; }
}