/*
 * Cedrus Games loading screen — the one every build shows.
 *
 * It is served once from /_brand/ on the games origin rather than copied into each
 * build, so the second game a visitor opens paints it from cache with nothing to
 * download. Everything here is namespaced: a game's own stylesheet loads alongside it
 * and neither may reach into the other.
 */

.cedrus-loading {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  /* The gradient is the first paint. The photographic background fades in over it
     once decoded, so a slow connection never shows a blank or flashing frame. */
  background: radial-gradient(120% 90% at 50% 12%, #174b3c 0%, #0d3227 45%, #08261f 100%);
  color: #f4ebdd;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  opacity: 1;
  transition: opacity 320ms ease;
}

.cedrus-loading[data-state='out'] {
  opacity: 0;
  pointer-events: none;
}

.cedrus-loading__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}

.cedrus-loading__bg[data-ready='1'] {
  opacity: 0.55;
}

/* A vignette keeps the centre readable whatever the background does behind it. */
.cedrus-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 60% at 50% 45%, rgb(8 38 31 / 0%) 0%, rgb(8 38 31 / 72%) 100%);
  pointer-events: none;
}

.cedrus-loading__inner {
  position: relative;
  z-index: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2.5vh, 1.5rem);
  padding: 0 16px;
  inline-size: min(420px, 100%);
  text-align: center;
}

.cedrus-loading__logo {
  inline-size: clamp(148px, 42vmin, 260px);
  block-size: auto;
  /* Reserves the layout box before the image decodes, so nothing jumps. */
  aspect-ratio: 2172 / 724;
}

.cedrus-loading__growth {
  position: relative;
  inline-size: clamp(192px, 34vmin, 320px);
  aspect-ratio: 1;
}

/*
 * Two stacked layers of the same 4x3 sheet. One shows the frame being held; the other
 * is what the last frame dissolves into when the cycle starts over, which is the only
 * moment in the loop where a hard cut would be visible.
 */
.cedrus-loading__frame {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 400% 300%;
  opacity: 0;
  transition: opacity 180ms ease;
}

.cedrus-loading__frame[data-active='1'] {
  opacity: 1;
}

.cedrus-loading__status {
  margin: 0;
  font-size: clamp(0.85rem, 3.4vmin, 1rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(244 235 221 / 82%);
}

.cedrus-loading__bar {
  inline-size: min(260px, 72vw);
  block-size: 6px;
  border-radius: 999px;
  background: rgb(244 235 221 / 16%);
  overflow: hidden;
}

.cedrus-loading__bar > span {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b8862b, #d8a43b 60%, #f0cf86 100%);
  transition: inline-size 220ms ease;
}

/*
 * Without a real progress signal the bar sweeps instead of filling, so it never
 * implies a position it does not know.
 */
.cedrus-loading[data-progress='unknown'] .cedrus-loading__bar > span {
  inline-size: 38%;
  animation: cedrus-sweep 1.5s ease-in-out infinite;
  transition: none;
}

@keyframes cedrus-sweep {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(290%);
  }
}

.cedrus-loading[data-failed='1'] .cedrus-loading__bar {
  display: none;
}

.cedrus-loading[data-failed='1'] .cedrus-loading__status {
  color: #e59a7c;
}

@media (prefers-reduced-motion: reduce) {
  .cedrus-loading,
  .cedrus-loading__bg,
  .cedrus-loading__frame,
  .cedrus-loading__bar > span {
    transition-duration: 1ms;
  }

  .cedrus-loading[data-progress='unknown'] .cedrus-loading__bar > span {
    animation: none;
    inline-size: 100%;
    opacity: 0.5;
  }
}