/*
 * KREW UP loading screen. Shared by the static copy in index.html (painted
 * before any JavaScript loads) and <LoadingScreen> in React, which continues
 * the same animation via --since instead of restarting it.
 *
 * Plain CSS on purpose: it must work before the app stylesheet exists. The
 * colours are the brand anchors (identical in both themes): Brand Ink
 * #0f1011, Neon Lime #d7ff3a, Brand Pink #ff2d6b.
 */
.krew-loader {
  --since: 0ms;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.75rem;
  overflow: hidden;
  background: #0f1011;
  transition: opacity 320ms ease-in;
}

/* Soft lime and pink light behind the logo, over a faint halftone. */
.krew-loader__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 46%, rgb(215 255 58 / 0.16), transparent 32%),
    radial-gradient(circle at 70% 64%, rgb(255 45 107 / 0.12), transparent 30%),
    radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.6px) 0 0 / 18px 18px;
  mask-image: radial-gradient(circle at 50% 48%, #000 0, transparent 55%);
  animation: krew-glow 3.2s ease-in-out infinite alternate;
  animation-delay: var(--since);
}

.krew-loader__logo {
  position: relative;
  width: min(64vw, 17rem);
  animation:
    krew-slap 720ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both,
    krew-bob 2.8s ease-in-out infinite;
  animation-delay: var(--since), calc(var(--since) + 720ms);
}

.krew-loader__logo img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* A light sweep across the artwork only (masked by the logo's own shape). */
.krew-loader__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.55) 50%, transparent 62%) 0 0 /
    260% 100% no-repeat;
  -webkit-mask: url('/brand/krew-up-stacked-720.webp') center / contain no-repeat;
  mask: url('/brand/krew-up-stacked-720.webp') center / contain no-repeat;
  animation: krew-shine 2.6s ease-in-out infinite;
  animation-delay: calc(var(--since) + 650ms);
}

.krew-loader__bar {
  position: relative;
  width: 9rem;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  animation: krew-fade 300ms ease-out both;
  animation-delay: calc(var(--since) + 450ms);
}

.krew-loader__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: #d7ff3a;
  animation: krew-slide 1.1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

.krew-loader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shown by boot-check.js when the app is slow to start or fails to load. */
.krew-loader__help {
  position: relative;
  max-width: min(84vw, 20rem);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  text-align: center;
  color: #f6f0e0;
  animation: krew-help-in 260ms ease-out both;
}

.krew-loader__help-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.krew-loader__help-detail {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgb(246 240 224 / 0.75);
  overflow-wrap: anywhere;
}

.krew-loader__help-button {
  margin-top: 1rem;
  min-height: 2.75rem;
  padding: 0 1.5rem;
  border: 2px solid #0f1011;
  border-radius: 999px;
  background: #d7ff3a;
  color: #0f1011;
  font: inherit;
  font-weight: 800;
  box-shadow: 3px 3px 0 #ff2d6b;
  cursor: pointer;
}

.krew-loader__help-button:focus-visible {
  outline: 3px solid #4da3ff;
  outline-offset: 3px;
}

@keyframes krew-help-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.krew-loader--leaving {
  opacity: 0;
  pointer-events: none;
}

@keyframes krew-slap {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.35) rotate(-10deg);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1.08) rotate(2.5deg);
  }
  78% {
    transform: scale(0.97) rotate(-1deg);
  }
  100% {
    transform: none;
  }
}

@keyframes krew-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-7px) rotate(-1.2deg);
  }
}

@keyframes krew-shine {
  0% {
    background-position: 130% 0;
  }
  55%,
  100% {
    background-position: -30% 0;
  }
}

@keyframes krew-slide {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(260%);
  }
}

@keyframes krew-glow {
  to {
    transform: scale(1.06);
    opacity: 0.8;
  }
}

@keyframes krew-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .krew-loader,
  .krew-loader * {
    animation: none !important;
    transition: none !important;
  }
  .krew-loader__shine {
    display: none;
  }
  .krew-loader__bar span {
    width: 100%;
    opacity: 0.5;
  }
}