/* Shared loading-screen artwork and presentation refresh. */

.loading-screen,
.cf-first-load-card {
  position: relative;
  isolation: isolate;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.loading-screen {
  background-image:
    linear-gradient(180deg, rgba(4, 13, 17, .08) 0%, rgba(4, 13, 17, 0) 54%, rgba(2, 8, 7, .82) 100%),
    url('/assets/loading-background-v20261023-2.webp') !important;
}

.cf-first-load-card {
  background-image:
    linear-gradient(180deg, rgba(4, 13, 17, .08) 0%, rgba(4, 13, 17, 0) 50%, rgba(2, 8, 7, .9) 86%, #020706 100%),
    url('/assets/loading-background-v20261023-2.webp') !important;
}

.loading-screen::after,
.cf-first-load-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: clamp(165px, 42vw, 205px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 12, 11, .62) 0%, rgba(4, 15, 13, .3) 68%, transparent 100%);
}

.loading-screen::before,
.cf-first-load-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: max(26px, calc(env(safe-area-inset-top) + 18px));
  left: 50%;
  width: min(98%, 420px);
  height: clamp(112px, 30vw, 132px);
  pointer-events: none;
  background-image:
    url('/assets/loading-logo-mark-v20261024-2.webp'),
    url('/assets/logo_ua-BFsVwmoN.png');
  background-position: center top, center bottom 2px;
  background-size:
    clamp(70px, 20vw, 88px) auto,
    min(97%, 410px) auto;
  background-repeat: no-repeat, no-repeat;
  filter: drop-shadow(0 3px 1px rgba(48, 19, 2, .96)) drop-shadow(0 8px 12px rgba(0, 0, 0, .66));
  transform: translateX(-50%);
}

html[lang="en"] .loading-screen::before,
html[lang="en"] .cf-first-load-card::before,
html[lang="ru"] .loading-screen::before,
html[lang="ru"] .cf-first-load-card::before {
  background-image:
    url('/assets/loading-logo-mark-v20261024-2.webp'),
    url('/assets/logo-C24xCona.png');
}

.loading-overlay {
  position: relative;
  z-index: 4;
  padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px));
  background: linear-gradient(180deg, rgba(2, 8, 7, 0), rgba(2, 8, 7, .62) 42%, rgba(2, 8, 7, .94));
}

.loading-title,
.loading-status {
  text-shadow: 0 2px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .7);
}

.loading-bar {
  border-color: rgba(227, 188, 91, .72);
  background: rgba(7, 24, 18, .68);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 2px 9px rgba(0, 0, 0, .42);
}

.cf-first-load-content {
  position: relative;
  z-index: 4;
}

@media (max-height: 680px) {
  .loading-screen::after,
  .cf-first-load-card::after {
    height: 148px;
  }

  .loading-screen::before,
  .cf-first-load-card::before {
    top: max(18px, calc(env(safe-area-inset-top) + 11px));
    width: min(96%, 400px);
    height: 102px;
    background-size:
      66px auto,
      min(94%, 376px) auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .loading-screen::before,
  .cf-first-load-card::before {
    animation: cf-loading-logo-in .55s ease-out both;
  }
}

@keyframes cf-loading-logo-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}