body { margin: 0; }
html { overflow-x: hidden; overflow-y: scroll; }

#loading-bg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  background: var(--initial-loader-bg, #0d1117);
  z-index: 99999;
  user-select: none;
}

/* ── Logo wrapper ── */
.pl-logo-wrap {
  position: relative;
  width: min(204px, 47vw);
}

.pl-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Bouncing i-dot overlay ── */
.pl-dot-wrap {
  position: absolute;
  left: 81.2%;
  top: -6%;
  width: 6.4%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.pl-dot {
  position: relative;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #6DE0EF, #35C5DC 55%, #2BAFC4 100%);
  box-shadow: 0 0 10px 2px rgba(53, 197, 220, 0.45),
              0 0 24px 4px rgba(53, 197, 220, 0.12);
  animation: pl-bounce 1s cubic-bezier(0.25, 0, 0.5, 1) infinite;
}

.pl-dot-shadow {
  position: absolute;
  bottom: -14%;
  width: 60%;
  height: 20%;
  border-radius: 50%;
  background: rgba(53, 197, 220, 0.3);
  filter: blur(4px);
  animation: pl-shadow 1s cubic-bezier(0.25, 0, 0.5, 1) infinite;
}

@keyframes pl-bounce {
  0%   { transform: translateY(-160%) scaleX(1.2) scaleY(0.88); }
  4%   { transform: translateY(-140%) scale(1.06, 0.96); }
  10%  { transform: translateY(-110%) scale(0.96, 1.1); }
  18%  { transform: translateY(-50%) scale(0.92, 1.22); }
  24%  { transform: translateY(20%) scale(0.88, 1.45); }
  28%  { transform: translateY(65%) scale(0.92, 1.15); }
  30%  { transform: translateY(85%) scale(1.18, 0.68); }
  31%  { transform: translateY(92%) scale(1.35, 0.4); }
  33%  { transform: translateY(75%) scale(1.25, 0.55); }
  37%  { transform: translateY(42%) scale(1.1, 0.85); }
  45%  { transform: translateY(8%) scaleY(1.12); }
  54%  { transform: translateY(-40%) scale(0.94, 1.2); }
  63%  { transform: translateY(-75%) scale(0.96, 1.12); }
  72%  { transform: translateY(-100%) scale(0.98, 1.06); }
  82%  { transform: translateY(-125%) scale(1.02, 1.0); }
  92%  { transform: translateY(-150%) scale(1.12, 0.92); }
  100% { transform: translateY(-160%) scaleX(1.2) scaleY(0.88); }
}

@keyframes pl-shadow {
  0%   { transform: scale(0.4); opacity: 0.15; }
  31%  { transform: scale(1.3); opacity: 0.85; }
  33%  { transform: scale(1.1); opacity: 0.6; }
  55%  { transform: scale(0.7); opacity: 0.3; }
  100% { transform: scale(0.4); opacity: 0.15; }
}

/* ── Loading text with weave ── */
.pl-text {
  display: flex;
  gap: 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--initial-loader-color, rgba(255, 255, 255, 0.35));
  opacity: 0.5;
  text-transform: uppercase;
}

.pl-text span {
  display: inline-block;
  animation: pl-weave 1.4s ease infinite;
  transform-origin: center bottom;
}

@keyframes pl-weave {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  12%  { transform: translate3d(0.5px, -1.5px, 0) scale(1.14); opacity: 1; filter: brightness(1.4); }
  24%  { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  100% { transform: scale(1); }
}

/* ── Subtle bottom progress line ── */
.pl-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(53, 197, 220, 0.06);
  overflow: hidden;
}

.pl-progress-bar {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(53, 197, 220, 0.4), transparent);
  animation: pl-slide 1.8s ease-in-out infinite;
}

@keyframes pl-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(430%); }
}