/* =====================================================================
   Finance Suite – Intro-Splash
   Fiat-Symbole fliegen durch einen Lichtstrahl und treten als Krypto-
   Symbole wieder aus.

   Rein additiv: eigene Datei, eigene Klassen. :root, .tile und alle
   bestehenden Regeln in app.css bleiben unangetastet. Es werden nur die
   dort definierten Tokens verwendet.
   ===================================================================== */

.splash {
  /* Lokale RGB-Fassung von --accent (#5b8cff) für mehrstufige Glows.
     Bewusst hier und nicht in :root, damit app.css unverändert bleibt. */
  --accent-rgb: 91, 140, 255;

  /* Ablauf – muss mit den Konstanten in splash.js übereinstimmen */
  --fly-dur: 5.5s;
  --stagger: 1.4s;
  --lead-in: .3s;

  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Fest, nicht var(--bg-deep): body.light-mode würde den Intro-Screen
     sonst aufhellen und die Glow-Effekte unsichtbar machen. */
  background: #05060d !important;
  overflow: hidden;

  /* Sicherheitsnetz: blendet auch dann aus, wenn splash.js nicht lädt.
     Volle Kette 11.2s; die Deckkraft bleibt bis 92.9 % (= 10.4s) bei 1
     und fällt erst danach – deckungsgleich mit splash.js. */
  animation: splash-out 11.2s ease forwards;
}

/* Gegenstück zum Ausblenden: das Dashboard blendet parallel ein.
   Die Animation ist zugleich das Sicherheitsnetz – ohne sie bliebe
   .shell dauerhaft unsichtbar, falls splash.js nicht lädt. */
.shell {
  opacity: 0;
  animation: shell-in .8s ease 10.4s forwards;
}
@keyframes shell-in { to { opacity: 1; } }

.shell.is-visible {
  opacity: 1;
  animation: none;
  transition: opacity .8s ease;
}

/* Atmosphärische Lichtquelle von oben – warmer Blau-Violett-Schimmer. */
.splash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 50% at 50% 0%,
    rgba(91, 140, 255, .18) 0%,
    rgba(160, 107, 255, .08) 40%,
    transparent 70%
  );
}

@keyframes splash-out {
  0%, 92.9% { opacity: 1; }
  100%      { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Sofort-Abbruch per Klick/Taste (siehe splash.js) */
.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .8s ease, visibility .8s ease;
  animation: none;
}

/* --- Bahn durch die vertikale Mitte -------------------------------------- */
.splash-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  perspective: 600px;          /* gibt den Symbolen räumliche Tiefe */
  transform-style: preserve-3d;
}

/* --- Lichtstrahl in der Mitte -------------------------------------------- */
.splash-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 280px;             /* ca. 2.5× Symbolhöhe (5rem ≈ 80px) */
  border-radius: 2px;

  /* Enden sanft auslaufen lassen – fokussiertes Lichtschwert
     statt endloser Linie. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #fff 15%, #fff 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #fff 15%, #fff 85%, transparent);
  background: linear-gradient(
    180deg,
    transparent,
    var(--accent) 12%,
    #fff 50%,
    var(--accent-2) 88%,
    transparent
  );
  box-shadow:
    0 0 6px 3px #fff,
    0 0 20px 10px var(--accent),
    0 0 60px 30px rgba(var(--accent-rgb), .7),
    0 0 120px 60px rgba(var(--accent-rgb), .35),
    0 0 200px 100px rgba(var(--accent-rgb), .15);
  animation:
    beam-flicker .12s steps(1, end) infinite,
    beam-arc .12s steps(1, end) infinite;
}

/* Der box-shadow oben wird von der Maske mit abgeschnitten. Diese breite
   Ebene liegt innerhalb der Maske und läuft daher oben/unten genauso
   sanft aus wie der Strahl selbst. */
.splash-beam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 400px;
  height: 100%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 14% 48% at center, rgba(255, 255, 255, .35), transparent 70%),
    radial-gradient(ellipse 26% 52% at center, rgba(var(--accent-rgb), .75), transparent 72%),
    radial-gradient(ellipse 55% 62% at center, rgba(var(--accent-rgb), .32), transparent 74%);
  pointer-events: none;
}

