/* ==========================================================================
   IT'S HIM — AMBIENT BACKGROUND  (reusable, self-contained)
   A dark, candlelit atmosphere used across pages: one continuous SMOKE haze
   flowing down the central "river" of the page + soft AMBER edge lighting +
   a dark base. Fixed behind all content; purely decorative.

   TO USE ON ANY PAGE — add these two lines and nothing else:
       <link rel="stylesheet" href="ambient.css" />
       <script src="ambient.js" defer></script>
   ambient.js injects its own markup, so no per-page HTML is required.
   (Requires the shared smoke frames at /media/smoke/.)
   ========================================================================== */

/* Fixed layer BEHIND all page content. z-index:-1 keeps it behind normal
   (even non-positioned) content, so it works on any page without changes.
   Carries its own dark base — the page doesn't need to set a background. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg, #0E0908);   /* the dark base travels with the component */
}

/* --- Overall warm amber wash — the whole dark room glows candlelit, so the
   light points diffuse INTO an ambient tone rather than sitting on pure black.
   Warmth concentrated on the OUTER areas; it bleeds inward to meet the smoke. --- */
.ambient__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 92% at -6% 42%, rgba(158,102,46,0.17), rgba(120,74,32,0.06) 56%, transparent 80%),
    radial-gradient(70% 92% at 106% 56%, rgba(150,98,48,0.16), rgba(120,74,32,0.06) 56%, transparent 80%),
    radial-gradient(92% 40% at 50% 108%, rgba(150,96,44,0.09), transparent 74%),
    radial-gradient(82% 34% at 50% -8%, rgba(120,80,38,0.06), transparent 74%);
  mix-blend-mode: screen;
}

/* --- Drifting smoke — ONE seamless haze texture panned by ambient.js
   (continuous drift, no in-place pulsing). Kept crisp; we only warm-tint and
   firm it a touch here, with a light blur to melt any residual blob edges. --- */
.ambient__smoke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.98;
  filter: sepia(0.44) saturate(1.4) hue-rotate(-8deg) brightness(1.24) contrast(1.28) blur(2.6px);
  mix-blend-mode: screen;
}

/* --- Candlelight — soft, dim, DIFFUSED warm glow points (placed by ambient.js).
   No hard core: a gentle amber pool that bleeds into the surrounding dark. --- */
.ambient__candle {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(236,170,96,0.22) 0%,
    rgba(220,144,66,0.13) 32%,
    rgba(196,116,52,0.055) 58%,
    transparent 80%);
  /* --lift is driven by ambient.js when carried candlelight (the pointer
     presence) passes near — brightness only, so the flicker keeps its own
     opacity/transform animation. Defaults to 1 (no change) everywhere else. */
  filter: blur(15px) brightness(var(--lift, 1));
  mix-blend-mode: screen;
  animation-name: candleFlicker;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: opacity, transform;
}
/* gentle flicker — subtle brightness breathing, no hard scaling that reads as a dot */
@keyframes candleFlicker {
  0%,100% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.97); }
  22%     { opacity: 0.66; transform: translate(-50%, -50%) scale(1.05); }
  48%     { opacity: 0.4;  transform: translate(-50%, -50%) scale(0.99); }
  70%     { opacity: 0.58; transform: translate(-50%, -50%) scale(1.03); }
  86%     { opacity: 0.44; transform: translate(-50%, -50%) scale(1.0); }
}

/* --- THE ROOM NOTICES YOU — carried candlelight that trails the pointer.
   Reads as ambient light (screen blend, heavy blur), never a cursor skin.
   Position/opacity are eased slowly by ambient.js; sits with the candles,
   behind all content. --- */
.ambient__presence {
  position: absolute;
  top: 0; left: 0;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(236,170,96,0.16) 0%,
    rgba(220,144,66,0.09) 34%,
    rgba(196,116,52,0.04) 58%,
    transparent 78%);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* --- Touch ember — a tap blooms softly and fades (animated by ambient.js) --- */
.ambient__ember {
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(240,178,102,0.34) 0%,
    rgba(220,144,66,0.16) 40%,
    transparent 72%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

/* --- Vignette: keep the edges moody (a touch warm, not pure black) --- */
.ambient__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 100% at 50% 44%, transparent 58%, rgba(12,8,6,0.48) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ambient__candle { animation: none !important; }
  .ambient__presence, .ambient__ember { display: none !important; }
}