/*
 * The opening animation (see launch-splash.js) — the same choreography and
 * timings as AmbuZiel Mobile's LaunchSplashView:
 *
 *   80 ms   the grey upper stroke glides in along its slant
 *   210 ms  the grey right leg follows from the other side
 *   380 ms  the maroon swoosh is drawn from left to right
 *   830 ms  a highlight sweeps across the finished mark, which pulses once
 *   930 ms  the wordmark rises beneath it
 *   1.88 s  only if the session restore is still running: the shimmering
 *           bar, and a slow breathing mark
 *
 * The mark lives in its own 346 × 387 unit space (see index.html), drawn at
 * 132 px high, so 1 px on screen ≈ 2.93 units — the 70 pt travel of the iOS
 * version is ≈ 205 units here. The springs are approximated with an
 * overshooting cubic-bezier.
 */
#launch-splash {
  display: none;
}
/* The mark's colours — on the launch splash and on any `.lz-scope` that
   replays the same animation (the „Über AmbuZiel" dialog). */
#launch-splash,
.lz-scope {
  --lz-gray-top: #5e5e62;
  --lz-gray-bottom: #36363a;
  --lz-maroon-deep: #6a0033;
  --lz-maroon-bright: #a8125a;
  --lz-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
}
/* Lifted so the grey still reads on black — the iOS dark variants. */
html.dark #launch-splash,
html.dark .lz-scope {
  --lz-gray-top: #e4e4e7;
  --lz-gray-bottom: #a1a1aa;
  --lz-maroon-deep: #b0124f;
  --lz-maroon-bright: #e4417f;
}
html[data-launch] #launch-splash {
  --lz-bg: #f5f2eb; /* the app's page surface (--app-page), so the fade is seamless */
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lz-bg);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
html.dark[data-launch] #launch-splash {
  --lz-bg: #0f1114;
}
#launch-splash.is-leaving {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

.lz-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  /* Optically centred: the wordmark and bar hang below the mark. */
  transform: translateY(24px);
}

.lz-mark {
  display: block;
  width: 118px; /* 132 × 346 / 387 */
  height: 132px;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0));
  animation:
    lz-shadow 0.3s ease-out 0.88s forwards,
    lz-pulse 0.75s ease-in-out 0.83s,
    lz-breathe 2.2s ease-in-out 1.88s infinite;
}
.lz-stop-gray-top { stop-color: var(--lz-gray-top); }
.lz-stop-gray-bottom { stop-color: var(--lz-gray-bottom); }
.lz-stop-maroon-deep { stop-color: var(--lz-maroon-deep); }
.lz-stop-maroon-bright { stop-color: var(--lz-maroon-bright); }

.lz-top,
.lz-leg {
  opacity: 0;
}
.lz-top {
  transform: translate(-113px, -205px);
  animation: lz-glide 0.6s var(--lz-spring) 0.08s forwards;
}
.lz-leg {
  transform: translate(88px, 205px);
  animation: lz-glide 0.6s var(--lz-spring) 0.21s forwards;
}
.lz-reveal {
  transform: scaleX(0);
  transform-origin: 0 0;
  animation: lz-draw 0.5s ease-in-out 0.38s forwards;
}
.lz-shine {
  transform: translateX(-346px) rotate(22deg);
  transform-origin: 78px 193px;
  animation: lz-shine 0.8s ease-in-out 0.83s forwards;
}

.lz-word {
  margin: 0;
  font-family: ui-serif, 'New York', Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 1.2;
  color: var(--lz-gray-bottom);
  opacity: 0;
  transform: translateY(10px);
  animation: lz-rise 0.5s var(--lz-spring) 0.93s forwards;
}

/* Indeterminate progress: a maroon glint gliding along a hairline track. */
.lz-bar {
  position: relative;
  width: 112px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lz-gray-bottom) 15%, transparent);
  opacity: 0;
  animation: lz-fade-in 0.3s ease-in 1.88s forwards;
}
.lz-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--lz-maroon-bright), transparent);
  transform: translateX(-44px);
  animation: lz-glint 1.3s linear 1.88s infinite;
}

/* Outside the splash (the „Über AmbuZiel" dialog) the intro plays once
   and the mark then rests — no endless breathing on a dialog. */
.lz-scope .lz-mark {
  animation:
    lz-shadow 0.3s ease-out 0.88s forwards,
    lz-pulse 0.75s ease-in-out 0.83s;
}

@keyframes lz-glide {
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes lz-draw {
  to { transform: scaleX(1); }
}
@keyframes lz-shine {
  to { transform: translateX(554px) rotate(22deg); }
}
@keyframes lz-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lz-fade-in {
  to { opacity: 1; }
}
@keyframes lz-shadow {
  to { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.12)); }
}
@keyframes lz-pulse {
  47% { transform: scale(1.025); }
}
@keyframes lz-breathe {
  50% { transform: scale(1.025); }
}
@keyframes lz-glint {
  to { transform: translateX(112px); }
}

/* As on iOS: the finished mark at once, the bar later, nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .lz-mark,
  .lz-scope .lz-mark {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.12));
    animation: none;
  }
  .lz-top,
  .lz-leg,
  .lz-word {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lz-reveal {
    transform: none;
    animation: none;
  }
  .lz-shine {
    display: none;
  }
  .lz-bar {
    animation-delay: 1.6s;
  }
  .lz-bar::after {
    animation: none;
    transform: translateX(34px);
  }
  #launch-splash {
    transition: opacity 0.3s ease-out;
  }
  #launch-splash.is-leaving {
    transform: none;
  }
}