/* Opening screen, shared by the desktop splash window (splash.html) and the web app (index.html, #boot).
   Same card in both: logo with a light sheen, an ECG trace while loading, and the current loading stage. */
@font-face {
  font-family: 'ClinoraX Boot';
  src: url('./fonts/plex-arabic-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: #f4f4fa;
  transition: opacity 0.3s ease;
}
html.dark .boot { background: #0f0f1a; }
.boot.boot--out { opacity: 0; pointer-events: none; }
/* Desktop splash window (480x300, frameless): the card is the whole window. */
.boot.boot--window { background: #fff; }

.boot-card {
  width: 480px;
  height: 300px;
  max-width: calc(100vw - 32px);
  border-radius: 18px;
  background: #fff;
  color: #1d1c3a;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  box-shadow: 0 24px 60px -18px rgba(35, 33, 122, 0.45), 0 0 0 1px rgba(63, 60, 187, 0.12);
  font-family: 'ClinoraX Boot', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  user-select: none;
}
.boot--window .boot-card { width: 100vw; height: 100vh; max-width: none; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(63, 60, 187, 0.18); -webkit-app-region: drag; }
.boot-card::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 260px;
  background: radial-gradient(closest-side, rgba(124, 122, 255, 0.18), transparent);
  pointer-events: none;
}

.boot-logo { position: relative; justify-self: center; align-self: end; width: 236px; height: 118px; margin-bottom: 6px; overflow: hidden; }
.boot-logo img {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  animation: boot-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards;
}
/* Light sweep: soft-light leaves the white card unchanged and only brightens the logo it crosses. */
.boot-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 120% 0;
  mix-blend-mode: soft-light;
  animation: boot-sheen 3.2s ease-in-out 1.1s infinite;
}
@keyframes boot-rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes boot-sheen { 0% { background-position: 120% 0; } 45%, 100% { background-position: -120% 0; } }

.boot-bottom { display: grid; gap: 10px; justify-items: center; padding: 0 32px 22px; position: relative; }
.boot-ecg { width: 300px; max-width: 100%; height: 34px; overflow: visible; }
.boot-ecg .base { stroke: #e7e6f4; }
.boot-ecg .beat {
  stroke: url(#boot-ecg-grad);
  stroke-dasharray: 90 600;
  stroke-dashoffset: 90;
  animation: boot-trace 1.8s linear infinite;
}
@keyframes boot-trace { to { stroke-dashoffset: -600; } }

.boot-status { height: 22px; width: 100%; text-align: center; font-size: 14px; font-weight: 500; color: #4a4968; transition: opacity 0.25s; }
.boot-status.swap { opacity: 0; }
.boot-meta { display: flex; justify-content: space-between; width: 100%; font-size: 11px; color: #9a99b4; letter-spacing: 0.02em; min-height: 14px; }
.boot-meta b { font-weight: 600; letter-spacing: 0.14em; }

@media (prefers-reduced-motion: reduce) {
  .boot-logo img { animation: none; opacity: 1; transform: none; filter: none; }
  .boot-logo::after, .boot-ecg .beat { animation: none; }
  .boot-ecg .beat { stroke-dasharray: none; }
}