/* beredskaQet — baggrund: aurora + metal + breath (2026-10-20)
   ------------------------------------------------------------------------
   Lag (nederst -> øverst):
     #bq-bg            fast lag, z-index -1 (under alt indhold og logoer)
       .bq-base        mørk bund med et svagt farveskær
       .bq-sky         de "åndende" farveskyer (3 blobs, radial-gradient)
       .bq-metal       børstet metal + langsom sheen
       .bq-grain       fin noise (SVG, ingen billedfiler)
       .bq-vignette    mørke kanter + top/bund-fade = læsbar tekst

   Farvetema pr. side via  html[data-tema="..."]
   Alt animeres kun med transform/opacity (GPU), og der bruges ingen
   filter: blur() på store flader — gradienterne er bløde i sig selv.
   ------------------------------------------------------------------------ */

html {
  background: #06070a;
}

/* Siderne må ikke have deres egen uigennemsigtige baggrund, ellers skjules laget */
body {
  background: transparent !important;
}

#bq-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  /* farvetemaets grundfarver — overskrives pr. side */
  --bq-a: #ff5a7a;
  --bq-b: #d63cff;
  --bq-c: #7a2bff;
  --bq-base: #0a0509;
  --bq-metal: rgba(255, 255, 255, .05);
}

/* ── temaer ───────────────────────────────────────────────────────────── */
html[data-tema="forside"] #bq-bg,
#bq-bg[data-tema="forside"] {
  --bq-a: #ff5f7e; --bq-b: #d94bff; --bq-c: #ff3d5a; --bq-base: #0d0509;
}
html[data-tema="stats"] #bq-bg,
#bq-bg[data-tema="stats"] {
  --bq-a: #5ec8ff; --bq-b: #6ff0e0; --bq-c: #3b6bff; --bq-base: #050a0f;
}
html[data-tema="rangliste"] #bq-bg,
#bq-bg[data-tema="rangliste"] {
  --bq-a: #ffcf5c; --bq-b: #ff9d3c; --bq-c: #ffdf8a; --bq-base: #0e0a05;
}
html[data-tema="events"] #bq-bg,
#bq-bg[data-tema="events"] {
  --bq-a: #5cf0a8; --bq-b: #3cd68a; --bq-c: #9cf5c9; --bq-base: #050d09;
}
html[data-tema="kort"] #bq-bg,
#bq-bg[data-tema="kort"] {
  --bq-a: #b06bff; --bq-b: #ff7ad9; --bq-c: #7b4bff; --bq-base: #0a0610;
}
html[data-tema="bytte"] #bq-bg,
#bq-bg[data-tema="bytte"] {
  --bq-a: #ff9a5c; --bq-b: #ffd08a; --bq-c: #d96bff; --bq-base: #0d0805;
}
html[data-tema="om-os"] #bq-bg,
#bq-bg[data-tema="om-os"] {
  --bq-a: #4a6bff; --bq-b: #7f8da3; --bq-c: #2b3fa8; --bq-base: #05070d;
}
html[data-tema="live"] #bq-bg,
#bq-bg[data-tema="live"] {
  --bq-a: #5ce1ff; --bq-b: #5cf0c0; --bq-c: #2b6bff; --bq-base: #04090d;
}
html[data-tema="bottie"] #bq-bg,
#bq-bg[data-tema="bottie"] {
  --bq-a: #b06bff; --bq-b: #6fd0ff; --bq-c: #ff7ad9; --bq-base: #08060f;
}

/* ── bund ─────────────────────────────────────────────────────────────── */
#bq-bg .bq-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .035), transparent 60%),
    linear-gradient(180deg, var(--bq-base) 0%, #05060a 55%, var(--bq-base) 100%);
}

/* ── farveskyer ───────────────────────────────────────────────────────── */
/* De ligger inden for safe-area, så de ikke gemmer sig bag ur eller swipe-bar */
#bq-bg .bq-sky {
  position: absolute;
  top:    max(env(safe-area-inset-top, 0px), var(--bq-safe-top, 0px));
  right:  max(env(safe-area-inset-right, 0px), var(--bq-safe-right, 0px));
  bottom: max(env(safe-area-inset-bottom, 0px), var(--bq-safe-bottom, 0px));
  left:   max(env(safe-area-inset-left, 0px), var(--bq-safe-left, 0px));
  /* skyerne maa gerne bløde ud over kanten — men deres udgangspunkt er det
     SYNLIGE område, så de ikke gemmer sig bag ur eller swipe-bar */
  overflow: visible;
}

