/* Die Startanimation (30.10.2026) - Ablauf und Begründung in
   startanimation.js. Eigene Datei und nicht in stil.css: Sie gilt für beide
   Oberflächen (body.fahrer und body.vw) und hängt an keiner ihrer Regeln.

   ZWEITE FASSUNG, am selben Abend - Marc: „kannst du das Firmen Logo statt
   dem App Logo nehmen? Und es noch etwas cooler und mehr animieren mit Licht
   und Schatten und Verläufen". Also: das Firmenlogo auf einer weissen Karte
   (ohne Logo das Zeichen der App), dahinter ein Lichthof mit langsam
   drehenden Strahlen, ein Glanz, der über die Karte streicht, ein Schatten,
   der mit der Karte am Boden wächst, und der Lastwagen fährt mit Lichtkegel.

   Ablauf, rund 1,9 s:
     0,00  Verlauf von Navy in die Tiefe, der Lichthof geht auf
     0,05  die Karte federt aus der Tiefe herein, ihr Schatten wächst mit
     0,25  (nur App-Zeichen) der Haken zeichnet sich
     0,60  ein Glanz streicht schräg über die Karte
     0,55  der Lastwagen fährt mit Lichtkegel durch und zieht die gelbe Linie
     1,55  die Karte wächst leicht und die Fläche blendet aus („durch das
           Zeichen hindurch"), die Seite setzt sich darunter zurecht

   BEWEGUNG MIT FEDERN statt `ease` (Apple-Bewegungsregeln): Die Kurven sind
   gedämpfte Federn, als `linear()` ausgerechnet - `--sa-feder` mit leichtem
   Nachschwingen (Antwort 0,5 s, Dämpfung 0,72), `--sa-glatt` ohne
   Überschwingen (Antwort 0,45 s, kritisch gedämpft). Browser ohne `linear()`
   bekommen eine ähnliche cubic-bezier. Bewegt werden nur `transform` und
   `opacity` - Licht und Schatten sind eigene Ebenen, deren Deckkraft sich
   ändert, nicht animierte Schatten.

   Farben sind die des App-Zeichens (static/symbol), nicht die Tokens des
   Blattes: Die Schicht soll in Hell und Dunkel gleich aussehen. */

:root {
  --sa-feder: cubic-bezier(0.34, 1.3, 0.64, 1);
  --sa-glatt: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --sa-feder: linear(0, 0.054, 0.181, 0.338, 0.498, 0.644, 0.766, 0.862, 0.933, 0.982, 1.013, 1.03, 1.037, 1.038, 1.035, 1.029, 1.023, 1.017, 1.012, 1.007, 1.004, 1.002, 1);
    --sa-glatt: linear(0, 0.028, 0.096, 0.183, 0.277, 0.371, 0.46, 0.541, 0.613, 0.676, 0.731, 0.777, 0.816, 0.849, 0.877, 0.9, 0.918, 0.934, 0.946, 0.957, 0.965, 0.972, 0.978, 0.982, 0.986, 1);
  }
}

.startanimation-schicht { display: none; }

html.startanimation .startanimation-schicht {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  /* Tiefe: hell in der Mitte, wo die Karte steht, dunkel zum Rand. */
  background:
    radial-gradient(120% 80% at 50% 42%, #2340c0 0%, #0F227B 42%, #081450 78%, #050c33 100%);
  cursor: pointer;
  animation: sa-aus 0.35s var(--sa-glatt) 1.55s forwards;
}
/* Ein Tipp: nicht schlagartig weg, sondern in 0,15 s (startanimation.js). */
html.startanimation .startanimation-schicht.sa-schnell { animation: sa-aus 0.15s ease-out forwards; }
html.startanimation body { overflow: hidden; }

/* --- Der Lichthof hinter der Karte: ein warmer Kern und Strahlen, die sich
   langsam drehen. Zwei Ebenen, beide nur transform/opacity. */
.startanimation-schicht .sa-licht {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 201, 71, 0.42), rgba(255, 201, 71, 0.12) 38%, rgba(64, 104, 255, 0.10) 60%, transparent 72%);
  opacity: 0;
  transform: scale(0.35);
  animation:
    sa-licht-auf 0.9s var(--sa-glatt) both,
    sa-atmen 2.4s ease-in-out 0.9s infinite alternate;
}
.startanimation-schicht .sa-licht::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%);
          mask: radial-gradient(closest-side, #000 20%, transparent 70%);
  animation: sa-drehen 9s linear infinite;
}

