/* =========================================================
   Life Archive – der Ladebildschirm (app/boot.js, seit 0.6.0 beta)

   Ein Teich über allem (z 1000, über dem Anmelde-Tor mit 900): in der
   Mitte ein Mondschein, damit der schwarze Koi auf dem dunklen Grund
   lesbar bleibt, an den Rändern die Farben der Bereiche wie nachts auf
   Home. Darin das Paar – der weiße Koi, der schwarze –, das sich alle
   11 s einmal gegen den Uhrzeigersinn dreht; jeder Fisch wiegt sich
   dabei um seine eigene Mitte. Die Tropfen sind sechseckige Ringe:
   Größe UND Deckung laufen mit derselben Kurve, der Ring ist also
   größtenteils fort, ehe er halb gewachsen ist.

   Bewegt wird nur transform und opacity an HTML-Elementen: das läuft
   auf dem Grafikchip, während der Hauptfaden die App liest.
   ========================================================= */

.la-boot {
  /* Mondschein und Teich – Token, damit E-ink sie an einer Stelle tauscht. */
  --boot-moon:  rgba(150, 168, 205, .17);
  --boot-floor: var(--bg);

  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background:
    radial-gradient(closest-side circle at 50% 46%, var(--boot-moon), transparent),
    radial-gradient(90% 34% at 50% 108%, color-mix(in srgb, var(--c-meditation) 15%, transparent), transparent 76%),
    radial-gradient(55% 28% at 10% 100%, color-mix(in srgb, var(--c-calendar) 10%, transparent), transparent 76%),
    radial-gradient(60% 30% at 92% 0%, color-mix(in srgb, var(--c-nutrition) 8%, transparent), transparent 76%),
    var(--boot-floor);
  transition: opacity .7s var(--ease-out);
}

.la-boot.is-arriving { animation: la-boot-arrive .25s ease-out both; }
.la-boot.is-leaving  { pointer-events: none; }
.la-boot.is-gone     { opacity: 0; }

/* Nur für Vorleser: einmal „Opening Life Archive". */
.la-boot__say {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.la-boot__pond { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Das Paar ------------------------------------------------------ */

.la-boot__pair {
  position: absolute;
  animation:
    la-boot-circle 11s linear var(--boot-at, 0s) infinite,
    la-boot-in .7s cubic-bezier(.2, .7, .2, 1) both;
  will-change: transform;
}
/* Nach einem Neuladen: kein Auftauchen, der Kreis läuft einfach weiter. */
.la-boot.is-cont .la-boot__pair { animation: la-boot-circle 11s linear var(--boot-at, 0s) infinite; }

.la-boot__fish { position: absolute; inset: 0; }
.la-boot__fish svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Jeder Fisch wiegt sich um die Mitte seines Leibes (Schwerpunkt der Zeichnung). */
.la-boot__fish--white svg {
  transform-origin: 21.2% 44.2%;
  animation: la-boot-sway-a 1.8s ease-in-out infinite alternate;
}
.la-boot__fish--black svg {
  transform-origin: 78.9% 55.4%;
  animation: la-boot-sway-b 1.8s ease-in-out -.9s infinite alternate;
}

/* Der weiße Koi: das Symbol umgekehrt – weißer Leib, schwarze Flossen,
   die Schuppen in den Bereichsfarben, abgedunkelt, damit sie auf Weiß stehen. */
.la-boot__fish--white {
  --k-ink: color-mix(in srgb, var(--c-home) 96%, var(--bg));
  --k-fin: var(--bg);
  --k-a: color-mix(in srgb, var(--c-journal) 62%, #000);
  --k-b: color-mix(in srgb, var(--c-nutrition) 55%, #000);
  --k-c: color-mix(in srgb, var(--c-cue-diary-stroke) 78%, #000);
  --k-d: color-mix(in srgb, var(--c-calendar) 55%, #000);
}
/* Der schwarze Koi: das Symbol, wie es ist (vgl. .la-koi in look.css). */
.la-boot__fish--black {
  --k-ink: #000;
  --k-fin: #fff;
  --k-a: var(--c-journal);
  --k-b: var(--c-nutrition);
  --k-c: var(--c-cue-diary);
  --k-d: var(--c-calendar);
}

/* ---------- Tropfen ------------------------------------------------------- */

/* Die Schicht der letzten Tropfen liegt über der App (app/boot.js › burst). */
.la-boot-burst {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}

.la-boot__drop {
  position: absolute;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  color: var(--c);
}
.la-boot__drop svg { width: 100%; height: 100%; overflow: visible; }

.la-boot__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: la-boot-ring var(--t, 5s) cubic-bezier(.12, .5, .3, 1) var(--delay, 0s) both;
}
.la-boot__ring--inner { animation-name: la-boot-ring-inner; }

.la-boot__dot {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: la-boot-dot var(--t, 5s) ease-out var(--delay, 0s) both;
}

/* ---------- Bewegung ------------------------------------------------------ */

@keyframes la-boot-arrive { from { opacity: 0; } }
@keyframes la-boot-circle { to { transform: rotate(-360deg); } }
@keyframes la-boot-in { from { opacity: 0; scale: .9; } }

@keyframes la-boot-sway-a {
  from { transform: rotate(-3deg) translate(-.6%, .4%); }
  to   { transform: rotate(2.5deg) translate(.6%, -.4%); }
}
@keyframes la-boot-sway-b {
  from { transform: rotate(-3deg) translate(.6%, -.4%); }
  to   { transform: rotate(2.5deg) translate(-.6%, .4%); }
}

@keyframes la-boot-ring {
  0%, 3% { transform: scale(.03); opacity: 0; }
  5%     { transform: scale(.05); opacity: 1; }
  18%    { opacity: .5; }
  38%    { opacity: .16; }
  62%    { opacity: 0; }
  100%   { transform: scale(1); opacity: 0; }
}
@keyframes la-boot-ring-inner {
  0%, 16% { transform: scale(.03); opacity: 0; }
  18%     { transform: scale(.05); opacity: .55; }
  32%     { opacity: .2; }
  55%     { opacity: 0; }
  100%    { transform: scale(.68); opacity: 0; }
}
@keyframes la-boot-dot {
  0%   { transform: scale(.4); opacity: 0; }
  2%   { opacity: 1; }
  5%   { transform: scale(1); opacity: 1; }
  14%  { transform: scale(.2); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Reduce motion: die Koi liegen still, keine Tropfen ---------- */

html[data-motion="reduce"] .la-boot__pair,
html[data-motion="reduce"] .la-boot__fish svg { animation: none; }
html[data-motion="reduce"] .la-boot__drop,
html[data-motion="reduce"] .la-boot-burst { display: none; }
html[data-motion="reduce"] .la-boot { transition-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  .la-boot__pair, .la-boot__fish svg { animation: none; }
  .la-boot__drop, .la-boot-burst { display: none; }
  .la-boot { transition-duration: .3s; }
}

/* ---------- E-ink: Papier, beide Koi als Stempel, nichts bewegt sich ---- */

html[data-eink] .la-boot { --boot-moon: transparent; background: var(--bg); transition: none; animation: none; }
html[data-eink] .la-boot__pair,
html[data-eink] .la-boot__fish svg { animation: none; }
html[data-eink] .la-boot__drop,
html[data-eink] .la-boot-burst { display: none; }
html[data-eink] .la-boot__fish--white,
html[data-eink] .la-boot__fish--black {
  --k-ink: #000; --k-fin: #fff; --k-a: #fff; --k-b: #fff; --k-c: #fff; --k-d: #fff;
}