/* r15h background — one fixed full-viewport layer (no mid-scroll seams)
   Near-black ground + ONE directional soft crimson radial + vignette + grain
   NO rainbow mesh · NO multi-orb AI soup
*/
.fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Shared page canvas — continuous across hero / about / deep */
.fx--fixed {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fx-base {
  position: absolute;
  inset: 0;
  background: #050203;
}

/* ONE soft directional light — upper-left, brand crimson / blood-red */
.fx-light {
  position: absolute;
  inset: -28% -40% -50% -28%;
  background: radial-gradient(
    ellipse 122% 96% at 26% 16%,
    rgba(224, 62, 62, 0.70) 0%,
    rgba(224, 62, 62, 0.52) 20%,
    rgba(200, 36, 48, 0.36) 40%,
    rgba(120, 16, 26, 0.17) 58%,
    rgba(50, 6, 12, 0.06) 72%,
    transparent 88%
  );
}

.fx-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 84% 72% at 50% 36%, transparent 30%, rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, transparent 24%, transparent 72%, rgba(0, 0, 0, 0.32) 100%);
}

.fx-grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
}

/* Dust motes — visible slow drift (PRM disables) */
.dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.dust span {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 236, 240, 0.85);
  box-shadow: 0 0 8px 2px rgba(255, 170, 185, 0.45);
  opacity: 0.55;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.dust span:nth-child(1) {
  left: 16%;
  top: 26%;
  animation-name: dustA;
  animation-duration: 14s;
}
.dust span:nth-child(2) {
  left: 80%;
  top: 20%;
  width: 2.5px;
  height: 2.5px;
  animation-name: dustB;
  animation-duration: 17s;
}
.dust span:nth-child(3) {
  left: 36%;
  top: 66%;
  width: 2px;
  height: 2px;
  animation-name: dustA;
  animation-duration: 19s;
  animation-direction: reverse;
  opacity: 0.42;
}
.dust span:nth-child(4) {
  left: 70%;
  top: 58%;
  animation-name: dustB;
  animation-duration: 15s;
  opacity: 0.48;
}

@keyframes dustA {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.35; }
  25%  { transform: translate3d(18px, -28px, 0); opacity: 0.7; }
  50%  { transform: translate3d(-8px, -48px, 0); opacity: 0.45; }
  75%  { transform: translate3d(22px, -22px, 0); opacity: 0.65; }
  100% { transform: translate3d(0, 0, 0); opacity: 0.35; }
}
@keyframes dustB {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.3; }
  25%  { transform: translate3d(-20px, 18px, 0); opacity: 0.62; }
  50%  { transform: translate3d(12px, 36px, 0); opacity: 0.4; }
  75%  { transform: translate3d(-16px, 10px, 0); opacity: 0.58; }
  100% { transform: translate3d(0, 0, 0); opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .dust span {
    animation: none !important;
    opacity: 0.4;
  }
}