/*
 * ─────────────────────────────────────────────────────────────
 *  NoTell — Global cinematic background
 * ─────────────────────────────────────────────────────────────
 *  hero-face.png (background without cross) + hero-cross.png overlay:
 *
 *    .hero-bg          the artwork itself + film grain + a soft
 *                      vignette that anchors content edges
 *    .hero-bg__cross-stack  fixed-size square — cross + signals share one box
 *    .hero-bg__cross   cross artwork inside the stack (never cover-stretched)
 *    .hero-bg::before  ember glow that "breathes" (opacity/scale)
 *    .hero-bg__plasma  slow ember flow around the red network
 *    .hero-bg__flow    masked duplicate artwork, only for white-network drift
 *    .hero-bg::after   dust particles drifting slowly upward
 *    .hero-bg__cross-signals  micro light pulses along the central cross +
 *                             a barely-there breathing glow on its hub circle
 *
 *  Only transform and opacity are animated.
 *  Markup per page:
 *    <div class="hero-bg" aria-hidden="true">
 *      <span class="hero-bg__plasma"></span>
 *      <span class="hero-bg__flow"></span>
 *    </div>
 *  Link hero-bg.css on pages that use the cinematic background.
 *
 *  Tuning knobs live in :root below.
 * ─────────────────────────────────────────────────────────────
 */

:root {
  /* Overall strength of each atmosphere layer (0–1).
     Grain strength is baked into the SVG data-URI (rect opacity). */
  --atmo-glow-min: 0.5;
  --atmo-glow-max: 0.9;
  --atmo-plasma-opacity: 0.54;
  --atmo-flow-opacity: 0.26;
  --atmo-dust-opacity: 0.5;

  /* Motion — longer = calmer */
  --atmo-breathe-duration: 19s;
  --atmo-plasma-duration: 26s;
  --atmo-flow-duration: 24s;
  --atmo-dust-duration: 150s;

  /* Central cross — fixed width, true aspect ratio, hub-aligned signals */
  --hero-cross-width: 380px;
  --hero-cross-aspect: 507 / 546;
  --cross-hub-x: 49.9%;
  --cross-hub-y: 52.56%;
  --cross-breathe-duration: 10s;
  --cross-gap-x: 13.41%;
  --cross-gap-y: 12.45%;
  --cross-h-arm: 35.7%;
  --cross-v-arm-top: 39.38%;
  --cross-v-arm-bottom: 33.88%;
  --cross-glow-size: 9.2%;

  /* Atmosphere anchors — tuned for 2732×1536 upscale vs legacy 1024×576 */
  --hero-art-version: 8;
  --atmo-ember-x: 78.5%;
  --atmo-ember-y: 34%;
  --atmo-plasma-hot-x: 84.5%;
  --atmo-plasma-hot-y: 38%;
  --atmo-plasma-deep-x: 94.5%;
  --atmo-plasma-deep-y: 54%;
  --atmo-plasma-low-x: 74.5%;
  --atmo-plasma-low-y: 76%;
  --atmo-plasma-sweep: 70.5%;
  --atmo-plasma-current-x: 87.5%;
  --atmo-plasma-current-y: 54%;
  --atmo-face-mask-x: 65.5%;
  --atmo-face-mask-y: 67.5%;
  --atmo-network-mask-x: 70.5%;
  --atmo-network-mask-y: 48%;
  --atmo-filter-face: grayscale(1) contrast(1.72) brightness(1.3) saturate(0.12) blur(0.35px);
  --atmo-filter-flow-a: grayscale(1) contrast(1.78) brightness(1.38) saturate(0.14) blur(0.35px);
  --atmo-filter-flow-b: grayscale(1) contrast(1.92) brightness(1.48) saturate(0.18) blur(0.35px);

}

/* ── Kill any legacy full-page texture stack on html/body ── */
html {
  background-image: none !important;
  background-color: #0d0d0d !important;
}

