/* =====================================================================
   VORLUX Academy — « BG PRO »: the professional digital background
   system (owner order 2026-10-28 21:10 « bghet Background Digital
   Professional »). ONE system for the whole flagship, both themes,
   superseding the FLIGHTFIELD recipe in site.css — the same digital
   world as Bab Almania (A-1) and the journey field, one language
   everywhere. Six layers, restraint first (premium, subtle):

     L1  deep base gradient          body::before · bottom layer
     L2  aurora mesh (brand family)  body::before · very slow drift
     L3  diagonal light rays         body::before · 115°, house angle
     L4  soft vignette               body::before · top layer
     L5  dissolving digital grid     body::after  · lines + dots
     L6  star / particle field       body::after  · gentle twinkle

   The falcon's FLIGHT-CONTOUR rings remain inside L2's stack — they
   are the house geometry of this field. Entry pages (auth card /
   start screen) keep their great journey arc above the same layers
   (the body:has(...) variants below, arcs byte-identical).

   Pure CSS — zero assets, zero requests, ≈0 added page weight (one
   shared cached stylesheet). Animation touches transform / opacity
   only (GPU). prefers-reduced-motion and small screens get the
   simplified static frame; content is never touched.

   LOAD ORDER: linked LAST in every page's <head> (after site.css,
   app.css and page CSS) so these declarations win cascade ties
   against the FLIGHTFIELD rules they replace.
   ===================================================================== */

/* BG-PRO owns its field colours. Dark keeps the tuned deep-field
   balance. LIGHT was strengthened twice: first a step above the old
   FLIGHTFIELD mix, then again on the owner's verdict of 2026-10-28
   23:45 (« background f mode light matatbnch mzn » — his own desktop
   screenshot read almost flat white): on the pure-white ground the
   aurora washes, the steel-blue grid and the specks must be
   unmistakable at a glance, in the hero and mid-page, while panels
   keep their fills and text contrast is untouched. */
:root{
  --bgp-vig:rgba(16,38,84,.10);
  --bgp-glow1:rgba(46,155,255,.38);--bgp-glow2:rgba(124,92,255,.30);--bgp-glow3:rgba(56,225,255,.27);
  --bgp-arc:rgba(28,90,180,.17);--bgp-arc2:rgba(28,90,180,.11);
  --bgp-ray:rgba(90,165,245,.14);--bgp-grid:rgba(28,90,180,.18);
  --bgp-dot:rgba(28,90,180,.32);--bgp-star:rgba(56,110,200,.85);
}
[data-theme="dark"]{
  --bgp-vig:rgba(1,5,16,.46);
  --bgp-glow1:rgba(46,155,255,.26);--bgp-glow2:rgba(124,92,255,.21);--bgp-glow3:rgba(56,225,255,.14);
  --bgp-arc:rgba(140,195,255,.09);--bgp-arc2:rgba(140,195,255,.06);
  --bgp-ray:rgba(150,205,255,.08);--bgp-grid:rgba(120,175,255,.075);
  --bgp-dot:rgba(120,175,255,.14);--bgp-star:rgba(200,228,255,.95);
}

/* ——— THE GROUND ITSELF (root-cause fix, found by pixel probe) ———
   site.css gives body its own background:var(--bg), and body is
   positioned but creates NO stacking context — so the field
   pseudos (negative z-index) escape into the root context and the
   body's opaque background paints OVER them: the whole
   FLIGHTFIELD recipe (old and new) stayed invisible on standard
   pages; only local layers (auth layout, Bab Almania) ever
   showed. The surgical fix is isolation: with it, body becomes a
   stacking context, its own background paints FIRST inside that
   context, and the negative-z-index field paints directly above
   it, below the content. body{background:var(--bg)} itself is NOT
   touched — the dark-scroll regression asserts it (dark-flash
   law), and isolation creates no containing block for fixed
   elements, so splash / walls / tab bars are unaffected. */
body{isolation:isolate}

