/* Dangerous List — Living Atmosphere
   Reusable background system: cross-fading mood layers + drifting apparitions.
   Pair with atmosphere.js. The host element carries `data-atmosphere` and should be
   positioned (e.g. position:fixed; inset:0; z-index:-1). atmosphere.js injects the layers.
   Rendering is pure CSS; JS only schedules class toggles + spawns a few DOM nodes. */

.dla { overflow: hidden; }
.dla * { pointer-events: none; }

/* ---------- mood layers (cross-fade) ---------- */
.dla-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 3.2s ease; will-change: opacity; }
.dla-layer.on { opacity: 1; }

.dla-bloom { background:
    radial-gradient(75% 65% at 50% -10%, rgba(160,16,16,0.6) 0%, rgba(90,8,8,0.32) 30%, transparent 62%),
    radial-gradient(55% 45% at 82% 112%, rgba(58,20,20,0.55), transparent 60%), #080606; }

.dla-fog { background: #0a0707; }
.dla-fog .dla-cloud { position: absolute; border-radius: 50%; filter: blur(75px); }
.dla-fog .c1 { width: 60vw; height: 60vw; left: -16vw; top: -14vw; background: radial-gradient(circle, rgba(150,12,12,0.5), transparent 62%); }
.dla-fog .c2 { width: 52vw; height: 52vw; right: -14vw; top: 6vh; background: radial-gradient(circle, rgba(74,22,22,0.75), transparent 60%); }
.dla-fog .c3 { width: 70vw; height: 70vw; left: 10vw; bottom: -34vw; background: radial-gradient(circle, rgba(180,40,30,0.26), transparent 60%); }

.dla-webs { background: radial-gradient(60% 55% at 50% -12%, rgba(120,10,10,0.4), transparent 60%), #0a0808; }
.dla-webs::after { content: ""; position: absolute; inset: 0; background: var(--dla-texture) center top / cover no-repeat;
  mix-blend-mode: screen; filter: brightness(2.5) contrast(1.1); }

.dla-moon { background:
    radial-gradient(26% 26% at 80% 20%, rgba(196,44,34,0.78) 0%, rgba(120,12,12,0.4) 42%, transparent 64%),
    radial-gradient(70% 55% at 50% 122%, rgba(40,16,16,0.66), transparent 65%), #080606; }
.dla-moon .dla-halo { position: absolute; right: 16%; top: 14%; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(214,72,58,0.5), rgba(139,0,0,0.18) 55%, transparent 72%); filter: blur(7px); }

.dla-whispers { background: radial-gradient(70% 60% at 50% 0%, rgba(60,12,12,0.45), transparent 60%), #0a0707; }

.dla-embers { background:
    radial-gradient(60% 50% at 50% 110%, rgba(90,10,10,0.42), transparent 60%),
    radial-gradient(50% 40% at 50% -8%, rgba(60,12,12,0.4), transparent 62%), #080606; }
.dla-embers .dla-spark { position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%;
    background: var(--dl-ember, #c8453b); box-shadow: 0 0 6px 1px rgba(200,69,59,0.85); }

@media (prefers-reduced-motion: no-preference) {
  .dla-fog .dla-cloud { animation: dla-fl 34s ease-in-out infinite alternate; }
  .dla-fog .c2 { animation-duration: 46s; } .dla-fog .c3 { animation-duration: 40s; }
  .dla-embers .dla-spark { animation: dla-rise linear infinite; }
}
@keyframes dla-fl { from { transform: translate(0,0) scale(1);} to { transform: translate(7vw,6vh) scale(1.15);} }
@keyframes dla-rise { 0% { transform: translateY(0); opacity: 0;} 12% { opacity: 1;} 88% { opacity: 0.8;} 100% { transform: translateY(-104vh) translateX(2vw); opacity: 0;} }

/* ---------- overlays ---------- */
.dla-vig { position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 95% at 50% 14%, transparent 36%, rgba(6,6,6,0.5) 80%, #060606 100%); }
.dla-grain { position: absolute; inset: -50%; z-index: 3; opacity: 0.055; mix-blend-mode: overlay;
  /* External file (not a data: URI) so img-src can stay 'self' - no `data:` allowance. */
  background-image: url("/img/grain.svg"); }

/* ---------- apparitions ---------- */
.dla-apparitions { position: absolute; inset: 0; z-index: 1; }
.dla-app { position: absolute; opacity: 0; transition: opacity 1.6s ease; will-change: opacity, transform; }
.dla-app.show { opacity: var(--peak, 0.1); }
/* interim creatures: emoji rendered as faint greyscale shadows with a crimson glow */
.dla-creature { filter: grayscale(1) brightness(0.45) contrast(0.95) blur(0.4px) drop-shadow(0 0 12px rgba(139,0,0,0.35)); line-height: 1; }
.dla-lit { filter: grayscale(1) brightness(0.72) blur(0.3px) drop-shadow(0 0 26px rgba(184,32,28,0.6)); line-height: 1; }
/* artist SVG/PNG silhouettes: any artwork → grey gradient shape, red-lit on occasion.
   Set --sil to the asset url + width/height inline; the mask makes it a clean silhouette
   regardless of the source file's colours. */
.dla-silhouette { background: linear-gradient(180deg, #6e6a6a 0%, #2a2626 100%);
  -webkit-mask: var(--sil) center / contain no-repeat; mask: var(--sil) center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(139,0,0,0.38)); }
.dla-silhouette.lit { background: linear-gradient(180deg, #9a8f8f 0%, #3a2222 100%);
  filter: drop-shadow(0 0 30px rgba(184,32,28,0.65)); }
.dla-glyph { filter: grayscale(1) brightness(0.5) contrast(0.95); line-height: 1; }
.dla-word { font-family: var(--font-heading, 'Playfair Display', serif); font-style: italic; color: #8b0000; white-space: nowrap; }
.dla-runes { font-family: var(--font-heading, 'Playfair Display', serif); color: #7a1414; line-height: 1.5; letter-spacing: 0.12em; text-align: center; }
.dla-book { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.dla-book .dla-tome { filter: brightness(0.55) saturate(0.5); }
.dla-book .dla-runes2 { font-family: var(--font-heading, 'Playfair Display', serif); color: #7a1414; font-size: 0.7rem; letter-spacing: 0.14em; }
.dla-splatter { position: relative; }
.dla-splatter span { position: absolute; border-radius: 50% 48% 52% 50%; background: radial-gradient(circle at 38% 32%, #8b0000, #3a0000 75%); }

@media (prefers-reduced-motion: no-preference) {
  .dla-drift { animation: dla-appdrift var(--drift, 22s) ease-in-out forwards; }
}
@keyframes dla-appdrift { from { transform: translate(0,0) rotate(var(--rot,0deg)); } to { transform: translate(var(--dx,0), var(--dy,-30px)) rotate(var(--rot2,0deg)); } }

/* pause everything when the host marks itself asleep (tab hidden) */
.dla.asleep .dla-layer, .dla.asleep .dla-app, .dla.asleep .dla-spark, .dla.asleep .dla-cloud { animation-play-state: paused !important; }
@media (max-width: 760px) { .dla-fog .dla-cloud { filter: blur(45px); } }