/* W8/W13 · Ladebildschirm DWS Team — live als Variante b, Look über data-look (c Tag / b Nacht / a Porzellan).
   Zwei Varianten: data-variant="a" Drohne landet an der Zentrale · "b" Liquid-Glass-Logo.
   Farben nur über die --sp-*-Variablen; data-look schaltet C (Tag) / B (Nacht) / A (Wahl) / live (alter Look). */
#splash{--sp-bg:#f5f5f7;--sp-ink:#1d1d1f;--sp-muted:#6e6e73;--sp-accent:#0a84ff;
  --sp-blob1:rgba(10,132,255,.20);--sp-blob2:rgba(53,208,214,.18);--sp-blob3:rgba(94,92,230,.10);
  --sp-glass:rgba(255,255,255,.55);--sp-edge:rgba(255,255,255,.95);--sp-shade:rgba(10,60,140,.18);
  --sp-mark:#0a84ff;--sp-ground:rgba(10,40,90,.10)}
#splash[data-look="a"]{--sp-bg:linear-gradient(180deg,#eef2f8,#e6ebf3);--sp-ink:#14161a;--sp-muted:#5f6670;--sp-blob1:#cfe3ff;--sp-blob2:#d7f3f4;--sp-blob3:#e3e0ff}
#splash[data-look="b"]{--sp-bg:linear-gradient(180deg,#0b0d12,#07080a);--sp-ink:#f5f5f7;--sp-muted:#9a9aa1;--sp-blob1:rgba(10,132,255,.34);--sp-blob2:rgba(53,208,214,.16);--sp-blob3:rgba(94,92,230,.22);
  --sp-glass:rgba(40,44,52,.5);--sp-edge:rgba(255,255,255,.28);--sp-shade:rgba(0,0,0,.5);--sp-mark:#5eb0ff;--sp-ground:rgba(0,0,0,.35)}
#splash[data-look="c"]{--sp-bg:linear-gradient(180deg,#5aa8ff 0%,#8cc3ff 34%,#cfe4fb 72%,#e4eefa 100%);--sp-ink:#0b1f44;--sp-muted:#3e5677;
  --sp-blob1:rgba(255,255,255,.35);--sp-blob2:rgba(255,255,255,.22);--sp-blob3:rgba(10,90,220,.25);
  --sp-glass:rgba(255,255,255,.28);--sp-edge:rgba(255,255,255,.9);--sp-shade:rgba(10,60,160,.32);--sp-mark:#fff;--sp-ground:rgba(10,60,140,.14)}

#splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:var(--sp-bg);color:var(--sp-ink);
  font:15px/1.4 'Inter Tight',Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  overflow:hidden;contain:strict;transition:opacity .42s cubic-bezier(.2,.7,.2,1),visibility 0s .42s}
#splash.sp-out{opacity:0;visibility:hidden;pointer-events:none}
#splash .sp-blobs{position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(40% 32% at 78% 18%,var(--sp-blob1),transparent 70%),radial-gradient(38% 30% at 18% 62%,var(--sp-blob2),transparent 70%),radial-gradient(42% 34% at 70% 92%,var(--sp-blob3),transparent 70%);
  animation:sp-drift 3s cubic-bezier(.3,.6,.3,1) both}
@keyframes sp-drift{from{transform:translate3d(0,3%,0) scale(1.06)}to{transform:none}}
#splash .sp-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
#splash .sp-word{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transform:translateY(8px);animation:sp-rise .8s cubic-bezier(.2,.8,.2,1) forwards}
#splash .sp-word strong{font-weight:700;font-size:30px;letter-spacing:-.9px}
#splash .sp-word strong span{font-weight:500;color:var(--sp-muted)}
#splash .sp-word small{font:500 12px/1 Inter,-apple-system,system-ui,sans-serif;letter-spacing:.4px;color:var(--sp-muted)}
@keyframes sp-rise{to{opacity:1;transform:none}}

/* ---------- Variante a · Drohne landet an der Zentrale ---------- */
#splash[data-variant="a"] .sp-scene{position:relative;width:min(100vw,440px);aspect-ratio:1;margin-bottom:-40px}
#splash[data-variant="a"] canvas{width:100%;height:100%;display:block;
  -webkit-mask:radial-gradient(closest-side,#000 58%,transparent 100%);mask:radial-gradient(closest-side,#000 58%,transparent 100%);
  opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
#splash[data-variant="a"].sp-has-frame canvas{opacity:1;transform:none}
#splash[data-variant="a"] .sp-word{animation-delay:.18s}
#splash[data-variant="a"].sp-leaving .sp-scene{transform:scale(1.08);opacity:0;filter:blur(6px);transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .4s ease,filter .4s ease}
#splash[data-variant="a"].sp-leaving .sp-word{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease}
#splash[data-variant="a"] .sp-mini{display:none}

/* ---------- Variante b · Liquid-Glass-Logo ---------- */
#splash .sp-tile{position:relative;width:128px;height:128px;border-radius:34px;isolation:isolate;
  background:var(--sp-glass);backdrop-filter:blur(18px) saturate(1.9);-webkit-backdrop-filter:blur(18px) saturate(1.9);
  box-shadow:inset 0 1px 0 var(--sp-edge),inset 0 -1px 0 rgba(0,0,0,.05),inset 1px 0 0 rgba(255,255,255,.4),0 18px 40px -12px var(--sp-shade),0 2px 6px rgba(0,0,0,.06);
  transform-origin:50% 50%;opacity:0;transform:scale(.82) translateY(10px);animation:sp-pop .85s cubic-bezier(.2,1.25,.35,1) .08s forwards}