/* Zuckender Lichtbogen statt gleichmäßigem Puls – steps(1) lässt die
   Zustände hart springen. translateY(-50%) hält den Strahl dabei zentriert. */
@keyframes beam-flicker {
  0%   { transform: translateX(-50%) scaleX(1)   translateY(-50%); opacity: 1;   }
  8%   { transform: translateX(-51%) scaleX(1.9) translateY(-50%); opacity: .6;  }
  16%  { transform: translateX(-50%) scaleX(0.7) translateY(-50%); opacity: 1;   }
  25%  { transform: translateX(-49%) scaleX(2.5) translateY(-50%); opacity: .5;  }
  33%  { transform: translateX(-50%) scaleX(0.9) translateY(-50%); opacity: 1;   }
  41%  { transform: translateX(-51%) scaleX(1.4) translateY(-50%); opacity: .75; }
  50%  { transform: translateX(-50%) scaleX(0.6) translateY(-50%); opacity: 1;   }
  58%  { transform: translateX(-49%) scaleX(2.1) translateY(-50%); opacity: .55; }
  66%  { transform: translateX(-50%) scaleX(1.1) translateY(-50%); opacity: 1;   }
  75%  { transform: translateX(-51%) scaleX(1.7) translateY(-50%); opacity: .65; }
  83%  { transform: translateX(-50%) scaleX(0.8) translateY(-50%); opacity: 1;   }
  91%  { transform: translateX(-49%) scaleX(2.3) translateY(-50%); opacity: .5;  }
  100% { transform: translateX(-50%) scaleX(1)   translateY(-50%); opacity: 1;   }
}

/* Der Glow springt zwischen Blau und Violett – wie die Farbtemperatur
   eines echten Lichtbogens. */
@keyframes beam-arc {
  0%, 100% {
    box-shadow:
      0 0 6px 3px #fff,
      0 0 20px 10px var(--accent),
      0 0 60px 30px rgba(var(--accent-rgb), .7),
      0 0 120px 60px rgba(var(--accent-rgb), .35),
      0 0 200px 100px rgba(var(--accent-rgb), .15);
  }
  50% {
    box-shadow:
      0 0 7px 4px #fff,
      0 0 24px 12px var(--accent-2),
      0 0 68px 34px rgba(160, 107, 255, .7),
      0 0 132px 66px rgba(160, 107, 255, .38),
      0 0 210px 105px rgba(160, 107, 255, .16);
  }
}

/* --- Slogan über dem Strahl ----------------------------------------------- */
.splash-slogan {
  position: absolute;
  left: 0;
  width: 100%;
  /* Strahl ist 280px hoch und zentriert -> Oberkante liegt 140px über der
     Mitte. 200px hält die geforderten 60px Abstand ein (160px ergäbe nur 20px). */
  bottom: calc(50% + 200px);
  margin: 0;
  text-align: center;
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .25em;
  text-indent: .25em;        /* gleicht den Nachlauf des letzten Zeichens aus */
  text-transform: uppercase;
  color: var(--text-strong);
  text-shadow:
    0 0 40px var(--accent),
    0 0 80px rgba(91, 140, 255, .5),
    0 0 2px #fff;

  opacity: 0;
  transform: translateY(10px);
  animation: slogan-in 1.2s ease .5s forwards;
}