body::before,
body::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Body must stay transparent so the fixed background shows through */
body {
  background-color: transparent;
}

/* ── Base plate: hero-face artwork + grain + gentle vignette ── */
.hero-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  -webkit-user-select: none;
  user-select: none;
  background-color: #0d0d0d;
  background-image:
    /* 1 — static film grain (blended overlay, alpha lives in the SVG);
           also dithers away the 8-bit gradient banding in the artwork */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    /* 2 — light cinematic vignette (kept soft so artwork detail survives) */
    radial-gradient(ellipse 130% 100% at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.42) 100%),
    /* 3 — the hero artwork */
    url("/visuals/hero-face.webp?v=8");
  background-size:
    160px 160px,
    100% 100%,
    cover;
  background-position:
    0 0,
    center center,
    center center;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal;
  /* Reveal shadow detail — no contrast crush, tiny brightness/saturation lift */
  filter: saturate(1.04) brightness(1.04);
}

.hero-bg__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.hero-bg--webgl .hero-bg__canvas {
  opacity: 1;
}

/* WebGL active — canvas draws the art; keep grain + vignette underneath */
.hero-bg--webgl {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 130% 100% at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.42) 100%);
  background-size:
    160px 160px,
    100% 100%;
  background-position:
    0 0,
    center center;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
}

/* Ultrawide: fade canvas edges to black — seams disappear into #0d0d0d */
@media (min-aspect-ratio: 17/10) {
  .hero-bg--webgl .hero-bg__canvas {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 20px,
      #000 calc(100% - 20px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 20px,
      #000 calc(100% - 20px),
      transparent 100%
    );
  }

  .hero-bg:not(.hero-bg--webgl) {
    box-shadow:
      inset 20px 0 28px -12px #0d0d0d,
      inset -20px 0 28px -12px #0d0d0d;
  }
}

/* ── Fixed-size cross stack — transparent art + hub-locked animation ── */
.hero-bg__cross-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(var(--hero-cross-width), 84vw);
  aspect-ratio: var(--hero-cross-aspect);
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  background: transparent;
}

