/* ─────────────────────────────────────────────────────────────────
   Site background — atmospheric rays + grid + motes, anchored
   bottom-right. Sits behind all content.

   Adapted from drafts/Background v2.html. The stage is position:
   fixed with pointer-events: none; main + footer sit above it via
   z-index rules in site.css.
   ───────────────────────────────────────────────────────────────── */

.stage {
    --origin-x: 100%;
    --origin-y: 100%;
    --accent: #C73737;

    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}

/* ── Layer 1 — warm tonal wash from the ray origin ────────────── */
.stage .wash {
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(1200px 900px at var(--origin-x) var(--origin-y),
        rgba(17,17,17,0.06) 0%,
        rgba(17,17,17,0.03) 28%,
        rgba(17,17,17,0.00) 62%);
    pointer-events: none;
}

/* ── Layer 2 — rays ────────────────────────────────────────────── */
.stage .rays {
    position: absolute;
    width: 220vmax;
    height: 220vmax;
    right: -20vmax;
    bottom: -20vmax;
    transform-origin: 100% 100%;
    transform: rotate(0deg);
    pointer-events: none;
    animation: stage-fan-sway 18s ease-in-out infinite;
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.stage .rays::before,
.stage .rays::after,
.stage .rays > .mid {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

/* Coarse rays — structural beams */
.stage .rays::before {
    background: conic-gradient(
      from 180deg at 100% 100%,
      transparent 0deg,
      transparent 2deg,
      rgba(17,17,17,0.10) 2.4deg,
      rgba(17,17,17,0.10) 2.8deg,
      transparent 3.2deg,
      transparent 9deg,
      rgba(17,17,17,0.07) 9.3deg,
      rgba(17,17,17,0.07) 9.7deg,
      transparent 10deg,
      transparent 18deg,
      rgba(17,17,17,0.09) 18.4deg,
      rgba(17,17,17,0.09) 18.9deg,
      transparent 19.3deg,
      transparent 29deg,
      rgba(17,17,17,0.06) 29.3deg,
      rgba(17,17,17,0.06) 29.7deg,
      transparent 30deg,
      transparent 41deg,
      rgba(17,17,17,0.08) 41.4deg,
      rgba(17,17,17,0.08) 41.9deg,
      transparent 42.3deg,
      transparent 55deg,
      rgba(17,17,17,0.05) 55.3deg,
      rgba(17,17,17,0.05) 55.8deg,
      transparent 56.2deg,
      transparent 68deg,
      rgba(17,17,17,0.07) 68.4deg,
      rgba(17,17,17,0.07) 68.9deg,
      transparent 69.3deg,
      transparent 82deg,
      rgba(17,17,17,0.06) 82.3deg,
      rgba(17,17,17,0.06) 82.7deg,
      transparent 83deg,
      transparent 90deg,
      transparent 360deg
    );
    -webkit-mask: radial-gradient(
      circle at 100% 100%,
      transparent 0%, transparent 6%,
      rgba(0,0,0,0.9) 22%,
      rgba(0,0,0,0.7) 48%,
      rgba(0,0,0,0.25) 78%,
      transparent 100%
    );
    mask: radial-gradient(
      circle at 100% 100%,
      transparent 0%, transparent 6%,
      rgba(0,0,0,0.9) 22%,
      rgba(0,0,0,0.7) 48%,
      rgba(0,0,0,0.25) 78%,
      transparent 100%
    );
    animation: stage-ray-drift-a 22s linear infinite;
}

/* Fine rays — thinner, lower opacity, drifting opposite */
.stage .rays::after {
    background: conic-gradient(
      from 180deg at 100% 100%,
      transparent 0deg,
      transparent 5deg,
      rgba(17,17,17,0.05) 5.15deg,
      rgba(17,17,17,0.05) 5.35deg,
      transparent 5.5deg,
      transparent 13deg,
      rgba(17,17,17,0.04) 13.15deg,
      rgba(17,17,17,0.04) 13.3deg,
      transparent 13.5deg,
      transparent 24deg,
      rgba(17,17,17,0.05) 24.15deg,
      rgba(17,17,17,0.05) 24.3deg,
      transparent 24.5deg,
      transparent 35deg,
      rgba(17,17,17,0.04) 35.15deg,
      rgba(17,17,17,0.04) 35.3deg,
      transparent 35.5deg,
      transparent 48deg,
      rgba(17,17,17,0.05) 48.15deg,
      rgba(17,17,17,0.05) 48.3deg,
      transparent 48.5deg,
      transparent 61deg,
      rgba(17,17,17,0.04) 61.15deg,
      rgba(17,17,17,0.04) 61.3deg,
      transparent 61.5deg,
      transparent 75deg,
      rgba(17,17,17,0.04) 75.15deg,
      rgba(17,17,17,0.04) 75.3deg,
      transparent 75.5deg,
      transparent 88deg,
      rgba(17,17,17,0.03) 88.2deg,
      rgba(17,17,17,0.03) 88.4deg,
      transparent 90deg,
      transparent 360deg
    );
    -webkit-mask: radial-gradient(
      circle at 100% 100%,
      transparent 0%, transparent 8%,
      rgba(0,0,0,0.9) 28%,
      rgba(0,0,0,0.55) 62%,
      transparent 96%
    );
    mask: radial-gradient(
      circle at 100% 100%,
      transparent 0%, transparent 8%,
      rgba(0,0,0,0.9) 28%,
      rgba(0,0,0,0.55) 62%,
      transparent 96%
    );
    animation: stage-ray-drift-b 34s linear infinite reverse;
}

/* Mid layer — subtle crimson accent ray */
.stage .rays > .mid {
    background: conic-gradient(
      from 180deg at 100% 100%,
      transparent 0deg,
      transparent 37deg,
      rgba(199,55,55,0.10) 37.4deg,
      rgba(199,55,55,0.10) 37.9deg,
      transparent 38.3deg,
      transparent 360deg
    );
    -webkit-mask: radial-gradient(
      circle at 100% 100%,
      transparent 10%,
      rgba(0,0,0,0.9) 35%,
      rgba(0,0,0,0.5) 70%,
      transparent 100%
    );
    mask: radial-gradient(
      circle at 100% 100%,
      transparent 10%,
      rgba(0,0,0,0.9) 35%,
      rgba(0,0,0,0.5) 70%,
      transparent 100%
    );
    animation: stage-accent-pulse 7s ease-in-out infinite;
}

/* ── Layer 3 — technical grid overlay ─────────────────────────── */
.stage .grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right,  rgba(17,17,17,0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(17,17,17,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask: radial-gradient(
      1400px 1000px at var(--origin-x) var(--origin-y),
      rgba(0,0,0,0.9) 0%,
      rgba(0,0,0,0.35) 55%,
      transparent 90%
    );
    mask: radial-gradient(
      1400px 1000px at var(--origin-x) var(--origin-y),
      rgba(0,0,0,0.9) 0%,
      rgba(0,0,0,0.35) 55%,
      transparent 90%
    );
    opacity: 0.7;
}

/* ── Layer 4 — scan pulse ─────────────────────────────────────── */
.stage .pulse {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      circle at 100% 100%,
      transparent 0%, transparent 38%,
      rgba(17,17,17,0.05) 40%,
      transparent 43%,
      transparent 100%
    );
    animation: stage-pulse-out 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    mix-blend-mode: multiply;
}

/* ── Layer 5 — drifting motes ─────────────────────────────────── */
.stage .motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.7;
}
.stage .mote {
    position: absolute;
    width: 2px; height: 2px;
    background: #111;
    border-radius: 50%;
    opacity: 0;
    animation: stage-mote-travel 14s linear infinite;
}
.stage .mote:nth-child(1)  { left: 92%; top: 88%; --dx: -60vw; --dy: -70vh; animation-delay:  0s;   animation-duration: 13s; }
.stage .mote:nth-child(2)  { left: 95%; top: 82%; --dx: -80vw; --dy: -55vh; animation-delay:  2.1s; animation-duration: 17s; }
.stage .mote:nth-child(3)  { left: 88%; top: 96%; --dx: -50vw; --dy: -90vh; animation-delay:  4.4s; animation-duration: 15s; }
.stage .mote:nth-child(4)  { left: 97%; top: 93%; --dx: -90vw; --dy: -40vh; animation-delay:  6.7s; animation-duration: 19s; }
.stage .mote:nth-child(5)  { left: 86%; top: 80%; --dx: -45vw; --dy: -75vh; animation-delay:  1.2s; animation-duration: 21s; background: var(--accent); }
.stage .mote:nth-child(6)  { left: 99%; top: 99%; --dx: -70vw; --dy: -60vh; animation-delay:  8.3s; animation-duration: 16s; }
.stage .mote:nth-child(7)  { left: 90%; top: 78%; --dx: -35vw; --dy: -85vh; animation-delay: 10.0s; animation-duration: 14s; }
.stage .mote:nth-child(8)  { left: 94%; top: 90%; --dx: -55vw; --dy: -65vh; animation-delay:  3.4s; animation-duration: 18s; }
.stage .mote:nth-child(9)  { left: 89%; top: 85%; --dx: -75vw; --dy: -50vh; animation-delay:  5.8s; animation-duration: 20s; }
.stage .mote:nth-child(10) { left: 96%; top: 76%; --dx: -40vw; --dy: -80vh; animation-delay:  7.2s; animation-duration: 15s; }
.stage .mote:nth-child(11) { left: 87%; top: 92%; --dx: -65vw; --dy: -58vh; animation-delay:  9.1s; animation-duration: 17s; background: var(--accent); }
.stage .mote:nth-child(12) { left: 91%; top: 94%; --dx: -85vw; --dy: -45vh; animation-delay: 11.5s; animation-duration: 19s; }
.stage .mote:nth-child(13) { left: 98%; top: 86%; --dx: -50vw; --dy: -72vh; animation-delay:  0.6s; animation-duration: 22s; }
.stage .mote:nth-child(14) { left: 84%; top: 83%; --dx: -30vw; --dy: -78vh; animation-delay: 12.8s; animation-duration: 16s; }

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes stage-ray-drift-a {
    from { transform: rotate(0deg); }
    to   { transform: rotate(8deg); }
}
@keyframes stage-ray-drift-b {
    from { transform: rotate(0deg); }
    to   { transform: rotate(6deg); }
}
@keyframes stage-fan-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate( 1.5deg); }
}
@keyframes stage-accent-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1;    }
}
@keyframes stage-pulse-out {
    0%   { transform: scale(0.35); opacity: 0;   }
    12%  {                         opacity: 0.9; }
    80%  {                         opacity: 0;   }
    100% { transform: scale(1.8);  opacity: 0;   }
}
@keyframes stage-mote-travel {
    0%   { transform: translate(0, 0);                 opacity: 0;   }
    8%   {                                             opacity: 0.8; }
    85%  {                                             opacity: 0.6; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
    .stage .rays,
    .stage .rays::before,
    .stage .rays::after,
    .stage .rays > .mid,
    .stage .pulse,
    .stage .mote {
        animation: none !important;
    }
}