/* Splash v5 — user ki file "quicktap_minimal_centered_spinner_splash.html" ka exact port.
   Multi-layer gyroscope/radar orbital spinner — SAB rings/arcs LIVE rotate karte hain:
   L0 radar sweep 4s · L1 dashed orbit 22s · L2 counter-ring 3 nodes 8s reverse ·
   L3 segmented arcs 12s · L4 inner gyro ring 5.5s · L5 halo pulse · L6 breathing emblem + bolt.
   Visual-only: markup naya, lekin #splashScreen/.done/timer (1.9s, tap-skip, reload re-show) unchanged.
   Colors user ki file se: #FF6600 / #EA4800 / #F59E0B / cream #FFFDF9→#FFF1E5.
   v2 — center emblem ab website brand icon jaisa solid orange chip (white glass wash hataaya). */

/* ==== Background — unki file ka cream gradient + central glow ==== */
#splashScreen {
  background:
    radial-gradient(600px 420px at 50% 42%, rgba(255,102,0,.10), transparent 70%),
    linear-gradient(180deg,#FFFDF9 0%,#FFF9F2 52%,#FFF1E5 100%) !important;
}
/* unki file mein bara 460px orbit circle nahi tha — spinner ke andar hi rings hain */
#splashScreen::after { content: none !important; }
/* (::before = bundle ka orange tech-grid — unki grid pattern se match, reuse) */

/* ==== Layout: full-screen centered column (card nahi — unka frameless design) ==== */
#splashScreen .splash-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 100dvh; padding: 24px; box-sizing: border-box;
  text-align: center;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; backdrop-filter: none !important;
  animation: sp5In .4s cubic-bezier(.2,.8,.3,1.08) both;
}
#splashScreen .splash-inner::before { content: none !important; }

/* ==== Ambient: floating particles (unki file ke 4) ==== */
.sp5-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sp5-particles span { position: absolute; border-radius: 50%; animation: sp5Float 6s ease-in-out infinite; }
.sp5-p1 { top: 22%; left: 18%; width: 8px; height: 8px; background: rgba(251,146,60,.4); filter: blur(1px); }
.sp5-p2 { top: 38%; right: 14%; width: 12px; height: 12px; background: rgba(245,158,11,.35); filter: blur(1px); animation-delay: 2s; animation-duration: 7s; }
.sp5-p3 { top: 68%; left: 22%; width: 10px; height: 10px; background: rgba(255,102,0,.3); filter: blur(1px); animation-delay: 3.5s; animation-duration: 8s; }
.sp5-p4 { top: 75%; right: 25%; width: 6px; height: 6px; background: rgba(251,146,60,.4); filter: blur(.5px); animation-delay: 1.2s; animation-duration: 5s; }

/* ==== Ambient: central pulsing aura (unki dono blurred circles) ==== */
.sp5-aura, .sp5-aura2 { position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; }
.sp5-aura {
  width: 380px; height: 380px;
  background: linear-gradient(to top right, rgba(255,102,0,.25), rgba(245,158,11,.25), rgba(253,186,116,.2));
  filter: blur(64px);
  animation: sp5Aura 3.6s ease-in-out infinite alternate;
}
.sp5-aura2 { width: 224px; height: 224px; background: rgba(255,102,0,.3); filter: blur(40px); }

/* ==== SPINNER (288px, sab layers absolute + centered) ==== */
.sp5-spinner {
  position: relative;
  width: min(288px, 74vw); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* L0 — Radar Sweep (conic sector, 4s) */
.sp5-radar {
  position: absolute; inset: 16px; border-radius: 50%; opacity: .75;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(255,102,0,.16) 360deg);
  animation: sp5Spin 4s linear infinite;
}

/* L1 — Outermost dashed gyroscope orbit (SVG, 22s) */
.sp5-orbit { position: absolute; inset: 0; width: 100%; height: 100%; animation: sp5Spin 22s linear infinite; }