/* ——— L1–L4 · base + aurora + contours + rays + vignette ——— */
body::before{content:"";position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(118% 92% at 50% 38%,transparent 56%,var(--bgp-vig) 100%),
    repeating-linear-gradient(115deg,transparent 0 150px,var(--bgp-ray) 190px,transparent 228px,transparent 330px,var(--bgp-ray) 366px,transparent 404px),
    repeating-radial-gradient(circle at 88% -14%,var(--bgp-arc) 0 1.5px,transparent 1.5px 118px),
    repeating-radial-gradient(circle at -6% 108%,var(--bgp-arc2) 0 1.5px,transparent 1.5px 168px),
    radial-gradient(640px 500px at 10% 4%,var(--bgp-glow1),transparent 64%),
    radial-gradient(780px 580px at 88% 16%,var(--bgp-glow2),transparent 64%),
    radial-gradient(580px 640px at 62% 96%,var(--bgp-glow3),transparent 64%),
    radial-gradient(440px 440px at 34% 58%,var(--bgp-glow2),transparent 66%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 58%,var(--bg) 135%);
  animation:bgProDrift 64s ease-in-out infinite alternate}
@keyframes bgProDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(1.8%,1.4%,0) scale(1.045)}}

/* ——— L5–L6 · dissolving grid (lines + dots) + star field ——— */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(var(--bgp-star) 1.1px,transparent 1.6px),
    radial-gradient(var(--bgp-star) .8px,transparent 1.3px),
    radial-gradient(var(--bgp-star) 1px,transparent 1.5px),
    linear-gradient(var(--bgp-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bgp-grid) 1px,transparent 1px),
    radial-gradient(var(--bgp-dot) 1.2px,transparent 1.9px);
  background-size:170px 170px,260px 260px,390px 390px,100% 132px,132px 100%,44px 44px;
  background-position:0 0,83px 121px,190px 47px,0 0,0 0,0 0;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 46%,rgba(0,0,0,.18) 76%,transparent 95%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 46%,rgba(0,0,0,.18) 76%,transparent 95%);
  animation:bgProTwinkle 9s ease-in-out infinite alternate}
@keyframes bgProTwinkle{from{opacity:.86}to{opacity:1}}

/* Phones / tablets (mobile-fix wave tuning, carried over): the field
   stays alive further down the viewport than on desktop. */
@media (max-width:1023.98px){
  :root{
    --bgp-glow1:rgba(46,155,255,.46);--bgp-glow2:rgba(124,92,255,.37);--bgp-glow3:rgba(56,225,255,.32);
    --bgp-arc:rgba(28,90,180,.21);--bgp-arc2:rgba(28,90,180,.14);
    --bgp-ray:rgba(90,165,245,.19);--bgp-grid:rgba(28,90,180,.21);
    --bgp-dot:rgba(28,90,180,.36);--bgp-star:rgba(56,110,200,.92);
  }
  [data-theme="dark"]{
    --bgp-glow1:rgba(46,155,255,.40);--bgp-glow2:rgba(124,92,255,.34);--bgp-glow3:rgba(56,225,255,.24);
    --bgp-arc:rgba(140,195,255,.16);--bgp-arc2:rgba(140,195,255,.11);
    --bgp-ray:rgba(150,205,255,.13);--bgp-grid:rgba(120,175,255,.13);
    --bgp-dot:rgba(120,175,255,.25);--bgp-star:rgba(200,228,255,1);
  }
  body::after{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.62) 55%,rgba(0,0,0,.30) 90%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.62) 55%,rgba(0,0,0,.30) 90%)}
}

/* Small screens: simplified frame — no drift, sparser grid, calmer
   star layer (same doctrine as the estate's ≤719 px rule). */
@media (max-width:719px){
  body::before{animation:none}
  body::after{background-size:140px 140px,210px 210px,300px 300px,100% 176px,176px 100%,54px 54px;
    animation:none;opacity:.55}
  /* Light only (owner verdict 2026-10-28 23:45): the .55 static
     frame halved the small-screen field a second time — light
     phones keep most of it; dark is untouched. */
  html:not([data-theme="dark"]) body::after{opacity:.85}
}

/* Reduced motion: the field is a still image. */
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none !important}
}

/* ——— Entry pages: the great journey arc over the PRO layers ———
   (login / registrieren / start — the arc stays the signature of
   arrival; everything beneath it is the PRO recipe.) */
