/* Decoration lives behind the page, outside the original hero. */
body.has-page-shader { isolation: isolate; }
.page-ambient {
  --content-edge: max(32px, calc((100vw - 1280px) / 2));
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='320' viewBox='0 0 256 320'%3E%3Cg fill='none' stroke='%233d6895' stroke-opacity='.25' stroke-width='1'%3E%3Cpath d='M0 62h48l30 30h70l34-34h74M0 242h72l40-40h144M32 0v28l26 26v102l-26 26v138M206 0v128l-26 26v104l26 26v36'/%3E%3C/g%3E%3Cg fill='%23142239' stroke='%23b18d43' stroke-opacity='.45'%3E%3Ccircle cx='78' cy='92' r='3'/%3E%3Ccircle cx='112' cy='202' r='3'/%3E%3Ccircle cx='180' cy='154' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#416da212 1px, transparent 1px),
    linear-gradient(90deg, #416da212 1px, transparent 1px);
  background-size: 256px 320px, 64px 64px, 64px 64px;
  /* Reveal the margins and a dim bottom glow; shield the reading column. */
  mask-image:
    linear-gradient(90deg, #000, #000 calc(var(--content-edge) * .4), transparent var(--content-edge), transparent calc(100% - var(--content-edge)), #000 calc(100% - var(--content-edge) * .4), #000),
    linear-gradient(0deg, #0004, transparent 35%);
}
.page-ambient canvas {
  display: block;
  max-width: none;
  transform-origin: top left;
  pointer-events: none;
}
.page-ambient:is([data-state="running"], [data-state="paused"]) canvas {
  transform: scale(var(--shader-scale, 1));
}
.page-ambient[data-state="running"] { opacity: .78; }
@media (max-width: 767px) {
  .page-ambient { --content-edge: 14px; }
  .page-ambient[data-state="running"] { opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  .page-ambient { display: none; transition: none; }
}

/* Local accents: transparent decoration, no brightness filter on the artwork. */
.hero-shader {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero-shader canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: top left;
  pointer-events: none;
}
.hero-shader:is([data-state="running"], [data-state="paused"]) canvas {
  transform: scale(var(--shader-scale, 1));
}
.hero-frame {
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 6px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.hero-frame[data-state="running"] { opacity: .9; }
.hero-particles {
  inset: 0 0 0 43%;
  z-index: 0;
  mask-image: radial-gradient(ellipse at 58% 54%, #000 20%, #000b 55%, transparent 78%);
}
.hero-particles[data-state="running"] { opacity: .85; }
.hero-copy { position: relative; z-index: 2; }
.hero-stamp { z-index: 2; }
@media (max-width: 600px) {
  .hero-particles { inset: 46% 0 0; }
  .hero-particles[data-state="running"] { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shader { display: none; transition: none; }
}