/* Kairo – Start-Animation (≈ 2,5 s) · Zeitplan siehe splash.js
   Farben: Kairo Blau #0A84FF · Schwarz #000 · Kachel #1A1C20→#000 · Signal Weiß #F4F6FA · Nebel #8A93A3
   Bewegung: eine Kurve für alles Auftauchende (sanft auslaufend), eine Feder für die Kerze – nichts hüpft, nichts blinkt. */
.splash { --T: min(108px, 20vw); --ease: cubic-bezier(.16, 1, .3, 1); --io: cubic-bezier(.65, 0, .35, 1);
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden;
  font-synthesis: none; -webkit-font-smoothing: antialiased; }
.sp-bg { position: absolute; inset: 0; background: #000; }
/* reines OLED-Schwarz – kein farbiges Hintergrundlicht */

/* 1) Kurslinie: zieht sich aus der Mitte auf, wird zum Docht */
.sp-line { position: absolute; left: 50%; top: 50%; width: min(60vw, 520px); height: 1.5px; margin: -1px 0 0 calc(min(60vw, 520px) / -2);
  background: linear-gradient(90deg, transparent, rgba(10, 132, 255, .9) 35%, #8cc4ff 50%, rgba(10, 132, 255, .9) 65%, transparent);
  box-shadow: 0 0 12px rgba(10, 132, 255, .8); transform: scaleX(0); opacity: 0;
  animation: sp-line .75s var(--io) 0s forwards; }

.sp-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--T) * .34);
  transform: translateY(-1.5vh); }
.sp-lock { display: flex; align-items: center; gap: calc(var(--T) * .3);
  transform: translateX(calc(var(--T) * 1.575));
  animation: sp-slide .75s var(--io) 1.32s forwards; }
.sp-mark { position: relative; width: var(--T); height: var(--T); flex: none; border-radius: 22.4%; }
.sp-mark svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }

/* 4) Kachel materialisiert sich hinter dem Zeichen */
.sp-tile { position: absolute; inset: 0; border-radius: 22.4%; opacity: 0; transform: scale(1.14);
  background: radial-gradient(130% 110% at 50% 0%, #1d2026 0%, #0a0b0d 55%, #000 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .08),
              0 calc(var(--T) * .22) calc(var(--T) * .6) rgba(0, 0, 0, .7);
  animation: sp-tile .8s var(--ease) 1.08s forwards; }

/* 2) Kerze: Docht aus der Mitte, Körper federt auf, Leuchten blüht */
.sp-wick { transform-box: view-box; transform-origin: 316.5px 496px; transform: scaleY(0);
  animation: sp-grow .55s var(--ease) .38s forwards; }
.sp-body { transform-box: view-box; transform-origin: 315px 672px; transform: scaleY(0);
  animation: sp-spring .7s cubic-bezier(.3, .7, .3, 1) .56s forwards; }
.sp-glow { opacity: 0; animation: sp-glow 1.1s ease-out .6s forwards; }

/* 3) Klingen des K mit Bewegungsunschärfe */
.sp-arm { transform-box: view-box; opacity: 0; }
.sp-up { transform: translate(120px, -120px); filter: blur(10px); animation: sp-arm .7s var(--ease) .86s forwards; }
.sp-lo { transform: translate(120px, 120px); filter: blur(10px); animation: sp-arm .7s var(--ease) .96s forwards; }

/* 4b) Lichtreflex über das Zeichen */
.sp-shine { position: absolute; inset: 0; border-radius: 22.4%; overflow: hidden; pointer-events: none; }
.sp-shine::before { content: ""; position: absolute; inset: -30% -90%;
  background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .16) 50%, transparent 57%);
  transform: translateX(-70%); animation: sp-shine .9s var(--io) 1.3s forwards; }