#bq-bg .bq-cloud {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  mix-blend-mode: screen;
}

/* stor, blød kerne — ingen filter: blur nødvendig */
#bq-bg .c1 {
  width: 78vmax; height: 78vmax;
  left: -18vmax; top: -26vmax;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--bq-a) 55%, transparent) 0%,
              color-mix(in srgb, var(--bq-a) 18%, transparent) 42%,
              transparent 72%);
  opacity: .62;
  animation: bq-breathe-1 26s ease-in-out infinite;
}
#bq-bg .c2 {
  width: 66vmax; height: 66vmax;
  right: -20vmax; top: 4vmax;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--bq-b) 50%, transparent) 0%,
              color-mix(in srgb, var(--bq-b) 15%, transparent) 45%,
              transparent 74%);
  opacity: .56;
  animation: bq-breathe-2 33s ease-in-out infinite;
  animation-delay: -8s;
}
#bq-bg .c3 {
  width: 72vmax; height: 72vmax;
  left: 8vmax; bottom: -34vmax;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--bq-c) 45%, transparent) 0%,
              color-mix(in srgb, var(--bq-c) 12%, transparent) 46%,
              transparent 76%);
  opacity: .50;
  animation: bq-breathe-3 41s ease-in-out infinite;
  animation-delay: -17s;
}

/* "åndedræt": skala, lysstyrke og en lille vandring — meget langsomt */
@keyframes bq-breathe-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);      opacity: .56; }
  50%      { transform: translate3d(2.5vmax, 1.5vmax, 0) scale(1.14); opacity: .70; }
}
@keyframes bq-breathe-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06);   opacity: .50; }
  50%      { transform: translate3d(-3vmax, 2vmax, 0) scale(.94);    opacity: .62; }
}
@keyframes bq-breathe-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);      opacity: .46; }
  50%      { transform: translate3d(1.5vmax, -2.5vmax, 0) scale(1.1); opacity: .56; }
}

/* ── metal: børstet struktur + langsom sheen ──────────────────────────── */
#bq-bg .bq-metal {
  position: absolute;
  inset: 0;
  opacity: .62;
  mix-blend-mode: overlay;
  background-image:
    /* fine "børstede" linjer */
    repeating-linear-gradient(92deg,
      rgba(255, 255, 255, .035) 0px,
      rgba(255, 255, 255, .035) 1px,
      rgba(0, 0, 0, .04) 2px,
      rgba(0, 0, 0, .04) 3px),
    repeating-linear-gradient(2deg,
      rgba(255, 255, 255, .02) 0px,
      rgba(255, 255, 255, .02) 1px,
      rgba(0, 0, 0, .025) 2px,
      rgba(0, 0, 0, .025) 4px),
    /* bred, svag metal-gradient på tværs */
    linear-gradient(115deg,
      rgba(255, 255, 255, .06) 0%,
      rgba(255, 255, 255, 0) 18%,
      rgba(0, 0, 0, .06) 38%,
      rgba(255, 255, 255, .05) 58%,
      rgba(0, 0, 0, .05) 78%,
      rgba(255, 255, 255, .04) 100%);
}

/* sheen: et bredt lysbånd der langsomt glider hen over fladen */
#bq-bg .bq-sheen {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 120%;
  height: 160%;
  transform: rotate(14deg) translate3d(0, 0, 0);
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .05) 42%,
      rgba(255, 255, 255, .10) 50%,
      rgba(255, 255, 255, .05) 58%,
      transparent 100%);
  mix-blend-mode: soft-light;
  animation: bq-sheen 38s ease-in-out infinite;
  will-change: transform;
}
@keyframes bq-sheen {
  0%, 100% { transform: rotate(14deg) translate3d(-18%, 0, 0); }
  50%      { transform: rotate(14deg) translate3d(18%, 0, 0); }
}

/* ── grain (SVG-støj, ~0.4 kB, ingen billedfil) ───────────────────────── */
#bq-bg .bq-grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
  background-size: 160px 160px;
}

/* ── vignette: holder teksten læsbar ──────────────────────────────────── */
#bq-bg .bq-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 52%, rgba(0, 0, 0, .48) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 18%,
                    transparent 82%, rgba(0, 0, 0, .6) 100%);
}

