/* =====================================================================
   AETHERIA — title_bg.css
   Painted night backdrop of the loading screen and of every title view
   (js/title_bg.js draws the pixel-art layers). Linked after title.css: it
   also lightens the title's own darkening / fog, which was made for the
   live world behind it. Motion here is transform / opacity only (it keeps
   running while finishBoot() blocks the main thread); --k = one scene
   pixel in CSS px (set by title_bg.js).
   ===================================================================== */

#title-bg {
  --k: 4px;
  position: fixed;
  inset: 0;
  z-index: 1;                        /* over #game / #overlay, under #ui (title) and #loading */
  overflow: hidden;
  pointer-events: none;
  background: #07060b;
  contain: strict;
}
#title-bg:not(.on) { display: none; }   /* game running (or title_bg.js missing / failed): no layers, no animations, never over the world */
#title-bg canvas { position: absolute; display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
.tb-g { position: absolute; inset: 0; }

/* twinkling stars and flickering windows (whole layers, opacity only) */
.tb-tw.t1 { animation: tbTwinkle 3.4s steps(3) infinite; }
.tb-tw.t2 { animation: tbTwinkle 5.3s steps(3) -2.2s infinite; }
.tb-gl.l1 { animation: tbFlicker 2.9s linear infinite; }
.tb-gl.l2 { animation: tbFlicker 4.1s linear -1.7s infinite reverse; }

/* fog bands: the canvas is two periods wide, so −50% loops seamlessly */
.tb-fog { animation: tbDrift 120s linear infinite; will-change: transform; }
.tb-fog.near { animation-duration: 64s; }

/* rising embers: one scene pixel each */
.tb-embers { position: absolute; inset: 0; }
.tb-embers i {
  position: absolute;
  bottom: -2%;
  left: var(--x);
  width: var(--k);
  height: var(--k);
  background: #ff8a24;
  box-shadow: 0 0 calc(var(--k) * 1.5) rgba(255, 138, 36, .75);
  opacity: 0;
  animation: tbEmber var(--d) linear var(--t) infinite;
  will-change: transform, opacity;
}
.tb-embers i.h { background: #fff0a0; box-shadow: 0 0 calc(var(--k) * 1.5) rgba(255, 179, 71, .8); }

/* bats: each flock element follows the same path; 2-frame sprites swapped by opacity */
.tb-bats { position: absolute; inset: 0; }
.tb-flock {
  position: absolute;
  left: calc(var(--bx) * var(--k));
  top: calc(var(--by) * var(--k));
  animation: tbFly1 41s linear 4s infinite backwards;
}
.tb-flock.f2 { animation-name: tbFly2; animation-duration: 57s; animation-delay: -21s; }
.tb-bat { position: relative; display: block; width: calc(var(--k) * 7); height: calc(var(--k) * 4); animation: tbBob 1.3s ease-in-out infinite alternate; }
.tb-bat i { position: absolute; inset: 0; background: center / 100% 100% no-repeat; image-rendering: pixelated; animation: tbFlap .34s step-end infinite; }
.tb-bat i.b { animation-delay: -.17s; }

/* corner vignette: interest stays at the edges, corners sink into the void */
.tb-vig {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 92% 88% at 50% 46%, transparent 60%, rgba(4, 3, 8, .55) 100%),
    linear-gradient(180deg, rgba(4, 3, 8, .35), transparent 14%, transparent 90%, rgba(4, 3, 8, .4));
}

@keyframes tbTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
@keyframes tbFlicker { 0%, 100% { opacity: 1; } 9% { opacity: .62; } 14% { opacity: .92; } 31% { opacity: .74; } 47% { opacity: 1; } 63% { opacity: .58; } 71% { opacity: .88; } 86% { opacity: .7; } }
@keyframes tbDrift { to { transform: translateX(-50%); } }
@keyframes tbEmber {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(calc(var(--k) * 5 * var(--sw)), -42vh); }
  75% { opacity: .75; }
  100% { transform: translate(calc(var(--k) * -3 * var(--sw)), -88vh); opacity: 0; }
}
@keyframes tbFly1 {
  0% { transform: translate(-14vw, 33vh); }
  30% { transform: translate(114vw, 5vh); }
  100% { transform: translate(114vw, 5vh); }
}
@keyframes tbFly2 {
  0% { transform: translate(-14vw, 14vh); }
  24% { transform: translate(114vw, 24vh); }
  100% { transform: translate(114vw, 24vh); }
}
@keyframes tbBob { from { transform: translateY(calc(var(--k) * -1.5)); } to { transform: translateY(calc(var(--k) * 1.5)); } }
@keyframes tbFlap { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- title over the painted scene: lighter darkening, no second fog, a soft pool behind the menu ---------- */
#ui .title, #ui .title.st-gate {
  background: radial-gradient(ellipse 34% 50% at 50% 50%, rgba(7, 6, 11, .46), rgba(7, 6, 11, .2) 58%, rgba(7, 6, 11, 0) 100%);
}
#ui .title .tg-bg { display: none; }
/* character select: panels fill the screen and its logo sits over the moon, so the night recedes */
#ui .title.st-chars { background: linear-gradient(180deg, rgba(7, 6, 11, .58), rgba(7, 6, 11, .5) 40%, rgba(7, 6, 11, .62)); }

/* ---------- reduced motion: a still painting ---------- */
@media (prefers-reduced-motion: reduce) {
  .tb-tw.t1, .tb-tw.t2, .tb-gl.l1, .tb-gl.l2, .tb-fog { animation: none; }
  .tb-embers, .tb-bats { display: none; }
}