/* ==========================================================================
   TH3L30 · THE RADIO DEMON THEME  —  atmosphere / FX layer
   --------------------------------------------------------------------------
   Drop this markup once near the end of <body>:

     <div class="hb-fx" aria-hidden="true">
       <div class="hb-fx-grain"></div>
       <div class="hb-fx-scan"></div>
       <div class="hb-fx-vig"></div>
     </div>

   All layers are fixed, pointer-events:none, and sit above content but below
   modals (z 60-63). Everything respects prefers-reduced-motion.
   ========================================================================== */

.hb-fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.hb-fx > * { position: fixed; inset: 0; pointer-events: none; }

/* --- film grain / static : animated SVG noise, barely there ------------- */
.hb-fx-grain {
    z-index: 62;
    opacity: 0.05;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    /* gentle shimmer in place — no positional shake */
    animation: hb-grain 2.4s ease-in-out infinite;
}
@keyframes hb-grain {
    0%,100% { opacity: 0.04; }
    50%     { opacity: 0.07; }
}

/* --- scanlines + slow broadcast flicker --------------------------------- */
.hb-fx-scan {
    z-index: 61;
    background: repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
    opacity: 0.45;
    animation: hb-flicker 7s steps(70) infinite;
}
@keyframes hb-flicker {
    0%,100% { opacity: .45; }
    46% { opacity: .45; } 47% { opacity: .30; } 48% { opacity: .5; } 49% { opacity: .33; } 50% { opacity: .45; }
    82% { opacity: .45; } 83% { opacity: .28; } 84% { opacity: .45; }
}

/* --- vignette + warm amber center bloom (tube glow) --------------------- */
.hb-fx-vig {
    z-index: 63;
    box-shadow:
        inset 0 0 240px 70px rgba(0,0,0,0.78),
        inset 0 0 90px 10px rgba(110,12,24,0.25);
}

/* ==========================================================================
   Reusable atmospheric background actors (optional, place inside a
   .hb-bg wrapper at z-index 0 behind content)
   ========================================================================== */
.hb-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* art-deco sunburst rays, very faint, slowly rotating */
.hb-rays {
    position: absolute; left: 50%; top: 42%; width: 180vmax; height: 180vmax;
    transform: translate(-50%,-50%);
    background: repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(228,166,63,0.045) 0deg 2deg, transparent 2deg 9deg);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 62%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 62%);
    animation: hb-spin 120s linear infinite;
}
@keyframes hb-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* drifting crimson smoke blobs */
.hb-smoke { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.hb-smoke.s1 { width: 560px; height: 560px; left: -160px; top: -140px; background: rgba(110,12,24,0.55); animation: hb-drift1 26s ease-in-out infinite; }
.hb-smoke.s2 { width: 460px; height: 460px; right: -120px; bottom: -120px; background: rgba(228,166,63,0.12); animation: hb-drift2 30s ease-in-out infinite; }
.hb-smoke.s3 { width: 380px; height: 380px; left: 40%; top: 55%; background: rgba(200,20,43,0.14); animation: hb-drift1 34s ease-in-out infinite reverse; }
@keyframes hb-drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
@keyframes hb-drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-70px,-80px)} }

@media (prefers-reduced-motion: reduce) {
    .hb-fx-grain, .hb-fx-scan, .hb-rays, .hb-smoke { animation: none !important; }
    .hb-fx-grain { opacity: .04; }
}