/* ── mobil: mindre flader, blødere og billigere ───────────────────────── */
@media (max-width: 760px) {
  #bq-bg .c1 { width: 105vmax; height: 105vmax; left: -34vmax; top: -34vmax; }
  #bq-bg .c2 { width: 92vmax;  height: 92vmax;  right: -30vmax; top: 12vmax; }
  #bq-bg .c3 { width: 100vmax; height: 100vmax; left: -6vmax; bottom: -42vmax; }
  #bq-bg .bq-metal { opacity: .45; }
  #bq-bg .bq-grain { opacity: .04; }
  #bq-bg .bq-vignette {
    background:
      radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(0, 0, 0, .58) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, transparent 16%,
                      transparent 84%, rgba(0, 0, 0, .66) 100%);
  }
}

/* Meget smalle/shorte skærme: skru ned for bevægelsen, så det ikke støjer */
@media (max-width: 420px) {
  #bq-bg .c1, #bq-bg .c2, #bq-bg .c3 { opacity: .38; }
  #bq-bg .bq-sheen { opacity: .7; }
}

/* ── respektér brugerens ønske om ro ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #bq-bg .bq-cloud,
  #bq-bg .bq-sheen {
    animation: none !important;
  }
  #bq-bg .c1 { opacity: .5; }
  #bq-bg .c2 { opacity: .44; }
  #bq-bg .c3 { opacity: .4; }
}

/* Hvis browseren ikke kender color-mix (ældre Safari/Firefox) */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  /* Ældre Safari/Firefox: samme tema-farver, men uden color-mix.
     Gennemsigtigheden kommer fra elementets opacity i stedet. */
  #bq-bg .c1 { background: radial-gradient(closest-side,
      var(--bq-a) 0%, transparent 72%); opacity: .40; }
  #bq-bg .c2 { background: radial-gradient(closest-side,
      var(--bq-b) 0%, transparent 74%); opacity: .36; }
  #bq-bg .c3 { background: radial-gradient(closest-side,
      var(--bq-c) 0%, transparent 76%); opacity: .32; }
}

/* ── React-siderne (forside, live, bottie, demo) ───────────────────────────
   App'en lægger en uigennemsigtig baggrund paa sin yderste wrapper via
   utility-klassen .bg-[var(--bg-primary)]. Den dækkede auroraen, saa kun
   kanterne var synlige. Vi gør KUN den klasse gennemsigtig (inde i #root),
   så kort og paneler beholder deres egen baggrund. */
#root .bg-\[var\(--bg-primary\)\] {
  background-color: transparent !important;
}


/* ── TYDELIG TEMA-TINT (2026-10-21) ─────────────────────────────────────
   Farve-fingerprint: store, rolige farvevask i hvert sit hjørne, så
   forside (rød/magenta), stats (cyan), rangliste (guld) osv. kan ses
   tydeligt — også på en mørk skærm. Ligger under indholdet. */
#bq-bg .bq-base {
  background:
    radial-gradient(78% 70% at 6% 4%,
      color-mix(in srgb, var(--bq-a) 34%, transparent) 0%,
      transparent 72%),
    radial-gradient(72% 68% at 96% 10%,
      color-mix(in srgb, var(--bq-b) 30%, transparent) 0%,
      transparent 74%),
    radial-gradient(70% 60% at 50% 110%,
      color-mix(in srgb, var(--bq-c) 24%, transparent) 0%,
      transparent 76%),
    linear-gradient(180deg, var(--bq-base) 0%, #05060a 55%, var(--bq-base) 100%);
}


/* ── STACKING-FIX (2026-10-21) ──────────────────────────────────────────
   #bq-bg laa med z-index:-1 bag html's uigennemsigtige baggrund og var
   derfor usynlig (flat black). Læg laget paa z-index:0 og alt indhold
   over det. */
#bq-bg { z-index: 0 !important; }
#root,
body > main,
body > footer { position: relative; z-index: 1; }


/* ── REACT-BG-OFF (2026-10-21) ──────────────────────────────────────────
   React-appen tegner sit eget faste baggrundslag (div[data-page]) oven paa
   #bq-bg og gør farverne graa. Slaa det fra, saa aurora-temaet vises. */
#root [data-page][aria-hidden="true"] { display: none !important; }