/* ===== SARVARC Splash / Boot Screen ===== */
#sarvarcSplash {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg);
  overflow: hidden;
  transition: opacity .7s cubic-bezier(.4,0,.2,1), visibility .7s cubic-bezier(.4,0,.2,1), filter .7s cubic-bezier(.4,0,.2,1);
}
#sarvarcSplash.splash-hide {
  opacity: 0; visibility: hidden; pointer-events: none;
  filter: blur(6px);
}

/* Faint ambient grid, gives the boot screen depth instead of a flat fill */
#sarvarcSplash::before {
  content: ''; position: absolute; inset: -10%;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .12;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 72%);
}

.splash-logo-wrap {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.92) translateY(10px);
  filter: blur(7px);
  animation: splashLogoIn 1.1s cubic-bezier(.16,.8,.24,1) forwards;
}
.splash-logo-wrap img {
  position: relative; z-index: 1;
  width: 220px; height: auto; display: block;
  filter: drop-shadow(0 10px 34px rgba(0,150,255,.28));
}
@keyframes splashLogoIn {
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Soft breathing glow that sits behind the mark */
.splash-glow {
  position: absolute; z-index: 0;
  left: 50%; top: 50%; width: 320px; height: 190px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0,194,255,.38), rgba(0,110,255,.12) 46%, transparent 72%);
  filter: blur(28px);
  opacity: 0;
  animation: splashGlowIn 1.4s ease .05s forwards, splashGlowPulse 2.8s ease-in-out 1.15s infinite;
  pointer-events: none;
}
@keyframes splashGlowIn { to { opacity: 1; } }
@keyframes splashGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .5; }
  50%      { transform: translate(-50%, -50%) scale(1.14); opacity: .8; }
}

/* Light-sweep that travels across the logo silhouette (masked to the mark's
   own alpha channel via JS, so the shine stays inside the shape) */
.splash-shine {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.92) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 160% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: 0;
  pointer-events: none;
}
.splash-shine.run {
  animation: splashShineSweep 1.35s cubic-bezier(.4,0,.2,1) .85s forwards;
}
@keyframes splashShineSweep {
  0%   { background-position: 160% 0; opacity: 0; }
  14%  { opacity: .95; }
  68%  { opacity: .95; }
  100% { background-position: -60% 0; opacity: 0; }
}

.splash-sub {
  margin-top: 26px;
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500;
  letter-spacing: 6px; text-transform: uppercase; color: var(--text2);
  opacity: 0; transform: translateY(4px);
  animation: splashTextIn .9s cubic-bezier(.2,.8,.2,1) .55s forwards;
}

.splash-line {
  position: relative; overflow: hidden;
  margin-top: 20px; width: 46px; height: 1px;
  background: var(--cyan);
  opacity: 0;
  animation: splashLineIn 1.4s ease .65s forwards;
}
@keyframes splashLineIn {
  0% { opacity: 0; width: 0; }
  30% { opacity: .55; }
  100% { opacity: .35; width: 46px; }
}
/* Tightens the tracking back down as the label settles in, instead of a
   plain fade — reads as a more deliberate, designed reveal */
@keyframes splashTextIn {
  0%   { opacity: 0; transform: translateY(4px); letter-spacing: 9px; }
  100% { opacity: 1; transform: translateY(0);    letter-spacing: 3px; }
}

body.splash-active { overflow: hidden; }
.app { animation: appFadeIn .5s ease .1s both; }
@keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── GLOBAL POLISH: focus states, selection, press feedback ─── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(0,194,255,0.28); color: var(--text); }

button, .nav-btn, .sidebar-toggle-btn, [role="button"], a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
.nav-btn:focus-visible,
.sidebar-toggle-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
button:disabled, .btn-primary:disabled, .btn-secondary:disabled {
  opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none !important;
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 3px 14px rgba(0,194,255,0.35); }
.btn-secondary:active { transform: translateY(0); background: rgba(0,194,255,0.12); }
.nav-btn:active, .sidebar-toggle-btn:active { transform: translateY(0) scale(0.96); }