/* L2 — Counter-clockwise ring + 3 glowing nodes (8s reverse) */
.sp5-ring-rev {
  position: absolute; inset: 16px; border-radius: 50%;
  border: 1px solid rgba(253,186,116,.4);
  animation: sp5SpinRev 8s linear infinite;
}
.sp5-node { position: absolute; border-radius: 50%; }
.sp5-node-top { top: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #FF6600; box-shadow: 0 0 12px #FF6600; }
.sp5-node-bottom { bottom: -6px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: #F59E0B; box-shadow: 0 0 10px #F59E0B; }
.sp5-node-side { top: 50%; left: -4px; transform: translateY(-50%); width: 8px; height: 8px; background: #FF8533; box-shadow: 0 0 6px #FF8533; }

/* L3 — Segmented high-tech arcs (SVG, 12s) */
.sp5-arcs { position: absolute; inset: 32px; width: calc(100% - 64px); height: calc(100% - 64px); animation: sp5Spin 12s linear infinite; }

/* L4 — Inner counter gyro ring + dot (5.5s) */
.sp5-ring-inner {
  position: absolute; inset: 56px; border-radius: 50%;
  border: 1px dashed rgba(251,146,60,.4);
  animation: sp5Spin 5.5s linear infinite;
}
.sp5-ring-inner .sp5-dot { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #FF6600; box-shadow: 0 0 8px #FF6600; }

/* L5 — Inner fine halo (pulse) */
.sp5-halo { position: absolute; inset: 80px; border-radius: 50%; border: 1px solid rgba(251,146,60,.25); animation: sp5Pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

/* L6 — Centerpiece: website brand-icon style solid orange chip + white bolt.
   v2: glass ki white wash hata kar vivid brand-orange gradient — header ke logo icon
   (bg-gradient-to-tr from-brand-orange to-orange-500) se EXACT match. */
.sp5-emblem {
  position: relative; z-index: 2; width: 96px; height: 96px; flex: none;
  border-radius: 30px; padding: 0; box-sizing: border-box;
  background: linear-gradient(to top right, #EA4800 0%, #FF6600 52%, #FF8A3D 100%);
  box-shadow: 0 18px 40px -4px rgba(255,102,0,.52), 0 6px 18px -2px rgba(234,72,0,.38), inset 0 1.5px 2px rgba(255,255,255,.45);
  animation: sp5Breathe 3s ease-in-out infinite;
}
.sp5-emblem-glass {
  width: 100%; height: 100%; border-radius: 30px;
  background: linear-gradient(to top right, rgba(234,72,0,0) 0%, rgba(255,255,255,.10) 52%, rgba(255,255,255,.22) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
}
.sp5-bolt {
  width: 46px; height: 46px; color: #fff; fill: currentColor;
  filter: drop-shadow(0 3px 6px rgba(146,44,0,.45));
  animation: sp5Bolt 1.8s ease-in-out infinite;
}

/* ==== Brand text (spinner ke neeche — minimal) ==== */
.sp5-brand {
  margin-top: 26px;
  color: #231810; font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: clamp(24px, 6vw, 32px); font-weight: 850; letter-spacing: -.045em;
  animation: sp5Up .5s ease .12s both;
}
.sp5-tag {
  margin-top: 7px; color: #66756d; font-size: 11px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  animation: sp5Up .5s ease .24s both;
}

/* ==== Keyframes — unki file ke exact values ==== */
@keyframes sp5Spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sp5SpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes sp5Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes sp5Breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 16px 32px rgba(255,102,0,.42)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 22px 42px rgba(255,102,0,.6)); }
}
@keyframes sp5Bolt {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 3px 6px rgba(146,44,0,.45)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 4px 10px rgba(146,44,0,.5)) drop-shadow(0 0 10px rgba(255,190,130,.55)); }
}
@keyframes sp5Aura {
  0% { transform: translate(-50%, -50%) scale(.92); opacity: .45; }
  100% { transform: translate(-50%, -50%) scale(1.14); opacity: .85; }
}
@keyframes sp5Float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: .3; }
  50% { transform: translateY(-18px) translateX(8px); opacity: .85; }
}
@keyframes sp5In { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sp5Up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==== Small screens / landscape safety ==== */
@media (max-width: 359px) { .sp5-spinner { transform: scale(.85); } }
@media (max-height: 520px) {
  .sp5-spinner { width: min(210px, 52vh); }
  .sp5-brand { margin-top: 14px; }
}

/* ==== Dark theme ==== */
html[data-theme="dark"] #splashScreen {
  background:
    radial-gradient(600px 420px at 50% 42%, rgba(255,102,0,.12), transparent 70%),
    linear-gradient(180deg,#1d110a 0%,#150b06 100%) !important;
}
html[data-theme="dark"] .sp5-brand { color: #fff7f0; }
html[data-theme="dark"] .sp5-tag { color: #c2a58f; }

/* ==== Reduced motion ==== */
@media (prefers-reduced-motion: reduce) {
  #splashScreen .splash-inner, .sp5-brand, .sp5-tag,
  .sp5-radar, .sp5-orbit, .sp5-ring-rev, .sp5-arcs, .sp5-ring-inner,
  .sp5-halo, .sp5-emblem, .sp5-bolt, .sp5-aura, .sp5-particles span { animation: none; }
}