/* ============================================================================
   page-glow-up — Dressing Toolkit (CSS)
   ----------------------------------------------------------------------------
   Paste only the blocks you choose for this page. This is a MENU, not a
   stylesheet to drop in whole. Swap the CSS variables to re-theme without
   touching the rules.

   Pick ONE background strategy (Menu 1) and AT LEAST ONE readability
   treatment (Menu 2). The living layer (Menu 3) is glow-engine.js + the
   optional focal glow below.
   ========================================================================== */

:root {
  /* Re-theme by editing these four lines. Defaults = NO BS AI forge. */
  --glow-bg-base: #0d0b09;          /* solid fallback behind everything */
  --glow-overlay: 10, 8, 6;         /* RGB of the darkening overlay */
  --glow-accent: 255, 140, 66;      /* RGB of the world's signature color */
  --glow-text: #ece0c8;             /* body copy color over the dark scene */
}

/* ===========================================================================
   MENU 1 — BACKGROUND  (pick ONE)
   =========================================================================== */

/* 1A. Generated atmospheric image (16:9 for short pages, 9:16 for long).
   The image is BUNDLED into the page's own /assets folder — never depend on
   an external CDN/R2 for it. `fixed` gives a calm parallax as the page scrolls. */
body {
  background: var(--glow-bg-base)
    url('/assets/REPLACE_WITH_BG.webp') no-repeat center center fixed;
  background-size: cover;
}

/* 1B. Procedural moving smoke (NO image). Scales to any height, never crops,
   weighs nothing. This is also "dark smoke you can put copy straight on."
   Use INSTEAD of 1A on very long pages, or when you want pure atmosphere. */
body.glow-smoke {
  background: var(--glow-bg-base);
  position: relative;
}
body.glow-smoke::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 25% 30%, rgba(var(--glow-accent), 0.10), transparent 70%),
    radial-gradient(45% 55% at 75% 65%, rgba(var(--glow-accent), 0.08), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(var(--glow-overlay), 0.55), transparent 70%);
  filter: blur(40px);
  animation: glowSmokeDrift 26s ease-in-out infinite alternate;
}
@keyframes glowSmokeDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(2%, 3%, 0) scale(1.12); }
  100% { transform: translate3d(3%, -1%, 0) scale(1.06); }
}

/* Darkening overlay — sits over the image (1A) so copy always wins.
   Skip it for 1B (the smoke is already the dark layer). Tune the four stops
   so the brightest part of the bg still reads as a backdrop, not a spotlight. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(var(--glow-overlay), 0.82) 0%,
    rgba(var(--glow-overlay), 0.58) 38%,
    rgba(var(--glow-overlay), 0.50) 66%,
    rgba(var(--glow-overlay), 0.68) 100%);
}

/* Lift ALL real content above the overlay + particles. Put your page's main
   wrapper class here (z-index >= 5 clears both the overlay and the canvas). */
.glow-content { position: relative; z-index: 5; }

/* ===========================================================================
   MENU 2 — READABILITY  (pick or MIX — do not reflex to panels every time)
   =========================================================================== */

/* 2A. Translucent panel — the Burn Pile look. Good for dense, boxy sections. */
.glow-panel {
  background: rgba(var(--glow-overlay), 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(var(--glow-accent), 0.22);
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

/* 2B. Scrim band — a soft dark wash behind a text column, no hard box edges.
   Modern, airy; copy floats on shadow instead of a card. */
.glow-scrim {
  background: radial-gradient(120% 100% at 50% 50%,
    rgba(var(--glow-overlay), 0.72) 0%,
    rgba(var(--glow-overlay), 0.45) 55%,
    transparent 100%);
  padding: 40px 28px;
}

/* 2C. Vignette — darken the page EDGES, keep the center open. Great for a hero
   where the bg art is the star and copy lives in the calm middle. */
.glow-vignette::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 120% at 50% 45%,
    transparent 40%, rgba(var(--glow-overlay), 0.78) 100%);
}

/* 2D. Type glow — lightest touch. Shadow on the type itself, no background at
   all. Use for short, large headings sitting on a clean part of the bg. */
.glow-type {
  color: var(--glow-text);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.7);
}

/* Footer almost always needs the lightest help to read over a busy base. */
.glow-footer { position: relative; z-index: 2; }
.glow-footer, .glow-footer p { color: var(--glow-text); }
.glow-footer p { text-shadow: 0 1px 8px rgba(0,0,0,0.95), 0 0 16px rgba(0,0,0,0.55); }

/* ===========================================================================
   MENU 3 — LIVING LAYER  (glow-engine.js handles particles; this is the glow)
   =========================================================================== */

/* The canvas the engine draws into. First child of <body>. */
#glow-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Optional breathing focal glow (the Burn Pile forge-mouth light). Place a
   <div id="glow-focal"></div> after the canvas. Anchor + color it per world. */
#glow-focal {
  position: fixed;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 860px;
  height: 440px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(var(--glow-accent), 0.74),
    rgba(var(--glow-accent), 0.30) 40%,
    rgba(var(--glow-accent), 0.10) 62%,
    transparent 74%);
  mix-blend-mode: screen;
  animation: glowFocalBreath 4.5s ease-in-out infinite;
}
@keyframes glowFocalBreath {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scaleY(1.15); }
}

/* Always cut motion for visitors who ask for it. */
@media (prefers-reduced-motion: reduce) {
  #glow-focal { animation: none; }
  body.glow-smoke::before { animation: none; }
}