/* ── شاشة دخول الصفحة الرئيسية ─────────────────────────────── */
html.bio-splash-lock,
html.bio-splash-lock body {
  overflow: hidden !important;
}

.bio-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 32px 22px 40px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, color-mix(in srgb, var(--red, #8E0E20) 9%, transparent), transparent 58%),
    #ffffff;
  color: var(--ink, #1B0609);
  pointer-events: all;
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), visibility .65s;
}
.bio-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bio-splash__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(48px);
  opacity: .22;
  background: radial-gradient(circle, var(--red-100, #F7E3E6), transparent 70%);
}
.bio-splash__glow--a {
  width: min(58vw, 420px); height: min(58vw, 420px);
  top: -14%; inset-inline-end: -16%;
  animation: bioSplashGlow 7s ease-in-out infinite;
}
.bio-splash__glow--b {
  width: min(50vw, 360px); height: min(50vw, 360px);
  bottom: -18%; inset-inline-start: -18%;
  animation: bioSplashGlow 9s ease-in-out infinite reverse;
}

.bio-splash__core {
  position: relative;
  width: min(82vw, 360px);
  height: min(82vw, 360px);
  display: grid;
  place-items: center;
  --orbit: min(37vw, 158px);
}

.bio-splash__spinner {
  position: absolute;
  inset: 7%;
  z-index: 1;
  overflow: visible;
}
.bio-splash__spinner-bg,
.bio-splash__spinner-arc {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.bio-splash__spinner-bg {
  stroke: color-mix(in srgb, var(--red, #8E0E20) 14%, #fff);
}
.bio-splash__spinner-arc {
  stroke: var(--red, #8E0E20);
  stroke-dasharray: 90 200;
  transform-origin: 50% 50%;
  animation: bioSplashArc 1.35s linear infinite;
}

.bio-splash__ring {
  position: absolute;
  inset: 0;
  animation: bioSplashSpin 18s linear infinite;
}

.bio-splash__ico {
  --a: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px;
  color: var(--red, #8E0E20);
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--red, #8E0E20) 18%, #fff);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(142, 14, 32, .12);
  padding: 9px;
  box-sizing: border-box;
  transform: rotate(var(--a)) translate(var(--orbit)) rotate(calc(-1 * var(--a)));
}
.bio-splash__ico svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: bioSplashSpin 18s linear infinite reverse;
}

.bio-splash__seal {
  position: relative;
  z-index: 2;
  width: min(48vw, 210px);
  animation: bioSplashIn .85s cubic-bezier(.22, 1, .36, 1) both;
}
.bio-splash__seal img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply;
}

.bio-splash__kicker {
  margin: 8px 0 0;
  font-family: var(--ff, 'Cairo', sans-serif);
  font-weight: 900;
  font-size: clamp(1.2rem, 5vw, 1.55rem);
  letter-spacing: -.02em;
  color: var(--ink, #1B0609);
  animation: bioSplashIn .85s .1s cubic-bezier(.22, 1, .36, 1) both;
}
.bio-splash__sub {
  margin: 0;
  font-family: var(--ff, 'Cairo', sans-serif);
  font-weight: 700;
  font-size: .95rem;
  color: var(--red, #8E0E20);
  animation: bioSplashIn .85s .16s cubic-bezier(.22, 1, .36, 1) both;
}
.bio-splash__status {
  margin: 6px 0 2px;
  font-family: var(--ff, 'Cairo', sans-serif);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--muted, #7C5259);
  animation: bioSplashPulse 1.4s ease-in-out infinite;
}

.bio-splash__bar {
  width: min(196px, 58vw);
  height: 6px;
  border-radius: 99px;
  background: #F7E3E6;
  overflow: hidden;
  animation: bioSplashIn .85s .22s cubic-bezier(.22, 1, .36, 1) both;
}
.bio-splash__bar > span {
  display: block;
  height: 100%;
  width: 36%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6B0A18, #8E0E20, #B3122A, #8E0E20);
  background-size: 200% 100%;
  animation: bioSplashSlide 1.35s ease-in-out infinite;
}

@keyframes bioSplashSpin { to { transform: rotate(360deg); } }
@keyframes bioSplashArc { to { transform: rotate(360deg); } }
@keyframes bioSplashGlow {
  0%, 100% { transform: scale(1); opacity: .18; }
  50% { transform: scale(1.1); opacity: .32; }
}
@keyframes bioSplashIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes bioSplashPulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
@keyframes bioSplashSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@media (max-width: 720px) {
  .bio-splash {
    gap: 8px;
    padding: 20px 18px 32px;
  }
  .bio-splash__core {
    width: min(88vw, 340px);
    height: min(88vw, 340px);
    --orbit: min(39vw, 142px);
  }
  .bio-splash__seal { width: min(46vw, 188px); }
  .bio-splash__ico {
    width: 42px;
    height: 42px;
    margin: -21px;
    padding: 8px;
  }
  .bio-splash__kicker { font-size: 1.28rem; }
}

html[data-theme="dark"] .bio-splash {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(226, 83, 106, .16), transparent 58%),
    #1C0A0E;
}
html[data-theme="dark"] .bio-splash__seal img { mix-blend-mode: normal; }
html[data-theme="dark"] .bio-splash__ico { background: #250D12; }

body.student-perf-lite .bio-splash__ring,
body.android-native-app .bio-splash__ring,
body.student-perf-lite .bio-splash__spinner-arc,
body.android-native-app .bio-splash__spinner-arc,
body.student-perf-lite .bio-splash__bar > span,
body.android-native-app .bio-splash__bar > span,
body.student-perf-lite .bio-splash__status,
body.android-native-app .bio-splash__status {
  animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
  .bio-splash__ring,
  .bio-splash__spinner-arc,
  .bio-splash__ico svg,
  .bio-splash__glow,
  .bio-splash__seal,
  .bio-splash__kicker,
  .bio-splash__sub,
  .bio-splash__status,
  .bio-splash__bar,
  .bio-splash__bar > span {
    animation: none !important;
  }
  .bio-splash__bar > span { width: 100%; transform: none; }
}
