/*
 * Loading screen (USER-REQUESTED 2026-10-11: "buna benzer bir loading ekranı tasarla. logo placeholder olsun. altında
 * yükleniyor yazsın." + "launcher yerine bu olacak"). Markup: index.html #loading-screen (up from the first paint);
 * driver: client/ui/loading-screen.ts; line timing: client/preload/loading-view.ts.
 *
 * Layers, back to front: dark base colour (shown at once) -> backdrop (img/loading-backdrop.svg, original vector art,
 * faded in once decoded, a very slow zoom) -> two drifting fog layers -> shade (overall darkening, a calmer area behind
 * the logo, vignette) -> centre column (logo, progress line, "Yükleniyor", quiet note). Motion is transform/opacity only
 * and stops with prefers-reduced-motion; the whole screen is display:none once it has faded out.
 */
.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b0a09;
  color: #ddd0b4;
  font-family: var(--ko-font-sans);
  cursor: default;
  user-select: none;
  opacity: 1;
  transition: opacity 700ms ease;
}
.loading-screen.is-hidden { opacity: 0; pointer-events: none; }
.loading-screen[hidden] { display: none; }

.loading-backdrop,
.loading-fog,
.loading-shade { position: absolute; pointer-events: none; }

.loading-backdrop {
  inset: -3%;
  background: #0b0a09 url("/img/loading-backdrop.svg") 50% 50% / cover no-repeat;
  opacity: 0;
  transition: opacity 1400ms ease;
  transform-origin: 50% 42%;
  animation: loading-zoom 60s ease-in-out infinite alternate;
}
.loading-backdrop.is-ready { opacity: 1; }

.loading-fog { inset: 0; }
.loading-fog::before,
.loading-fog::after { content: ""; position: absolute; inset: 22% -25% 0 -25%; }
.loading-fog::before {
  background:
    radial-gradient(ellipse 30% 16% at 22% 52%, rgba(160, 154, 142, .13), transparent 72%),
    radial-gradient(ellipse 26% 12% at 64% 40%, rgba(160, 154, 142, .10), transparent 72%),
    radial-gradient(ellipse 40% 18% at 46% 78%, rgba(130, 125, 116, .14), transparent 72%);
  animation: loading-fog-a 80s ease-in-out infinite alternate;
}
.loading-fog::after {
  background:
    radial-gradient(ellipse 34% 14% at 78% 62%, rgba(150, 145, 134, .11), transparent 72%),
    radial-gradient(ellipse 28% 12% at 34% 30%, rgba(150, 145, 134, .07), transparent 72%),
    radial-gradient(ellipse 44% 16% at 60% 92%, rgba(120, 116, 108, .12), transparent 72%);
  animation: loading-fog-b 110s ease-in-out infinite alternate;
}

.loading-shade {
  inset: 0;
  background:
    radial-gradient(ellipse 30% 24% at 50% 47%, rgba(9, 8, 7, .5), transparent),
    radial-gradient(ellipse 78% 74% at 50% 46%, transparent 42%, rgba(0, 0, 0, .8)),
    rgba(10, 9, 8, .46);
}

.loading-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0 24px;
  text-align: center;
  transform: translateY(-1.5vh);
}

/* The logo placeholder: one file (brand/logo.svg), fitted into this box whatever its aspect ratio. */
.loading-logo {
  display: block;
  width: auto;
  height: clamp(54px, 9vh, 128px);
  max-width: min(84vw, 460px);
  object-fit: contain;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .65));
}

.loading-progress,
.loading-status { width: clamp(220px, 16vw, 340px); }

.loading-progress {
  position: relative;
  height: 2px;
  margin-top: clamp(22px, 3.8vh, 44px);
  overflow: hidden;
  border-radius: 1px;
  background: rgba(201, 169, 110, .15);
}
.loading-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(140, 108, 58, .55), #b8975c 55%, #dcc08a);
}

.loading-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .24em;
  color: rgba(222, 208, 178, .78);
}
.loading-text { grid-column: 2; white-space: nowrap; padding-left: .24em; }
.loading-dots { display: inline-block; width: 1.5em; text-align: left; }
.loading-dots::after {
  content: "...";
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: loading-dots 1800ms steps(4, jump-none) infinite;
}
.loading-percent {
  grid-column: 3;
  justify-self: end;
  font-size: 11px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: rgba(201, 169, 110, .55);
}

.loading-note {
  max-width: min(90vw, 560px);
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .04em;
  color: rgba(222, 208, 178, .45);
}
.loading-note[hidden] { display: none; }
.loading-note[data-level="warn"] { color: rgba(230, 146, 124, .78); }

.loading-screen.is-failed .loading-fill { background: rgba(176, 84, 64, .7); }
.loading-screen.is-failed .loading-dots { visibility: hidden; }

/* The intro's first card shows the same logo file (ui/screens.ts buildIntroBrand; USER-REQUESTED 2026-10-11, in place of
   the native K2 Network / MGame / Noah System cards): the black stage, the logo in the Noah System logo's box. */
.intro-brand { position: absolute; inset: 0; pointer-events: none; }
.intro-brand[hidden] { display: none; }
.intro-brand > img { position: absolute; object-fit: contain; }

@keyframes loading-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes loading-fog-a { from { transform: translate3d(-5%, 0, 0); } to { transform: translate3d(5%, -1%, 0); } }
@keyframes loading-fog-b { from { transform: translate3d(6%, 1%, 0); } to { transform: translate3d(-6%, 0, 0); } }
@keyframes loading-dots { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .loading-backdrop,
  .loading-fog::before,
  .loading-fog::after { animation: none; }
  .loading-dots::after { animation: none; clip-path: none; }
}