@keyframes sp-pop{to{opacity:1;transform:none}}
/* W13e (Dirigent 14:30, Zackenrand links): Der frühere Brechungsfilter backdrop-filter:url(#sp-refraction) am 7-px-Rand rechnete nur Chromium (Android/A22),
   dort franste er die Kante aus; iOS ignorierte ihn. Jetzt überall gleich: glatte 1,5-px-Verlaufs-Lichtkante, folgt dem Radius. */
#splash .sp-tile:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:linear-gradient(140deg,var(--sp-edge),rgba(255,255,255,.3) 32%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#splash[data-look="b"] .sp-tile:before{background:linear-gradient(140deg,rgba(255,255,255,.38),rgba(255,255,255,.1) 32%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.16))}
/* Lichtkante, die einmal über das Glas wandert */
#splash .sp-tile:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 46%,rgba(255,255,255,.12) 54%,transparent 66%) no-repeat;background-size:260% 100%;background-position:120% 0;
  mix-blend-mode:soft-light;animation:sp-sheen 1.25s cubic-bezier(.4,0,.2,1) .5s forwards}
@keyframes sp-sheen{to{background-position:-60% 0}}
#splash .sp-tile svg{position:absolute;inset:5px;width:118px;height:118px;overflow:visible;color:var(--sp-mark);filter:drop-shadow(0 4px 10px var(--sp-shade))}
#splash .sp-tile .sp-body{transform-origin:50px 50px;animation:sp-body .95s cubic-bezier(.2,1.1,.3,1) .18s both}
@keyframes sp-body{from{transform:scale(.55) rotate(-45deg);opacity:0}to{transform:none;opacity:1}}
#splash .sp-tile .sp-arcs{transform-origin:50px 50px;animation:sp-arcs 1.25s cubic-bezier(.15,.8,.25,1) .25s both}
@keyframes sp-arcs{from{transform:rotate(-140deg) scale(1.25);opacity:0}to{transform:none;opacity:1}}
#splash .sp-ground{position:absolute;left:50%;bottom:-22px;width:110px;height:16px;margin-left:-55px;border-radius:50%;background:radial-gradient(closest-side,var(--sp-ground),transparent);filter:blur(2px);opacity:0;animation:sp-rise .8s ease .45s forwards}
#splash[data-variant="b"] .sp-word{animation-delay:.6s}
#splash[data-variant="b"] .sp-scene{display:none}
/* Übergang b: Kachel fliegt ins Logo der Kopfleiste (Werte setzt splash.js) */
#splash.sp-leaving .sp-tile{transition:transform .62s cubic-bezier(.3,.7,.1,1),border-radius .62s ease,opacity .22s ease .48s;animation:none;opacity:1}
#splash.sp-leaving .sp-ground,#splash[data-variant="b"].sp-leaving .sp-word{opacity:0;transition:opacity .2s ease;animation:none}
#splash[data-variant="b"].sp-leaving{background:transparent;transition:background .45s ease,opacity .3s ease .32s,visibility 0s .62s}
#splash[data-variant="b"].sp-leaving .sp-blobs{opacity:0;transition:opacity .4s ease}

/* W13 Punkt 12 (Lars 11:00 „Intro wirkt leer“): Ladebildschirm leitet über — das Logo landet in der Leiste,
   die Inhalte fliegen gestaffelt ein (≤ 0,8 s gesamt, kein Warten). Solange der Ladebildschirm steht, warten die Einflüge. */
html.sp-active #main>*{animation-play-state:paused}
html.sp-reveal .brand span,html.sp-reveal header .me,html.sp-reveal .look-btn,html.sp-reveal #preview-slot>*,html.sp-reveal .dock,html.sp-reveal .fab{animation:sp-app .4s cubic-bezier(.2,.8,.2,1) both}
html.sp-reveal .brand span{animation-delay:.02s}html.sp-reveal header .me,html.sp-reveal .look-btn{animation-delay:.05s}
html.sp-reveal #preview-slot>*{animation-delay:.08s}html.sp-reveal .dock{animation-delay:.11s}html.sp-reveal .fab{animation-delay:.3s}
/* #main behält seine rise-Animation (sonst zweiter Einflug beim Aufräumen), nur die Staffel verschiebt sich hinter die Leiste */
html.sp-reveal #main>*{animation-delay:.14s}html.sp-reveal #main>*:nth-child(2){animation-delay:.19s}html.sp-reveal #main>*:nth-child(3){animation-delay:.24s}html.sp-reveal #main>*:nth-child(n+4){animation-delay:.28s}
@keyframes sp-app{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
html.sp-hide-brand .brand img{opacity:0}
html .brand img{transition:opacity .18s ease}

/* Bewegung reduzieren: keine Bewegung, nur ruhiges Ein-/Ausblenden */
@media (prefers-reduced-motion:reduce){
  #splash *,#splash *:before,#splash *:after{animation:none!important;transition:none!important}
  #splash .sp-word,#splash .sp-tile,#splash .sp-ground{opacity:1;transform:none}
  #splash[data-variant="a"] canvas{opacity:1;transform:none}
  #splash{transition:opacity .2s linear,visibility 0s .2s}
  html.sp-reveal .brand span,html.sp-reveal header .me,html.sp-reveal .look-btn,html.sp-reveal #preview-slot>*,html.sp-reveal .dock,html.sp-reveal .fab{animation:none}
}