/* 5) Wortmarke: Buchstaben werden scharf, Abstände ziehen sich zusammen */
.sp-word { width: calc(var(--T) * 2.85); height: calc(var(--T) * .719); flex: none; }
.sp-word svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp-l { fill: #f4f6fa; opacity: 0; transform-box: view-box; filter: blur(7px); }
.sp-l1 { transform: translateX(-34px); animation: sp-letter .8s var(--ease) 1.42s forwards; }
.sp-l2 { transform: translateX(-14px); animation: sp-letter .8s var(--ease) 1.48s forwards; }
.sp-l3 { transform: translateX(14px);  animation: sp-letter .8s var(--ease) 1.60s forwards; }
.sp-l4 { transform: translateX(34px);  animation: sp-letter .8s var(--ease) 1.66s forwards; }
.sp-wc { fill: #0a84ff; transform-box: view-box; transform-origin: 464.7px 382px; transform: scaleY(0);
  animation: sp-spring .6s cubic-bezier(.3, .7, .3, 1) 1.54s forwards; }

/* 6) Unterzeile + Ladelinie */
.sp-tag { font: 600 clamp(10px, 1.6vw, 12.5px)/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  letter-spacing: .42em; text-transform: uppercase; color: #8a93a3; padding-left: .42em; opacity: 0;
  animation: sp-tag 1s var(--ease) 1.82s forwards; }
.sp-load { width: calc(var(--T) * 1.4); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden;
  opacity: 0; transition: opacity .4s ease .35s; }
.sp-load i { display: block; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, #0a84ff, transparent);
  transform: translateX(-100%); }
.splash.waiting .sp-load { opacity: 1; }
.splash.waiting .sp-load i { animation: sp-load 1.1s var(--io) infinite; }

/* Übergang: Logo zoomt sanft weg, die App blendet ein */
.splash.exit { pointer-events: none; }
.splash.exit .sp-stage { transition: transform .56s cubic-bezier(.5, 0, .75, 0), opacity .42s ease-in .08s, filter .5s ease-in;
  transform: translateY(-1.5vh) scale(1.08); opacity: 0; filter: blur(6px); }
.splash.exit .sp-bg { transition: opacity .5s ease-in .06s; opacity: 0; }
.splash.exit .sp-load { transition: opacity .15s; opacity: 0; }

/* Kurzfassung ab dem zweiten Öffnen (≈ 0,9 s): fertiges Logo blendet ruhig ein */
.splash.short *, .splash.short *::before, .splash.short *::after { animation: none !important; }
.splash.short .sp-line, .splash.short .sp-tag { display: none; }
.splash.short .sp-lock { transform: none; }
.splash.short .sp-tile { opacity: 1; transform: none; }
.splash.short .sp-wick, .splash.short .sp-body, .splash.short .sp-wc { transform: none; }
.splash.short .sp-arm, .splash.short .sp-l { transform: none; opacity: 1; filter: none; }
.splash.short .sp-glow { opacity: .5; }
.splash.short .sp-stage { opacity: 0; transform: translateY(-1.5vh) scale(.965); animation: sp-quick .5s var(--ease) .05s forwards !important; }
.splash.short .sp-shine::before { animation: sp-shine .8s var(--io) .2s forwards !important; }

/* „Bewegung reduzieren“: fertiges Logo, danach sanftes Ausblenden */
.splash.reduce *, .splash.reduce *::before, .splash.reduce *::after { animation: none !important; }
.splash.reduce .sp-lock { transform: none; }
.splash.reduce .sp-tile { opacity: 1; transform: none; }
.splash.reduce .sp-wick, .splash.reduce .sp-body, .splash.reduce .sp-wc { transform: none; }
.splash.reduce .sp-arm, .splash.reduce .sp-l { transform: none; opacity: 1; filter: none; }
.splash.reduce .sp-glow { opacity: .5; } .splash.reduce .sp-line { display: none; }
.splash.reduce .sp-tag { opacity: 1; }
.splash.reduce.exit .sp-stage { transform: none; filter: none; }

@keyframes sp-fade    { to { opacity: 1; } }
@keyframes sp-line    { 0% { transform: scaleX(0); opacity: 0; } 35% { opacity: 1; } 70% { transform: scaleX(1); opacity: 1; }
                        100% { transform: scaleX(.02); opacity: 0; } }
@keyframes sp-grow    { to { transform: scaleY(1); } }
@keyframes sp-spring  { 0% { transform: scaleY(0); } 70% { transform: scaleY(1.06); } 100% { transform: scaleY(1); } }
@keyframes sp-glow    { 0% { opacity: 0; } 45% { opacity: .9; } 100% { opacity: .5; } }
@keyframes sp-arm     { to { opacity: 1; transform: translate(0, 0); filter: blur(0); } }
@keyframes sp-tile    { to { opacity: 1; transform: scale(1); } }
@keyframes sp-shine   { to { transform: translateX(70%); } }
@keyframes sp-slide   { to { transform: translateX(0); } }
@keyframes sp-letter  { to { opacity: 1; transform: translateX(0); filter: blur(0); } }
@keyframes sp-tag     { from { opacity: 0; letter-spacing: .62em; } to { opacity: 1; letter-spacing: .42em; } }
@keyframes sp-quick   { to { opacity: 1; transform: translateY(-1.5vh) scale(1); } }
@keyframes sp-load    { to { transform: translateX(250%); } }