@import url('../branding/fonts.css');

:root {
  color-scheme: dark;
  --load-ground: #040907;
  --load-gold: #ffd24a;
  --load-ink: #f2eee6;
  --load-muted: #7c918a;
  --load-danger: #de7048;
  --load-action: #ffd24a;
  --load-assembly-duration: 8.5s;
  --load-reveal-duration: 1.2s;
}

:root[data-theme="light"] {
  color-scheme: light;
  --load-ground: #f4f1ea;
  --load-gold: #f0a81b;
  --load-ink: #0b1512;
  --load-muted: #4c5f58;
  --load-danger: #8f3618;
  --load-action: #8a5808;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body.load-shell {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--load-ink);
  background: var(--load-ground);
  font-family: "Archivo", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.load-stage {
  width: min(100%, 42rem);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.load-visual {
  display: grid;
  place-items: center;
  min-width: 88px;
  min-height: 88px;
}

.load-boot {
  display: grid;
  justify-items: center;
  position: relative;
}
.load-assembly { position: absolute; inset: 0; display: grid; place-items: center; animation: assembly-exit var(--load-reveal-duration) ease var(--load-assembly-duration) both; }
.load-assembly svg { width: 80px; height: 80px; }
@keyframes assembly-exit { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }

.load-lockup {
  display: block;
  width: min(204px, calc(100vw - 48px), 40vh);
  height: auto;
  aspect-ratio: 900 / 1152;
  object-fit: contain;
  animation: lockup-reveal var(--load-reveal-duration) ease-out var(--load-assembly-duration) 1 both;
  animation-play-state: paused;
}
:root:not([data-animation-ready="true"]) .load-boot * { animation-play-state: paused; }
:root[data-animation-ready="true"] .load-lockup { animation-play-state: running; }
.load-lockup--light { display: none; }
:root[data-theme="light"] .load-lockup--dark { display: none; }
:root[data-theme="light"] .load-lockup--light { display: block; }
@keyframes lockup-reveal {
  0% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

.load-navigation {
  display: none;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
}

html[data-load-variant="navigation"] .load-boot {
  display: none;
}

html[data-load-variant="navigation"] .load-navigation {
  display: grid;
}

html[data-load-variant="navigation"] .load-visual {
  min-width: 3.5rem;
  min-height: 3.5rem;
}

.kg-load,
.kg-nav {
  display: inline-grid;
  place-items: center;
  color: var(--load-gold);
}

.kg-load svg,
.kg-nav svg {
  display: block;
  overflow: visible;
}

.kg-load .kg-arc {
  transform-origin: 40px 40px;
  animation: kg-arc 8.5s cubic-bezier(.22, .9, .32, 1) 1 both;
}

.kg-load .kg-sp {
  transform-origin: 41px 37px;
  animation: kg-speaker 8.5s ease 1 both;
}

.kg-load .kg-d1 {
  animation: kg-dot-one 8.5s ease-out 1 both;
}

.kg-load .kg-d2 {
  animation: kg-dot-two 8.5s ease-out 1 both;
}

.kg-load .kg-ring {
  transform-origin: 40px 40px;
  animation: kg-ring 8.5s ease-out 1 both;
}

.kg-nav .kg-sp {
  transform-origin: 41px 37px;
  animation: kg-blink 1.1s ease-in-out infinite;
}

.load-status {
  width: min(100%, 24rem);
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
}

.status-note {
  min-height: 1.5em;
  margin: 0;
  color: var(--load-muted);
  font-size: clamp(.82rem, 2.4vw, .92rem);
  line-height: 1.5;
}

.status-meta {
  display: flex;
  min-height: 1.75rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.runtime-pill {
  color: var(--load-muted);
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.runtime-pill.is-healthy,
.runtime-pill.is-recovering {
  color: var(--load-action);
}

.runtime-pill.is-degraded,
.runtime-pill.is-offlinelocal,
.runtime-pill.is-misconfigured,
.runtime-pill.is-failed {
  color: var(--load-danger);
}

.continue-link,
.noscript-message a {
  color: var(--load-action);
  font-size: .82rem;
  font-weight: 700;
  text-underline-offset: .22em;
}

.continue-link:hover,
.continue-link:focus-visible,
.noscript-message a:hover,
.noscript-message a:focus-visible {
  color: var(--load-ink);
}

.continue-link:focus-visible,
.noscript-message a:focus-visible {
  outline: 2px solid var(--load-gold);
  outline-offset: .3rem;
  border-radius: .125rem;
}

.noscript-message {
  position: fixed;
  inset: auto 1rem max(1rem, env(safe-area-inset-bottom));
  margin: 0 auto;
  color: var(--load-ink);
  text-align: center;
  font-size: .9rem;
  line-height: 1.6;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes kg-arc {
  0% {
    transform: rotate(-900deg);
  }

  38%,
  100% {
    transform: rotate(0deg);
  }
}

@keyframes kg-speaker {
  0%,
  68% {
    opacity: 0;
    transform: scale(0);
  }

  78%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes kg-dot-one {
  0%,
  48% {
    opacity: 0;
    transform: translate(-24px, 26px);
  }

  56% {
    opacity: .62;
  }

  70%,
  100% {
    opacity: .62;
    transform: translate(0, 0);
  }
}

@keyframes kg-dot-two {
  0%,
  42% {
    opacity: 0;
    transform: translate(-18px, 19px);
  }

  50% {
    opacity: .34;
  }

  62%,
  100% {
    opacity: .34;
    transform: translate(0, 0);
  }
}

@keyframes kg-ring {
  0%,
  78% {
    opacity: 0;
    transform: scale(.55);
  }

  86% {
    opacity: .3;
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes kg-blink {
  0%,
  100% {
    opacity: .25;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .load-assembly { display: none; }
  .load-lockup { animation: none; opacity: 1; }
  .kg-load .kg-arc,
  .kg-load .kg-sp,
  .kg-load .kg-d1,
  .kg-load .kg-d2,
  .kg-load .kg-ring,
  .kg-nav .kg-sp {
    animation: none;
  }

  .kg-load .kg-arc,
  .kg-load .kg-sp,
  .kg-load .kg-d1,
  .kg-load .kg-d2,
  .kg-nav .kg-sp {
    transform: none;
  }

  .kg-load .kg-sp,
  .kg-nav .kg-sp {
    opacity: 1;
  }

  .kg-load .kg-d1 {
    opacity: .62;
  }

  .kg-load .kg-d2 {
    opacity: .34;
  }

  .kg-load .kg-ring {
    opacity: 0;
  }
}

/* Supplied v14 weave, unrolled; decorative assembly progress, not network progress. */
.woven-gauge { width: 152px; height: 4px; margin: 16px auto; background: var(--load-muted); opacity: .8; mask-image: repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 13px); border-radius: 2px; overflow: hidden; }
.woven-gauge span { display: block; height: 100%; background: var(--load-gold); transform-origin: left; animation: woven-fill 8.5s ease 1 both; }
@keyframes woven-fill { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
.kg-nav svg { width: 48px; height: 48px; }
.kg-nav .kg-arc { transform-origin: 40px 40px; animation: woven-turn 1.6s linear infinite; }
@keyframes woven-turn { to { transform: rotate(360deg); } }
html[data-load-variant="navigation"] .woven-gauge { display: none; }
@media (prefers-reduced-motion: reduce) { .woven-gauge span, .kg-nav .kg-arc { animation: none; transform: none; } }