@keyframes slogan-in {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Fliegende Symbole ---------------------------------------------------- */
.sym {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(-120vw);
  animation: sym-fly var(--fly-dur) linear both;
  will-change: transform;
}

@keyframes sym-fly {
  from { transform: translate(-50%, -50%) translateX(-120vw); }
  to   { transform: translate(-50%, -50%) translateX(120vw); }
}

/* Eigenes Element, damit Flug (translateX) und Taumeln (rotateY)
   sich nicht dieselbe transform-Eigenschaft streitig machen. */
.sym-glyph {
  display: block;
  font-family: var(--font), "Apple Symbols", "Segoe UI Symbol", sans-serif;
  font-size: 5rem;           /* ca. halbe Strahlhöhe */
  font-weight: 900;
  line-height: 1;
  color: #eef2fb;
  transform-style: preserve-3d;
  animation: sym-tumble 1.15s linear infinite;

  /* Metallic: harte Kanten nach unten (Volumen) + weiches Umgebungslicht */
  text-shadow:
    0 1px 0 #c3cbdd,
    0 2px 0 #a6aec4,
    0 3px 0 #8a93ab,
    0 4px 0 #6e7791,
    0 5px 0 #545d76,
    0 8px 16px rgba(0, 0, 0, .65),
    0 0 26px rgba(255, 255, 255, .35);
  transition: color .18s ease, text-shadow .18s ease;
}

@keyframes sym-tumble {
  0%   { transform: rotateY(-45deg) rotateZ(-8deg); }
  50%  { transform: rotateY(45deg)  rotateZ(8deg); }
  100% { transform: rotateY(-45deg) rotateZ(-8deg); }
}

/* Nach dem Durchflug: Glow wechselt von Silber auf Blau/Violett */
.sym.is-crypto .sym-glyph {
  color: #ffffff;
  text-shadow:
    0 1px 0 #7f9bd8,
    0 2px 0 #6b86c4,
    0 3px 0 #5871ab,
    0 4px 0 #455c8f,
    0 8px 16px rgba(0, 0, 0, .65),
    0 0 22px var(--accent),
    0 0 55px var(--accent-2);
}

/* Kurzer Lichtblitz im Moment des Durchtritts */
.sym.is-flash .sym-glyph {
  filter: brightness(3);
}

/* --- Funken --------------------------------------------------------------- */
.splash-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 2;          /* Funken sollen über dem Symbol liegen */
}

.spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px 2px var(--accent-3),
    0 0 18px 6px var(--accent-3);
  animation: spark-burst .6s ease-out forwards;
}

/* Deckkraft bewusst erst spät abfallen lassen – bei reinem ease-out
   sind die Funken schon unsichtbar, bevor sie außen ankommen. */
@keyframes spark-burst {
  0% {
    transform: translate(0, 0) scale(.3);
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

/* --- Lichtbogen-Ausläufer, die seitlich aus dem Strahl springen ----------- */
.arc {
  position: absolute;
  left: 50%;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  transform-origin: left center;
  animation: arc-jitter var(--dur) steps(1, end) infinite;
}
.arc.left {
  left: auto;
  right: 50%;                 /* wächst nach links aus dem Strahl heraus */
  background: linear-gradient(270deg, var(--accent), transparent);
  transform-origin: right center;
}
.arc.right {
  background: linear-gradient(90deg, var(--accent), transparent);
}

@keyframes arc-jitter {
  0%   { opacity: 0;   transform: translateX(0)     scaleX(1);   }
  20%  { opacity: .95; transform: translateX(2px)   scaleX(1.3); }
  40%  { opacity: .35; transform: translateX(-3px)  scaleX(.7);  }
  60%  { opacity: 1;   transform: translateX(4px)   scaleX(1.6); }
  80%  { opacity: .2;  transform: translateX(-2px)  scaleX(.9);  }
  100% { opacity: 0;   transform: translateX(0)     scaleX(1);   }
}

/* --- Mitfliegende Partikel im Sog der Symbole ----------------------------- */
.stream-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 6px var(--accent-3);
  pointer-events: none;
  animation: stream-drift var(--dur) ease-out var(--delay) forwards;
  opacity: 0;                       /* vor dem Start unsichtbar */
}

/* 240vw, nicht 80vw: die Symbole starten bei -120vw und laufen bis +120vw.
   Mit 80vw endeten die Partikel bei -40vw – also fast noch außerhalb des
   Bildes, deshalb waren sie praktisch unsichtbar. */
@keyframes stream-drift {
  0%   { transform: translate(var(--x0), var(--y0));                             opacity: 1; }
  100% { transform: translate(calc(var(--x0) + 240vw), calc(var(--y0) + var(--dy))); opacity: 0; }
}

/* Größere Funken beim Durchtritt durch den Strahl */
.spark-lg {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
  box-shadow:
    0 0 8px 3px var(--accent),
    0 0 20px 8px rgba(var(--accent-rgb), .6);
  animation-duration: 1.5s;
}

/* --- Barrierefreiheit ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .splash { animation: splash-out .4s ease .6s forwards; }
  .splash-beam,
  .sym,
  .sym-glyph,
  .spark { animation: none; }
  .sym { display: none; }
  .splash-slogan { animation: none; opacity: 1; transform: none; }
}