/* r15m background — one fixed full-viewport layer (no mid-scroll seams)
   Deep near-black ground + ONE soft directional crimson radial (dialed down) + 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: #020001;
}

/* ONE soft directional light — upper-left; peak/mid weaker than r15i */
.fx-light {
  position: absolute;
  inset: -28% -40% -50% -28%;
  background: radial-gradient(
    ellipse 118% 92% at 26% 16%,
    rgba(224, 62, 62, 0.28) 0%,
    rgba(200, 36, 48, 0.18) 18%,
    rgba(160, 22, 34, 0.12) 36%,
    rgba(90, 10, 18, 0.07) 54%,
    rgba(35, 4, 8, 0.03) 70%,
    transparent 86%
  );
}

.fx-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 68% at 50% 34%, transparent 22%, rgba(0, 0, 0, 0.38) 62%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, transparent 22%, transparent 70%, rgba(0, 0, 0, 0.48) 100%);
}

.fx-grain {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  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.8);
  box-shadow: 0 0 8px 2px rgba(255, 170, 185, 0.4);
  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.38;
}
.dust span:nth-child(4) {
  left: 70%;
  top: 58%;
  animation-name: dustB;
  animation-duration: 15s;
  opacity: 0.44;
}

@keyframes dustA {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.32; }
  25%  { transform: translate3d(18px, -28px, 0); opacity: 0.66; }
  50%  { transform: translate3d(-8px, -48px, 0); opacity: 0.4; }
  75%  { transform: translate3d(22px, -22px, 0); opacity: 0.6; }
  100% { transform: translate3d(0, 0, 0); opacity: 0.32; }
}
@keyframes dustB {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.28; }
  25%  { transform: translate3d(-20px, 18px, 0); opacity: 0.58; }
  50%  { transform: translate3d(12px, 36px, 0); opacity: 0.36; }
  75%  { transform: translate3d(-16px, 10px, 0); opacity: 0.54; }
  100% { transform: translate3d(0, 0, 0); opacity: 0.28; }
}

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