body:has(.auth-card)::before,body:has(.vx-start)::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2338E1FF'/%3E%3Cstop offset='.5' stop-color='%232E9BFF'/%3E%3Cstop offset='1' stop-color='%237C5CFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-30 830 C 430 780, 820 430, 1470 110' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M-30 866 C 430 816, 820 466, 1470 146' fill='none' stroke='url(%23g)' stroke-width='1.5' stroke-dasharray='2 10' stroke-linecap='round' opacity='.32'/%3E%3Ccircle cx='30' cy='804' r='6' fill='%2338E1FF'/%3E%3Ccircle cx='30' cy='804' r='16' fill='none' stroke='%2338E1FF' stroke-opacity='.4'/%3E%3Ccircle cx='1410' cy='130' r='7' fill='%237C5CFF'/%3E%3Ccircle cx='1410' cy='130' r='18' fill='none' stroke='%237C5CFF' stroke-opacity='.45'/%3E%3Ccircle cx='1410' cy='130' r='31' fill='none' stroke='%237C5CFF' stroke-opacity='.2'/%3E%3C/svg%3E") center/cover no-repeat,
    radial-gradient(118% 92% at 50% 38%,transparent 56%,var(--bgp-vig) 100%),
    repeating-radial-gradient(circle at 88% -14%,var(--bgp-arc) 0 1.5px,transparent 1.5px 118px),
    radial-gradient(640px 500px at 10% 4%,var(--bgp-glow1),transparent 64%),
    radial-gradient(780px 580px at 88% 16%,var(--bgp-glow2),transparent 64%),
    radial-gradient(580px 640px at 62% 96%,var(--bgp-glow3),transparent 64%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 58%,var(--bg) 135%);
}
/* Portrait framing of the arc (same rule as the FLIGHTFIELD wave:
   below 720 px the tall-canvas route keeps both nodes on stage). */
@media (max-width:719.98px){
  body:has(.auth-card)::before,body:has(.vx-start)::before{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 550 1200' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2338E1FF'/%3E%3Cstop offset='.5' stop-color='%232E9BFF'/%3E%3Cstop offset='1' stop-color='%237C5CFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-20 1060 C 180 1000, 320 560, 570 120' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M-20 1096 C 180 1036, 320 596, 570 156' fill='none' stroke='url(%23g)' stroke-width='1.5' stroke-dasharray='2 10' stroke-linecap='round' opacity='.32'/%3E%3Ccircle cx='52' cy='1034' r='6' fill='%2338E1FF'/%3E%3Ccircle cx='52' cy='1034' r='16' fill='none' stroke='%2338E1FF' stroke-opacity='.4'/%3E%3Ccircle cx='494' cy='146' r='7' fill='%237C5CFF'/%3E%3Ccircle cx='494' cy='146' r='18' fill='none' stroke='%237C5CFF' stroke-opacity='.45'/%3E%3Ccircle cx='494' cy='146' r='31' fill='none' stroke='%237C5CFF' stroke-opacity='.2'/%3E%3C/svg%3E") center/cover no-repeat,
      radial-gradient(118% 92% at 50% 38%,transparent 56%,var(--bgp-vig) 100%),
      repeating-radial-gradient(circle at 88% -14%,var(--bgp-arc) 0 1.5px,transparent 1.5px 118px),
      radial-gradient(640px 500px at 10% 4%,var(--bgp-glow1),transparent 64%),
      radial-gradient(780px 580px at 88% 16%,var(--bgp-glow2),transparent 64%),
      radial-gradient(580px 640px at 62% 96%,var(--bgp-glow3),transparent 64%),
      linear-gradient(180deg,var(--bg) 0%,var(--bg2) 58%,var(--bg) 135%);
  }
}

/* ——— Sections are transparent by default (generalisation of the
   journey fix, owner order 2026-10-28): the digital field is the
   ground of every page; only panels / cards carry fill. The two
   rules below retire, with matching specificity, the opaque --bg2
   band (site.css, desktop) and its 55 % mobile wash. ——— */
section.section,section.section:nth-of-type(even){background:transparent}
section.section:nth-of-type(even):not(.journey){background:transparent}