/* The first screen, before the app starts: the same text search engines read, laid out as a
   calm splash (logo, name, one line), with a small loader. Replaced by the app when it is ready. */

:root {
  --site-font: "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
:root[data-font="default"] {
  --site-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-font="readex_pro"] {
  --site-font: "Readex Pro", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
}
:root[data-font="alexandria"] {
  --site-font: "Alexandria", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
}
:root[data-font="ibm_plex"] {
  --site-font: "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
:root[data-font="tajawal"] {
  --site-font: "Tajawal", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
}
:root[data-font="cairo"] {
  --site-font: "Cairo", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
}

.seo-intro {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  margin: 0;
  text-align: center;
  font-family: var(--site-font) !important;
  font-size: 15px;
  line-height: 1.8;
  background: #eef2f1;
  color: #0f1a16;
  box-sizing: border-box;
}
.seo-intro * {
  font-family: inherit !important;
}
[data-theme="dark"] .seo-intro { background: #0a0f0d; color: #e8eeeb; }
.seo-intro img { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 8px 24px rgba(14, 122, 99, .25); }
.seo-intro h1 { margin: 6px 0 0; font-size: 22px; font-family: inherit !important; }
.seo-intro p { margin: 0; max-width: 520px; color: #5f6f69; font-size: 14px; font-family: inherit !important; }
[data-theme="dark"] .seo-intro p { color: #95a69f; }
.seo-intro p.seo-more, .seo-intro ul { display: none; }   /* read by search engines; not needed on the splash */
.seo-intro::after { content: ""; width: 26px; height: 26px; margin-top: 14px; border-radius: 50%; border: 3px solid rgba(14, 122, 99, .2);
  border-top-color: #0e7a63; animation: seo-spin .8s linear infinite; }
@keyframes seo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seo-intro::after { animation-duration: 2s; } }