/* ══════════════════════════════════════════════════════════════
   DREAMS UNIVERSE — SHARED THEME BACKGROUND (du-theme.css)
   ──────────────────────────────────────────────────────────────
   Single source of truth for the app background. The declarations
   below are copied 1:1 from dashboard.html (the reference page):
   gradient overlay, image, size, position, fixed attachment,
   vignette, drifting orbs and film grain.

   Why a separate file: url() inside a stylesheet resolves relative
   to the STYLESHEET, not the page. Because this file sits next to
   speed.jpeg, the image resolves correctly from every page — opened
   from disk, served from the site root, or served from a subfolder.
   (Several pages previously used url('../speed.jpeg'), which points
   one folder ABOVE the panel and 404s.)

   Markup each page needs (already present on every app page):
     <div class="bg-layer" aria-hidden="true"></div>
     <div class="orb orb-1" aria-hidden="true"></div>
     <div class="orb orb-2" aria-hidden="true"></div>
     <div class="grain" aria-hidden="true"></div>
   ══════════════════════════════════════════════════════════════ */

/* Fallback colour = dashboard.html's --bg-dark. Set on <html> so the
   very first paint (before the image decodes) is never white. */
html { background-color: #07070a; }

.bg-layer {
    position:fixed; inset:0; z-index:0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(30,20,10,0.40) 0%, rgba(0,0,0,0.92) 90%),
        radial-gradient(ellipse at 0% 50%, rgba(201,169,78,0.04) 0%, transparent 70%),
        url('speed.jpeg') center center / cover no-repeat fixed;
    background-color:#07070a;
}
.bg-layer::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.60) 100%);
    pointer-events:none;
}

.orb {
    position:fixed; border-radius:50%; pointer-events:none; z-index:0;
    filter:blur(110px); opacity:0.24;
    will-change:transform;
}
.orb-1 { width:520px; height:520px; top:-160px; left:-140px;
    background:radial-gradient(circle, rgba(201,169,78,0.55), transparent 68%);
    animation:duDrift1 26s ease-in-out infinite; }
.orb-2 { width:600px; height:600px; top:200px; right:-260px;
    background:radial-gradient(circle, rgba(201,169,78,0.35), transparent 68%);
    animation:duDrift2 32s ease-in-out infinite; }
@keyframes duDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
@keyframes duDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-70px,80px)} }

.grain {
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .orb { animation:none; }
}