.hero-bg__cross {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Breathing ember glow — a soft moving light over the artwork ── */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 1;
  background-image:
    radial-gradient(ellipse 36% 42% at var(--atmo-ember-x) var(--atmo-ember-y), rgba(210, 55, 32, 0.09) 0%, transparent 66%);
  mix-blend-mode: screen;
  opacity: var(--atmo-glow-min);
  animation: nt-ember-breathe var(--atmo-breathe-duration) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Shared animated atmosphere layers. They preserve the base art underneath. */
.hero-bg__plasma,
.hero-bg__flow {
  position: absolute;
  display: block;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

/* ── Ember plasma — low-frequency glow that makes the red network breathe ── */
.hero-bg__plasma {
  inset: -18%;
  z-index: 2;
  background-image:
    radial-gradient(ellipse 34% 54% at var(--atmo-plasma-hot-x) var(--atmo-plasma-hot-y), rgba(226, 72, 31, 0.34) 0%, transparent 64%),
    radial-gradient(ellipse 44% 66% at var(--atmo-plasma-deep-x) var(--atmo-plasma-deep-y), rgba(140, 26, 10, 0.38) 0%, transparent 68%),
    radial-gradient(ellipse 28% 44% at var(--atmo-plasma-low-x) var(--atmo-plasma-low-y), rgba(210, 55, 32, 0.24) 0%, transparent 72%),
    linear-gradient(96deg, transparent 48%, rgba(226, 72, 31, 0.14) var(--atmo-plasma-sweep), transparent 100%);
  background-size:
    118% 118%,
    132% 132%,
    110% 110%,
    180% 100%;
  background-position:
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%;
  mix-blend-mode: screen;
  opacity: var(--atmo-plasma-opacity);
  animation: nt-plasma-flow var(--atmo-plasma-duration) linear infinite;
  will-change: transform, opacity;
}

.hero-bg__plasma::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(104deg, transparent 56%, rgba(226, 72, 31, 0.18) 68%, transparent 82%),
    radial-gradient(ellipse 18% 48% at var(--atmo-plasma-current-x) var(--atmo-plasma-current-y), rgba(226, 72, 31, 0.26) 0%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: nt-red-current 24s ease-in-out infinite;
  will-change: transform, opacity;
}

.hero-bg__plasma::after {
  content: "";
  position: absolute;
  inset: -3%;
  background-image: url("/visuals/hero-face.png?v=7");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: var(--atmo-filter-face);
  mix-blend-mode: screen;
  opacity: 0.34;
  -webkit-mask-image:
    radial-gradient(ellipse 23% 30% at var(--atmo-face-mask-x) var(--atmo-face-mask-y), rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 46%, transparent 78%),
    linear-gradient(90deg, transparent 0 51%, #000 58% 78%, transparent 88% 100%);
  mask-image:
    radial-gradient(ellipse 23% 30% at var(--atmo-face-mask-x) var(--atmo-face-mask-y), rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 46%, transparent 78%),
    linear-gradient(90deg, transparent 0 51%, #000 58% 78%, transparent 88% 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: nt-lower-face-flow 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* ── Split network drift — left side moves left, right side moves right ── */
.hero-bg__flow {
  inset: -5%;
  z-index: 3;
  overflow: hidden;
}

.hero-bg__flow::before {
  content: "";
  position: absolute;
  inset: -3%;
  background-image: url("/visuals/hero-face.png?v=7");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: var(--atmo-filter-flow-a);
  mix-blend-mode: screen;
  opacity: var(--atmo-flow-opacity);
  -webkit-mask-image:
    radial-gradient(ellipse 24% 50% at var(--atmo-network-mask-x) var(--atmo-network-mask-y), transparent 0 31%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.78) 68%, #000 100%),
    linear-gradient(90deg, transparent 0 55%, #000 63% 75%, transparent 84% 100%);
  mask-image:
    radial-gradient(ellipse 24% 50% at var(--atmo-network-mask-x) var(--atmo-network-mask-y), transparent 0 31%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.78) 68%, #000 100%),
    linear-gradient(90deg, transparent 0 55%, #000 63% 75%, transparent 84% 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: nt-network-left var(--atmo-flow-duration) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.hero-bg__flow::after {
  content: "";
  position: absolute;
  inset: -3%;
  background-image: url("/visuals/hero-face.png?v=7");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: var(--atmo-filter-flow-b);
  mix-blend-mode: screen;
  opacity: 0.24;
  -webkit-mask-image:
    radial-gradient(ellipse 24% 50% at var(--atmo-network-mask-x) var(--atmo-network-mask-y), transparent 0 31%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.82) 68%, #000 100%),
    linear-gradient(90deg, transparent 0 67%, #000 75% 100%);
  mask-image:
    radial-gradient(ellipse 24% 50% at var(--atmo-network-mask-x) var(--atmo-network-mask-y), transparent 0 31%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.82) 68%, #000 100%),
    linear-gradient(90deg, transparent 0 67%, #000 75% 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: nt-network-right var(--atmo-flow-duration) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes nt-ember-breathe {
  from {
    opacity: var(--atmo-glow-min);
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: var(--atmo-glow-max);
    transform: translate3d(-1.6%, 1.2%, 0) scale(1.05);
  }
}

@keyframes nt-plasma-flow {
  0% {
    opacity: 0.44;
    transform: translate3d(0, 0, 0) scale(1);
  }
  35% {
    opacity: var(--atmo-plasma-opacity);
    transform: translate3d(-1.8%, 1.1%, 0) scale(1.055);
  }
  70% {
    opacity: 0.38;
    transform: translate3d(1.2%, -0.8%, 0) scale(1.085);
  }
  100% {
    opacity: 0.44;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes nt-red-current {
  0% {
    opacity: 0.54;
    transform: translate3d(1.4%, 0, 0) scale(1.02);
  }
  48% {
    opacity: 0.9;
    transform: translate3d(-1.8%, 0.8%, 0) scale(1.08);
  }
  100% {
    opacity: 0.54;
    transform: translate3d(1.4%, 0, 0) scale(1.02);
  }
}

@keyframes nt-lower-face-flow {
  0% {
    opacity: 0.28;
    transform: translate3d(0.9%, -0.75%, 0) scale(1.014) rotate(0.1deg);
  }
  100% {
    opacity: 0.34;
    transform: translate3d(-3.15%, 1.95%, 0) scale(1.058) rotate(-0.26deg);
  }
}

@keyframes nt-network-left {
  0% {
    opacity: 0.2;
    transform: translate3d(0.5%, -0.1%, 0) scale(1.014) rotate(0.04deg);
  }
  100% {
    opacity: var(--atmo-flow-opacity);
    transform: translate3d(-3.35%, -0.85%, 0) scale(1.05) rotate(-0.22deg);
  }
}

@keyframes nt-network-right {
  0% {
    opacity: 0.18;
    transform: translate3d(-0.45%, -0.05%, 0) scale(1.014) rotate(-0.04deg);
  }
  100% {
    opacity: 0.24;
    transform: translate3d(3.55%, 0.75%, 0) scale(1.052) rotate(0.22deg);
  }
}

/*
 * ── Dust motes drifting upward ──
 * One dot per gradient, tiled. Tile heights (480/240/160) all divide the
 * 480px travel distance, so the loop wraps with no visible seam.
 * The layer is 480px taller than the viewport to cover the travel.
 */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0 0 -480px 0;
  z-index: 4;
  background-image:
    radial-gradient(circle 1.4px at 30px 42px, rgba(240, 237, 232, 0.5) 0 40%, transparent 100%),
    radial-gradient(circle 1.2px at 396px 218px, rgba(240, 237, 232, 0.42) 0 40%, transparent 100%),
    radial-gradient(circle 1.2px at 178px 348px, rgba(226, 72, 31, 0.38) 0 40%, transparent 100%),
    radial-gradient(circle 1px at 66px 134px, rgba(240, 237, 232, 0.3) 0 40%, transparent 100%),
    radial-gradient(circle 0.9px at 198px 38px, rgba(240, 237, 232, 0.24) 0 40%, transparent 100%),
    radial-gradient(circle 0.8px at 42px 74px, rgba(240, 237, 232, 0.18) 0 40%, transparent 100%);
  background-size:
    480px 480px,
    480px 480px,
    480px 480px,
    240px 240px,
    240px 240px,
    160px 160px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  opacity: var(--atmo-dust-opacity);
  /* Keep the central cross and empty background completely static. */
  animation: none;
  will-change: transform, opacity;
}

@keyframes nt-dust-rise {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -480px, 0);
  }
}

/*
 * ── Central cross — ambient signal pulses + hub glow ──
 * Overlay only; the artwork cross stays untouched.
 * Pulses are scheduled in /js/hero-cross-signals.js for irregular timing.
 */
.hero-bg__cross-signals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.cross-signals__glow {
  position: absolute;
  left: var(--cross-hub-x);
  top: var(--cross-hub-y);
  width: var(--cross-glow-size);
  height: var(--cross-glow-size);
  transform: translate3d(-50%, -50%, 0) scale(0.98);
  animation: cross-signal-breathe var(--cross-breathe-duration) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.cross-signals__glow-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity var(--glow-shift-duration, 6s) ease-in-out;
}

.cross-signals__glow-layer--white {
  background:
    radial-gradient(circle, rgba(240, 237, 232, 0.18) 0%, rgba(240, 237, 232, 0.04) 42%, transparent 72%);
  opacity: 1;
}

.cross-signals__glow-layer--ember {
  background:
    radial-gradient(circle, rgba(226, 72, 31, 0.17) 0%, rgba(210, 55, 32, 0.07) 44%, transparent 72%);
  opacity: 0;
}

.cross-signals__glow.is-ember .cross-signals__glow-layer--white {
  opacity: 0.4;
}

.cross-signals__glow.is-ember .cross-signals__glow-layer--ember {
  opacity: 0.9;
}

.cross-signals__track {
  position: absolute;
  overflow: visible;
}

.cross-signals__track--h-left {
  top: var(--cross-hub-y);
  right: calc(100% - var(--cross-hub-x) + var(--cross-gap-x));
  width: var(--cross-h-arm);
  height: 2px;
  transform: translate3d(0, -50%, 0);
}

.cross-signals__track--h-right {
  top: var(--cross-hub-y);
  left: calc(var(--cross-hub-x) + var(--cross-gap-x));
  width: var(--cross-h-arm);
  height: 2px;
  transform: translate3d(0, -50%, 0);
}

.cross-signals__track--v-top {
  left: var(--cross-hub-x);
  bottom: calc(100% - var(--cross-hub-y) + var(--cross-gap-y));
  width: 2px;
  height: var(--cross-v-arm-top);
  transform: translate3d(-50%, 0, 0);
}

.cross-signals__track--v-bottom {
  left: var(--cross-hub-x);
  top: calc(var(--cross-hub-y) + var(--cross-gap-y));
  width: 2px;
  height: var(--cross-v-arm-bottom);
  transform: translate3d(-50%, 0, 0);
}

.cross-signals__pulse {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(0.35px);
}

.cross-signals__pulse--h {
  top: 50%;
  left: 0;
  width: 18%;
  height: 2px;
  transform: translate3d(0, -50%, 0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--pulse-color, rgba(240, 237, 232, 0.65)) 48%,
    transparent 100%
  );
  box-shadow: 0 0 5px 0 var(--pulse-shadow, rgba(240, 237, 232, 0.24));
}

.cross-signals__pulse--v {
  top: 0;
  left: 50%;
  width: 2px;
  height: 18%;
  transform: translate3d(-50%, 0, 0);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--pulse-color, rgba(240, 237, 232, 0.65)) 48%,
    transparent 100%
  );
  box-shadow: 0 0 5px 0 var(--pulse-shadow, rgba(240, 237, 232, 0.24));
}

.cross-signals__pulse.is-running--h {
  animation: cross-signal-run-h var(--pulse-duration, 2s) cubic-bezier(0.42, 0, 0.18, 1) forwards;
  will-change: left, opacity;
}

.cross-signals__pulse.is-running--v {
  animation: cross-signal-run-v var(--pulse-duration, 2s) cubic-bezier(0.42, 0, 0.18, 1) forwards;
  will-change: top, opacity;
}

@keyframes cross-signal-breathe {
  from {
    opacity: 0.36;
    transform: translate3d(-50%, -50%, 0) scale(0.96);
  }
  to {
    opacity: 0.62;
    transform: translate3d(-50%, -50%, 0) scale(1.04);
  }
}

@keyframes cross-signal-run-h {
  0% {
    left: var(--from, 0%);
    opacity: 0;
  }
  14% {
    opacity: var(--peak, 0.34);
  }
  62% {
    opacity: calc(var(--peak, 0.34) * 0.5);
  }
  88% {
    opacity: calc(var(--peak, 0.34) * 0.08);
  }
  100% {
    left: var(--to, 78%);
    opacity: 0;
  }
}

@keyframes cross-signal-run-v {
  0% {
    top: var(--from, 0%);
    opacity: 0;
  }
  14% {
    opacity: var(--peak, 0.34);
  }
  62% {
    opacity: calc(var(--peak, 0.34) * 0.5);
  }
  88% {
    opacity: calc(var(--peak, 0.34) * 0.08);
  }
  100% {
    top: var(--to, 78%);
    opacity: 0;
  }
}

/* ── Mobile: crop HUD clutter, darken behind content, calmer particles ── */
@media (max-width: 760px) {
  .hero-bg {
    background-position:
      0 0,
      center center,
      84% 40%;
    background-size:
      160px 160px,
      100% 100%,
      cover;
  }

  .hero-bg::before {
    opacity: 0.92;
    background-image:
      radial-gradient(ellipse 118% 88% at 50% 42%, rgba(13, 13, 13, 0.42) 0%, rgba(13, 13, 13, 0.78) 52%, rgba(13, 13, 13, 0.94) 100%),
      radial-gradient(ellipse 36% 42% at var(--atmo-ember-x) var(--atmo-ember-y), rgba(210, 55, 32, 0.08) 0%, transparent 66%);
    animation: none;
  }

  .hero-bg__cross-signals {
    display: none;
  }

  .hero-bg__plasma {
    opacity: 0.34;
    animation: none;
  }

  .hero-bg__plasma::before,
  .hero-bg__plasma::after {
    animation: none;
  }

  .hero-bg__plasma::after {
    background-position: 84% 40%;
    opacity: 0.26;
    -webkit-mask-image:
      radial-gradient(ellipse 29% 34% at var(--atmo-face-mask-x) var(--atmo-face-mask-y), rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.7) 46%, transparent 80%),
      linear-gradient(90deg, transparent 0 42%, #000 54% 80%, transparent 92% 100%);
    mask-image:
      radial-gradient(ellipse 29% 34% at var(--atmo-face-mask-x) var(--atmo-face-mask-y), rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.7) 46%, transparent 80%),
      linear-gradient(90deg, transparent 0 42%, #000 54% 80%, transparent 92% 100%);
  }

  .hero-bg__flow::before,
  .hero-bg__flow::after {
    background-position: 84% 40%;
    animation: none;
  }

  .hero-bg__flow::before {
    opacity: 0.12;
    -webkit-mask-image:
      radial-gradient(ellipse 33% 56% at var(--atmo-network-mask-x) var(--atmo-network-mask-y), transparent 0 35%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.76) 78%, #000 100%),
      linear-gradient(90deg, transparent 0 46%, #000 56% 73%, transparent 84% 100%);
    mask-image:
      radial-gradient(ellipse 33% 56% at var(--atmo-network-mask-x) var(--atmo-network-mask-y), transparent 0 35%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.76) 78%, #000 100%),
      linear-gradient(90deg, transparent 0 46%, #000 56% 73%, transparent 84% 100%);
  }

  .hero-bg__flow::after {
    opacity: 0.08;
  }

  .hero-bg::after {
    opacity: 0.22;
  }

  .hero-bg__canvas {
    display: none;
  }
}

/* ── Accessibility: freeze all ambient motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before,
  .hero-bg__plasma,
  .hero-bg__plasma::before,
  .hero-bg__plasma::after,
  .hero-bg__flow,
  .hero-bg__flow::before,
  .hero-bg__flow::after,
  .hero-bg::after,
  .hero-bg__cross-signals,
  .cross-signals__glow,
  .cross-signals__glow-layer,
  .cross-signals__pulse {
    animation: none !important;
  }

  .hero-bg__cross-signals {
    display: none;
  }

  .hero-bg::before {
    opacity: 0.7;
  }

  .hero-bg__plasma {
    opacity: 0.26;
  }

  .hero-bg__flow::before {
    opacity: 0.1;
    filter: grayscale(1) contrast(1.65) brightness(1.25) saturate(0.15);
  }

  .hero-bg__flow::after {
    opacity: 0.09;
    filter: grayscale(1) contrast(1.7) brightness(1.28) saturate(0.15);
  }

  .hero-bg__plasma::before {
    opacity: 0.22;
  }

  .hero-bg__plasma::after {
    opacity: 0.1;
  }
}