/* ============================================================
   LOADING SCREEN  —  public/stylesheets/loading.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  font-family: 'Bebas Neue', sans-serif;

  /* fade-out transition */
  opacity: 1;
  transition: opacity 0.55s ease;
  pointer-events: all;
}

/* fully hidden — добавляется классом через JS */
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* grain noise overlay */
#loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.35;
  pointer-events: none;
}

/* ── wrapper ── */
.ls-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* circular glow — always round */
.ls-glow-disc {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.03) 65%,
    transparent 75%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ls-glow-bloom {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 28%,
    rgba(255,255,255,0.05) 50%,
    transparent 68%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* spinning ring */
.ls-ring {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ls-ring circle {
  fill: none;
  stroke: #2a2a2a;
  stroke-width: 1;
  stroke-dasharray: 4 9;
  animation: ls-spin-ring 14s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes ls-spin-ring { to { transform: rotate(360deg); } }

/* K svg */
.ls-k-svg {
  position: absolute;
  width: 220px;
  height: 220px;
  overflow: visible;
}

/* dots */
.ls-dots { display: flex; gap: 10px; }

.ls-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2e2e2e;
  animation: ls-dot-blink 1.8s ease-in-out infinite;
}
.ls-dot:nth-child(2) { animation-delay: 0.3s; }
.ls-dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes ls-dot-blink {
  0%, 100% { background: #2e2e2e; transform: scale(1); }
  50%       { background: #fff;   transform: scale(1.4); box-shadow: 0 0 6px rgba(255,255,255,0.8); }
}

.ls-label {
  letter-spacing: 0.4em;
  font-size: 0.65rem;
  color: #3a3a3a;
  text-transform: uppercase;
}