/* White-label login-baggrunde: seks animerede presets tegnet i bureauets to farver (--accent, --accent2).
   Markup: <div class="wlbg wlbg--<key>" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
   Bruges bag brandpanelet paa /w/{slug} og som smaa forhaandsvisninger paa /app/settings/white-label. */
.wlbg { position:absolute; inset:0; overflow:hidden; background:linear-gradient(150deg,var(--accent),var(--accent2)); pointer-events:none; }
.wlbg i { position:absolute; display:block; }

/* 1. Nordlys: to store bloede lysfelter der glider langsomt forbi hinanden */
.wlbg--aurora { background:color-mix(in srgb,var(--accent2) 70%,#000); }
.wlbg--aurora i { width:90%; height:90%; border-radius:50%; filter:blur(60px); opacity:.85; }
.wlbg--aurora i:nth-child(1) { background:var(--accent); left:-25%; top:-20%; animation:wlbg-drift 18s ease-in-out infinite alternate; }
.wlbg--aurora i:nth-child(2) { background:var(--accent2); right:-30%; bottom:-25%; animation:wlbg-drift 22s ease-in-out infinite alternate-reverse; }
.wlbg--aurora i:nth-child(3) { background:color-mix(in srgb,var(--accent) 50%,#fff); width:45%; height:45%; left:30%; top:35%; opacity:.35; animation:wlbg-drift 26s ease-in-out infinite alternate; }
.wlbg--aurora i:nth-child(4) { display:none; }

/* 2. Boelger: tre store afrundede flader der roterer langsomt og skaerer bunden i boelger */
.wlbg--waves i { width:220%; height:220%; left:-60%; top:62%; border-radius:43%; }
.wlbg--waves i:nth-child(1) { background:color-mix(in srgb,#fff 14%,transparent); animation:wlbg-spin 24s linear infinite; }
.wlbg--waves i:nth-child(2) { background:color-mix(in srgb,var(--accent2) 55%,transparent); top:70%; animation:wlbg-spin 32s linear infinite reverse; }
.wlbg--waves i:nth-child(3) { background:color-mix(in srgb,var(--accent) 60%,#000 10%); top:78%; animation:wlbg-spin 40s linear infinite; }
.wlbg--waves i:nth-child(4) { display:none; }

/* 3. Svaevende kugler: blanke kugler der langsomt stiger og falder */
.wlbg--orbs i { border-radius:50%; background:radial-gradient(circle at 32% 30%,color-mix(in srgb,#fff 55%,transparent),color-mix(in srgb,var(--accent2) 80%,transparent) 60%); box-shadow:0 30px 60px color-mix(in srgb,#000 20%,transparent); }
.wlbg--orbs i:nth-child(1) { width:34%; aspect-ratio:1; right:8%; top:12%; animation:wlbg-float 11s ease-in-out infinite; }
.wlbg--orbs i:nth-child(2) { width:18%; aspect-ratio:1; left:12%; top:58%; animation:wlbg-float 9s ease-in-out -3s infinite; }
.wlbg--orbs i:nth-child(3) { width:10%; aspect-ratio:1; left:48%; top:30%; animation:wlbg-float 7s ease-in-out -1s infinite; }
.wlbg--orbs i:nth-child(4) { width:24%; aspect-ratio:1; right:22%; bottom:-6%; animation:wlbg-float 13s ease-in-out -6s infinite; }

/* 4. Gitter: et perspektivgitter der ruller mod beskueren under en gloed */
.wlbg--grid { background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 80%,#000),var(--accent)); perspective:320px; }
.wlbg--grid i:nth-child(1) { left:-50%; right:-50%; top:45%; height:120%; transform:rotateX(62deg); transform-origin:top;
    background-image:linear-gradient(color-mix(in srgb,#fff 28%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#fff 28%,transparent) 1px,transparent 1px);
    background-size:44px 44px; animation:wlbg-grid 3.5s linear infinite; mask-image:linear-gradient(180deg,transparent,#000 35%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%); }
.wlbg--grid i:nth-child(2) { width:70%; height:40%; left:15%; top:22%; border-radius:50%; background:var(--accent2); filter:blur(70px); opacity:.8; animation:wlbg-pulse 6s ease-in-out infinite; }
.wlbg--grid i:nth-child(3), .wlbg--grid i:nth-child(4) { display:none; }

/* 5. Farveflow: et roterende farvehjul i begge farver, sloeret til en blank flade */
.wlbg--mesh { background:var(--accent); }
.wlbg--mesh i:nth-child(1) { width:160%; aspect-ratio:1; left:-30%; top:-40%; border-radius:50%; filter:blur(50px);
    background:conic-gradient(from 0deg,var(--accent),var(--accent2),color-mix(in srgb,var(--accent) 60%,#fff),var(--accent2),var(--accent)); animation:wlbg-spin 20s linear infinite; }
.wlbg--mesh i:nth-child(2) { inset:0; background:radial-gradient(circle at 70% 80%,color-mix(in srgb,#000 22%,transparent),transparent 60%); }
.wlbg--mesh i:nth-child(3), .wlbg--mesh i:nth-child(4) { display:none; }

/* 6. Ringe: koncentriske ringe der breder sig ud fra hjoernet som et ekko */
.wlbg--rings { background:linear-gradient(150deg,var(--accent2),var(--accent)); }
.wlbg--rings i { width:40%; aspect-ratio:1; right:-10%; bottom:-10%; border-radius:50%; border:2px solid color-mix(in srgb,#fff 45%,transparent); animation:wlbg-ring 8s ease-out infinite; opacity:0; }
.wlbg--rings i:nth-child(2) { animation-delay:-2s; }
.wlbg--rings i:nth-child(3) { animation-delay:-4s; }
.wlbg--rings i:nth-child(4) { animation-delay:-6s; }

/* Eget billede: daekker panelet, med en toning i primaerfarven saa teksten altid kan laeses */
.wlbg--upload { background-size:cover; background-position:center; }
.wlbg--upload i:nth-child(1) { inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 35%,transparent),color-mix(in srgb,#000 55%,transparent)); }
.wlbg--upload i:nth-child(n+2) { display:none; }

@keyframes wlbg-drift { from { transform:translate(0,0) scale(1); } to { transform:translate(18%,12%) scale(1.15); } }
@keyframes wlbg-spin { to { transform:rotate(360deg); } }
@keyframes wlbg-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14%); } }
@keyframes wlbg-grid { to { background-position:0 44px; } }
@keyframes wlbg-pulse { 0%,100% { opacity:.55; } 50% { opacity:.9; } }
@keyframes wlbg-ring { 0% { transform:scale(.2); opacity:0; } 15% { opacity:1; } 100% { transform:scale(4.2); opacity:0; } }

@media (prefers-reduced-motion: reduce) { .wlbg i { animation:none !important; } .wlbg--rings i:nth-child(1) { opacity:.6; transform:scale(2); } }