/* Splash (S5): the logo builds itself in 1.6 s, then fades away. Pure SVG + CSS, no video, no JS needed to run it.
   Shown once per browser tab (sessionStorage) and never with reduced motion (public/boot.js). The markup is in index.html,
   written by scripts/assets.mjs from brand/mark-face.svg. Colours are set here because styles.css loads later. */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #0e1016;
  pointer-events: none;
  animation: sp-out 0.35s ease-in 1.25s both;
}
:root[data-theme="light"] #splash {
  background: #f6f5fc;
}
:root[data-splash="off"] #splash {
  display: none;
}

.sp-mark {
  width: 148px;
  height: 148px;
  overflow: visible;
}
:root[data-theme="light"] .sp-mark {
  filter: drop-shadow(0 12px 28px rgba(40, 36, 140, 0.2));
}
/* only the animated parts: the inner groups keep their own scale() around the SVG origin */
.sp-bubble,
.sp-star,
.sp-planet {
  transform-box: fill-box;
  transform-origin: center;
}
.sp-bubble {
  animation: sp-bubble 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sp-star {
  animation: sp-star 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0.35s both;
}
.sp-arc {
  stroke-dasharray: 1 1;
  animation: sp-arc 0.45s ease-out 0.5s both;
}
.sp-planet {
  animation: sp-pop 0.3s ease-out 0.62s both;
}

.sp-word {
  font-family: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #bdbcfb;
  animation: sp-word 0.4s ease-out 0.7s both;
}
:root[data-theme="light"] .sp-word {
  color: #4b47c9;
}
/* the word in the interface language (B11; boot.js sets lang before paint) */
.sp-word--en,
:root[lang="en"] .sp-word {
  display: none;
}
:root[lang="en"] .sp-word--en {
  display: block;
}

@keyframes sp-bubble {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sp-star {
  from {
    opacity: 0;
    transform: scale(0) rotate(-60deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* the gold arc draws itself from its faint tail up to its bright head */
@keyframes sp-arc {
  from {
    stroke-dashoffset: -1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sp-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sp-word {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sp-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash {
    display: none;
  }
}