/* Boot splash, following lablup/backend.ai-webui#7788: a Diagonal-Weave
   background, the Backend.AI wire-cube loader, and corner metadata. Loaded via a
   render-blocking <link> in index.html and served verbatim from public/static
   (not bundled), so it applies on first paint. The critical background color is
   inlined in index.html so the page paints instantly even before this loads.

   NOTE: this runs before React fetches theme.json, so the accent here is a fixed
   default (FastTrack primary blue), NOT the customer's colorPrimary. The in-app
   cube (BAILoadingIndicator) is themed; the splash cube can't be. */

.splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  transition: opacity 0.3s ease-out;
  font-family:
    "Ubuntu",
    "Noto Sans KR",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Diagonal Weave tokens — light */
  --splash-fg: #141414;
  /* ~4.6:1 on #ffffff — passes WCAG AA (4.5:1) for the 13-15px "Loading…"
     text with headroom for antialiasing, unlike #8c8c8c (3.36:1) or the
     borderline #767676 (4.54:1). */
  --splash-msg: #757575;
  --splash-line: rgba(20, 20, 20, 0.08);
  --splash-accent-line: rgba(22, 119, 255, 0.22);
  --splash-accent: #1677ff;
  --splash-veil: #ffffff;
  --splash-logo: url("/static/manifest/backend.ai-fasttrack-text-logo.svg");
}
html.pre-dark .splash {
  background: #141414;
  /* Diagonal Weave tokens — dark */
  --splash-fg: #dcdcdc;
  /* Lighter than the light-mode #8c8c8c: ~6.5:1 on #141414, comfortably
     past WCAG AA for the "Loading…" text. */
  --splash-msg: #9a9a9a;
  --splash-line: rgba(255, 255, 255, 0.08);
  --splash-accent-line: rgba(64, 150, 255, 0.24);
  --splash-accent: #4096ff;
  --splash-veil: #141414;
  --splash-logo: url("/static/manifest/backend.ai-fasttrack-text-logo-dark.svg");
}
.splash.splash-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Woven line background — two layers rotated ±23deg, drifting slowly. */
.splash-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.splash-weave line {
  stroke: var(--splash-line);
  stroke-width: 1.1;
}
.splash-weave line.accent {
  stroke: var(--splash-accent-line);
  stroke-width: 1.6;
}
.splash-drift {
  animation: splash-drift 16s linear infinite;
}
.splash-driftB {
  animation: splash-driftB 22s linear infinite;
}
@keyframes splash-drift {
  to {
    transform: translateY(28px);
  }
}
@keyframes splash-driftB {
  to {
    transform: translateY(-28px);
  }
}

/* Radial veil keeps the logo/loader area clean over the weave. */
.splash-veil {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(80%, 640px);
  height: max(70%, 440px);
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    var(--splash-veil) 0%,
    var(--splash-veil) 28%,
    transparent 62%
  );
}

/* Logo + loader lockup, centered. */
.splash-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(20px, 3vmin);
}
.splash-logo {
  width: min(280px, 46vmin);
  aspect-ratio: 158.35 / 22.04;
  background-image: var(--splash-logo);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.splash-loader {
  display: flex;
  align-items: center;
  gap: 12px;
}
.splash-msg {
  font-size: clamp(13px, 1.7vmin, 15px);
  font-weight: 400;
  color: var(--splash-msg);
  letter-spacing: 0.01em;
}

/* Wire-cube loader — spiral draw of the Backend.AI session cube. Mirrors the
   React BAILoadingIndicator; --L is each edge's length. */
.splash-cube {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.splash-cube .edge {
  fill: none;
  stroke: var(--splash-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--L);
  stroke-dashoffset: var(--L);
  animation: splash-cube-draw 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.1s);
}
@keyframes splash-cube-draw {
  0% {
    stroke-dashoffset: var(--L);
  }
  26% {
    stroke-dashoffset: 0;
  }
  72% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: calc(var(--L) * -1);
  }
}

/* Corner metadata — version/build bottom-left, copyright bottom-right. */
.splash-meta {
  position: fixed;
  left: 30px;
  right: 30px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  color: var(--splash-msg);
  pointer-events: none;
}
.splash-meta-main {
  font-size: 12.5px;
  color: var(--splash-fg);
  opacity: 0.72;
}
.splash-meta-main .splash-ver {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0.92;
}
.splash-meta-foot {
  font-size: 11px;
  opacity: 0.6;
  text-align: right;
}

@media (max-width: 760px) {
  .splash-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .splash-meta-foot {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash-drift,
  .splash-driftB {
    animation: none;
  }
  .splash-cube .edge {
    animation: none;
    stroke-dashoffset: 0;
  }
}