/* =========================================================
   OMNIA SHIELD — APP-STYLE CINEMATIC SPLASH
   ========================================================= */
html.omnia-loading, html.omnia-loading body {
  overflow: hidden !important;
  background: #000 !important;
}
#omniaSplash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(24, 105, 255, .19), transparent 28%),
    radial-gradient(circle at 32% 49%, rgba(178, 16, 255, .15), transparent 30%),
    linear-gradient(180deg, #020413 0%, #000 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .72s cubic-bezier(.2,.7,.2,1), visibility .72s linear;
}
html.omnia-loaded #omniaSplash,
#omniaSplash.omnia-splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.omnia-splash-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(39, 108, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 108, 255, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 58%, transparent);
  transform: perspective(750px) rotateX(70deg) translateY(57%);
  transform-origin: bottom center;
  animation: omniaGridMove 4.8s linear infinite;
}
@keyframes omniaGridMove { to { background-position: 0 56px, 56px 0; } }

.omnia-splash-aura {
  position: absolute;
  width: min(82vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 34%, rgba(37,171,255,.06) 35%, transparent 36%),
    radial-gradient(circle, transparent 47%, rgba(153,34,255,.08) 48%, transparent 49%),
    radial-gradient(circle, transparent 59%, rgba(16,123,255,.07) 60%, transparent 61%);
  filter: drop-shadow(0 0 34px rgba(29,124,255,.15));
  animation: omniaAura 10s linear infinite;
}
@keyframes omniaAura { to { transform: rotate(360deg); } }

.omnia-splash-shell {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(90vw, 740px);
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.omnia-splash-logo-wrap {
  position: relative;
  width: clamp(145px, 24vw, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.omnia-splash-logo-wrap::before,
.omnia-splash-logo-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(90, 175, 255, .18);
  inset: -14%;
  animation: omniaOrbit 5.2s linear infinite;
}
.omnia-splash-logo-wrap::after {
  inset: -28%;
  border-color: rgba(180, 49, 255, .12);
  animation-duration: 7.4s;
  animation-direction: reverse;
}
@keyframes omniaOrbit {
  50% { transform: rotate(180deg) scale(1.025); }
  100% { transform: rotate(360deg); }
}
.omnia-splash-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 24%;
  filter:
    drop-shadow(0 0 22px rgba(30, 155, 255, .42))
    drop-shadow(0 0 46px rgba(155, 38, 255, .24));
  animation: omniaLogoPulse 2.2s ease-in-out infinite;
}
@keyframes omniaLogoPulse {
  0%,100% { transform: scale(.975); }
  50% { transform: scale(1.018); }
}
.omnia-splash-name {
  margin-top: 24px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(36px, 7vw, 74px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: .12em;
  text-indent: .12em;
  color: transparent;
  background: linear-gradient(100deg, #e7ddff 5%, #9d38ff 27%, #fff 46%, #19d7ff 76%, #6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 17px rgba(46, 166, 255, .20));
}
.omnia-splash-suite {
  margin-top: 15px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(14px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: .42em;
  text-indent: .42em;
  color: #43e8f2;
  text-transform: uppercase;
}
.omnia-splash-tagline {
  margin-top: 22px;
  font-family: "Inter", sans-serif;
  font-size: clamp(10px, 1.55vw, 15px);
  font-weight: 500;
  letter-spacing: .18em;
  text-indent: .18em;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
}
.omnia-splash-status {
  min-height: 24px;
  margin-top: clamp(35px, 6vh, 64px);
  font-family: "Inter", sans-serif;
  font-size: clamp(13px, 2vw, 19px);
  color: #4ce7f0;
}
.omnia-splash-progress {
  position: relative;
  width: min(82vw, 650px);
  height: 13px;
  margin-top: 20px;
  overflow: visible;
  border: 2px solid #19e7ef;
  border-left-color: #b91bff;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(29, 211, 255, .18);
  background: rgba(3, 9, 28, .82);
}
.omnia-splash-progress-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #be15ff 0%, #775dff 45%, #26cbff 100%);
  box-shadow: 0 0 16px rgba(44, 198, 255, .65);
  transition: width .14s linear;
}
.omnia-splash-progress-dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 24px #20dfff, 0 0 45px #20dfff;
  transition: left .14s linear;
}
.omnia-splash-percent {
  margin-top: 12px;
  min-height: 18px;
  font: 600 11px/1 "Inter", sans-serif;
  letter-spacing: .16em;
  color: rgba(194, 220, 255, .54);
}
.omnia-splash-ready {
  color: #65fff0;
  text-shadow: 0 0 17px rgba(64, 255, 232, .6);
}
@media (max-height: 700px) {
  .omnia-splash-logo-wrap { width: 125px; }
  .omnia-splash-name { margin-top: 13px; font-size: 34px; }
  .omnia-splash-suite { margin-top: 9px; }
  .omnia-splash-tagline { margin-top: 12px; }
  .omnia-splash-status { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .omnia-splash-bg, .omnia-splash-aura,
  .omnia-splash-logo-wrap::before, .omnia-splash-logo-wrap::after,
  .omnia-splash-logo { animation: none !important; }
}