/* شاشة افتتاح حكيمو — تحميل رياضي */

.hk-splash {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background:
    radial-gradient(ellipse 50% 40% at 50% 42%, rgba(241,90,36,.16), transparent 70%),
    #FFFBF7;
  color: #1C120C;
  overflow: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}
html[data-theme="dark"] .hk-splash {
  background:
    radial-gradient(ellipse 50% 40% at 50% 42%, rgba(241,90,36,.22), transparent 70%),
    #140A07;
  color: #FFFBF7;
}
.hk-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hk-splash__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(241,90,36,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,90,36,.10) 1px, transparent 1px);
  background-size: 36px 36px;
}
.hk-splash__orbit {
  position: absolute;
  width: min(420px, 78vw);
  height: min(420px, 78vw);
  border-radius: 50%;
  animation: hkSplashSpin 14s linear infinite;
}
.hk-splash__orbit span {
  position: absolute;
  left: 50%; top: 50%;
  font-family: 'Outfit', 'Cairo', serif;
  font-weight: 800;
  font-size: 28px;
  color: #F15A24;
  transform-origin: 0 0;
}
.hk-splash__orbit span:nth-child(1) { transform: rotate(0deg) translate(168px) rotate(0deg); }
.hk-splash__orbit span:nth-child(2) { transform: rotate(60deg) translate(168px) rotate(-60deg); }
.hk-splash__orbit span:nth-child(3) { transform: rotate(120deg) translate(168px) rotate(-120deg); }
.hk-splash__orbit span:nth-child(4) { transform: rotate(180deg) translate(168px) rotate(-180deg); }
.hk-splash__orbit span:nth-child(5) { transform: rotate(240deg) translate(168px) rotate(-240deg); }
.hk-splash__orbit span:nth-child(6) { transform: rotate(300deg) translate(168px) rotate(-300deg); }

.hk-splash__core {
  position: relative;
  width: min(240px, 62vw);
  height: min(240px, 62vw);
  display: grid;
  place-items: center;
  z-index: 1;
}
.hk-splash__gear {
  position: absolute;
  inset: -18%;
  color: #F15A24;
  animation: hkSplashSpin 6s linear infinite;
  opacity: .55;
}
.hk-splash__gear svg { width: 100%; height: 100%; }
.hk-splash__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 28px;
  background: #000;
  box-shadow: 0 16px 40px rgba(194,65,12,.28), 0 0 0 6px #fff;
  animation: hkSplashPulse 2.2s ease-in-out infinite;
}
html[data-theme="dark"] .hk-splash__logo { box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 6px #2A1810; }

.hk-splash__eq {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  font-family: 'Outfit', 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  color: #C2410C;
  display: flex;
  gap: 10px;
  align-items: center;
}
html[data-theme="dark"] .hk-splash__eq { color: #FB7C3C; }
.hk-splash__eqB {
  min-width: 1.2em;
  text-align: center;
  animation: hkSplashSolve 1.6s steps(4, end) infinite;
}
.hk-splash__eqB::after { content: "?"; }
.hk-splash.is-solving .hk-splash__eqB::after { content: "1"; }

.hk-splash__name {
  position: relative; z-index: 1;
  margin: 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
  font-size: 18px;
  font-weight: 800;
}
.hk-splash__status {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #8A6E5C;
}
html[data-theme="dark"] .hk-splash__status { color: #C4A896; }

.hk-splash__bar {
  position: relative; z-index: 1;
  width: min(280px, 70vw);
  height: 8px;
  border-radius: 99px;
  background: rgba(241,90,36,.16);
  overflow: hidden;
  margin-top: 6px;
}
.hk-splash__barFill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #C2410C, #F15A24, #FB7C3C);
  animation: hkSplashBar 1.8s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes hkSplashSpin { to { transform: rotate(360deg); } }
@keyframes hkSplashPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes hkSplashBar { to { width: 100%; } }
@keyframes hkSplashSolve {
  0%, 40% { opacity: .35; }
  50%, 100% { opacity: 1; }
}

@media (max-width: 560px) {
  .hk-splash__orbit { width: min(300px, 86vw); height: min(300px, 86vw); }
  .hk-splash__orbit span { font-size: 22px; }
  .hk-splash__orbit span:nth-child(1) { transform: rotate(0deg) translate(122px) rotate(0deg); }
  .hk-splash__orbit span:nth-child(2) { transform: rotate(60deg) translate(122px) rotate(-60deg); }
  .hk-splash__orbit span:nth-child(3) { transform: rotate(120deg) translate(122px) rotate(-120deg); }
  .hk-splash__orbit span:nth-child(4) { transform: rotate(180deg) translate(122px) rotate(-180deg); }
  .hk-splash__orbit span:nth-child(5) { transform: rotate(240deg) translate(122px) rotate(-240deg); }
  .hk-splash__orbit span:nth-child(6) { transform: rotate(300deg) translate(122px) rotate(-300deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hk-splash__orbit,
  .hk-splash__gear,
  .hk-splash__logo,
  .hk-splash__barFill,
  .hk-splash__eqB { animation: none !important; }
  .hk-splash__barFill { width: 100%; }
}
