/* =============================================================================
   scene.css — the layered scene backbone (U3 / §3).
   Background layers form one fixed stacking context behind scrolling content:
     z-base   twilight gradient (body, in base.css)
     z-bokeh  drifting firefly canvas (fixed)            [site-wide]
     z-scene  hero (home) | per-post background (post)   [pinned]
     z-creature creature SVG layer                       [home hero band]
     z-content header, feed, article — scrolls over
   Decorative layers are aria-hidden, non-interactive, non-focusable.
   ========================================================================== */

/* --- Bokeh canvas: fixed, site-wide, dim, never above content ------------- */
.bokeh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-bokeh);
  pointer-events: none;
  opacity: 0.9;
}

/* --- Per-post contextual background (post pages) -------------------------- */
.post-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-scene);
  pointer-events: none;
  overflow: hidden;
}
.post-bg__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-bg__video {
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.post-bg__video.is-playing {
  opacity: 1;
}
/* A soft vignette + floor gradient keeps the brilliant margins readable- adjacent
   without dimming the whole frame. */
.post-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 50% 0%, transparent 38%, rgb(var(--c-ink) / 0.72) 100%),
    linear-gradient(180deg, rgb(var(--c-ink) / 0.35) 0%, rgb(var(--c-ink) / 0.72) 100%);
}

/* --- Footer (content layer) ---------------------------------------------- */
.site-footer {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
  padding: var(--space-2xl) var(--space-m) var(--space-xl);
  margin-top: var(--space-2xl);
  background: linear-gradient(180deg, transparent, rgb(var(--c-ink) / 0.7) 40%);
}
.site-footer__logo {
  display: inline-block;
  height: clamp(2.2rem, 1.9rem + 1vw, 2.8rem);
  width: auto;
  filter: drop-shadow(0 0 6px rgb(var(--c-gold) / 0.3));
}
.site-footer__line {
  color: var(--text-dim);
  font-style: italic;
  margin-top: var(--space-2xs);
}
.site-footer__meta {
  margin-top: var(--space-m);
  color: var(--text-faint);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
}