/*
 * Animated launch for the installed app. iPhone shows a still launch image
 * (public/splash/, scripts/make-splash.mjs); this page picks up from the same
 * picture and animates the Qasid logo, built from its two parts (envelope and
 * paper plane, public/icons/logo-parts/). src/lib/boot-splash.ts sends it off.
 * Plain CSS loaded from <head>, so it shows before any script.
 *
 * data-motion on #boot-splash picks the animation:
 *   plane    the paper plane flies in on a curve and lands on the envelope (Qasid)
 *   minimal  the logo stays still and fades softly into the app (a reseller's
 *            own logo, set by server/spa-page.ts)
 */

#boot-splash {
  display: none;
}

@media (display-mode: standalone) {
  #boot-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
  }
}

:root[data-theme='dark'] #boot-splash {
  background: rgb(24 24 27);
}

.boot-tile {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 32px -12px rgb(0 0 0 / 0.18);
}

:root[data-theme='dark'] .boot-tile {
  box-shadow: 0 12px 40px -12px rgb(0 0 0 / 0.8);
}

/* The logo and its two parts sit exactly on top of each other. */
.boot-tile img {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 84px;
  height: 84px;
}

.boot-envelope,
.boot-plane-wrap {
  display: none;
}

/* ── plane: the paper plane flies in and lands ─────────────────────────── */

#boot-splash[data-motion='plane'] .boot-logo {
  display: none;
}
#boot-splash[data-motion='plane'] .boot-envelope {
  display: block;
}

/* The plane and its trail fly together; the wrapper sits exactly on the logo. */
#boot-splash[data-motion='plane'] .boot-plane-wrap {
  display: block;
  position: absolute;
  left: 14px;
  top: 14px;
  width: 84px;
  height: 84px;
  animation: plane-fly-in 0.9s cubic-bezier(0.22, 0.9, 0.24, 1) 0.15s both;
}
.boot-plane-wrap .boot-plane {
  left: 0;
  top: 0;
}

/* A tapered streak streaming back from the plane's tail along its flight path. */
.boot-trail {
  position: absolute;
  left: -106px; /* right end at the tail, (4px, 69px) in the plane image */
  top: 67px;
  width: 110px;
  height: 4px;
  background: linear-gradient(90deg, rgb(99 102 241 / 0), rgb(99 102 241 / 0.85));
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%);
  filter: drop-shadow(0 0 3px rgb(99 102 241 / 0.6));
  transform-origin: right center;
  transform: rotate(-38.7deg) scaleX(0);
  animation: plane-trail 0.9s ease-out 0.15s both;
}

#boot-splash[data-motion='plane'] .boot-tile {
  animation: tile-land 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.95s both;
}

@keyframes plane-fly-in {
  0% { transform: translate(-150px, 120px) rotate(-14deg) scale(0.55); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translate(6px, -6px) rotate(3deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}

/* Long while the plane is fast, drawn in behind it as it slows and lands. */
@keyframes plane-trail {
  0% { transform: rotate(-38.7deg) scaleX(0.3); opacity: 0; }
  20% { transform: rotate(-38.7deg) scaleX(1); opacity: 1; }
  65% { transform: rotate(-38.7deg) scaleX(0.5); opacity: 0.7; }
  100% { transform: rotate(-38.7deg) scaleX(0); opacity: 0; }
}

@keyframes tile-land {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ── minimal: still logo, a soft fade into the app ─────────────────────── */

#boot-splash[data-motion='minimal'] .boot-logo {
  display: block;
}

/* ── leaving, once the app has drawn ───────────────────────────────────── */

.boot-splash-leave {
  animation: boot-fade 0.4s ease-out 0.15s both;
}

.boot-splash-leave .boot-tile {
  animation: boot-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes boot-out {
  to { transform: scale(1.08); opacity: 0; }
}

@keyframes boot-fade {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #boot-splash *,
  .boot-splash-leave .boot-tile {
    animation: none !important;
  }
  .boot-trail {
    display: none;
  }
}