/* --- Die Karte ------------------------------------------------------------ */
.startanimation-schicht .sa-zeichen {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  background: linear-gradient(160deg, #1b2c8a, #101c63);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation:
    sa-ein 0.75s var(--sa-feder) 0.05s both,
    sa-durch 0.35s var(--sa-glatt) 1.55s forwards;
}
/* Das Logo: weisse Karte, so breit wie das Logo, nicht wie der Bildschirm. */
.startanimation-schicht .sa-karte {
  width: auto;
  height: auto;
  max-width: min(78vw, 320px);
  padding: 22px 28px;
  border-radius: 24px;
  background: linear-gradient(170deg, #ffffff 0%, #f3f5fb 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(5, 12, 51, 0.25),
    0 24px 60px rgba(5, 12, 51, 0.55);
}
.startanimation-schicht .sa-karte img {
  display: block;
  max-width: 100%;
  max-height: 96px;
  width: auto;
  height: auto;
}
/* Der Glanz: ein schräger heller Streifen, der einmal über die Karte zieht. */
.startanimation-schicht .sa-zeichen::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.0) 20%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.0) 80%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
  animation: sa-glanz 0.8s var(--sa-glatt) 0.6s forwards;
}
.startanimation-schicht .sa-zeichen svg { width: 100%; height: 100%; }
.startanimation-schicht .sa-haken {
  fill: none;
  stroke: #FFC947;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(255, 201, 71, 0.6));
  animation: sa-zeichnen 0.45s var(--sa-glatt) 0.25s forwards;
}

/* Der Schatten am Boden: wächst mit der Karte, als käme sie herunter. */
.startanimation-schicht .sa-boden {
  width: 220px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent);
  opacity: 0;
  transform: scaleX(0.3);
  animation:
    sa-boden 0.75s var(--sa-feder) 0.05s both,
    sa-weg 0.3s var(--sa-glatt) 1.55s forwards;
}

/* --- Die Strasse ---------------------------------------------------------- */
.startanimation-schicht .sa-strasse {
  position: relative;
  z-index: 1;
  width: 240px;
  height: 30px;
}
.startanimation-schicht .sa-linie {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 201, 71, 0), #FFC947 30%, #ffe08f 100%);
  box-shadow: 0 0 10px rgba(255, 201, 71, 0.55);
  transform-origin: left center;
  transform: scaleX(0);
  animation: sa-linie 0.75s var(--sa-glatt) 0.55s forwards;
}
.startanimation-schicht .sa-lkw {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 28px;
  height: 24px;
  color: #fff;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  animation: sa-fahren 0.75s var(--sa-glatt) 0.55s forwards;
}
/* Der Lichtkegel vor dem Lastwagen. */
.startanimation-schicht .sa-kegel {
  position: absolute;
  left: 24px;
  bottom: 2px;
  width: 54px;
  height: 16px;
  background: linear-gradient(90deg, rgba(255, 236, 170, 0.75), rgba(255, 236, 170, 0));
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 75%);
}
.startanimation-schicht .sa-lkw svg {
  position: relative;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Seite setzt sich zurecht, während die Schicht geht - fertig bei 1,9 s,
   wenn das Skript die Klasse abnimmt. */
html.startanimation body > :not(.startanimation-schicht) {
  animation: sa-seite 0.35s var(--sa-glatt) 1.55s both;
}

@keyframes sa-ein {
  from { opacity: 0; transform: translateY(18px) scale(0.82); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes sa-durch { to { transform: scale(1.12); opacity: 0.6; } }
@keyframes sa-glanz { to { transform: translateX(330%) skewX(-18deg); } }
@keyframes sa-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes sa-boden { to { opacity: 1; transform: scaleX(1); } }
@keyframes sa-weg { to { opacity: 0; } }
@keyframes sa-licht-auf { to { opacity: 1; transform: scale(1); } }
@keyframes sa-atmen { from { opacity: 1; } to { opacity: 0.75; } }
@keyframes sa-drehen { to { transform: rotate(360deg); } }
@keyframes sa-linie { to { transform: scaleX(1); } }
@keyframes sa-fahren {
  0%   { opacity: 0; transform: translateX(-40px); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(250px); }
}
@keyframes sa-aus { to { opacity: 0; visibility: hidden; } }
@keyframes sa-seite {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* „Bewegung reduzieren": kein Federn, kein Fahren, kein Drehen - Karte und
   Licht stehen, die Fläche blendet nach einer halben Sekunde aus. */
@media (prefers-reduced-motion: reduce) {
  html.startanimation .startanimation-schicht { animation: sa-aus 0.25s ease-out 0.6s forwards; }
  .startanimation-schicht .sa-zeichen,
  .startanimation-schicht .sa-boden,
  .startanimation-schicht .sa-licht,
  .startanimation-schicht .sa-licht::after { animation: none; opacity: 1; transform: none; }
  .startanimation-schicht .sa-zeichen::after { display: none; }
  .startanimation-schicht .sa-haken { animation: none; stroke-dashoffset: 0; }
  .startanimation-schicht .sa-strasse { display: none; }
  html.startanimation body > :not(.startanimation-schicht) { animation: none; }
}