/*
 * TAK-1538 (TAK-1535 WC-4) — the app-start shell inside #root in index.html.
 * It paints before the bundle (and so before globals.css), so it carries its
 * own copy of the few colours it needs, per theme. theme-init.js sets
 * data-theme on <html> before first paint; light is the default.
 * The line repeats `.working-line` from src/styles/globals.css; keep the two
 * in step. React replaces this markup on mount.
 */
/* Static file, so the face is declared by its served path (the bundle's globals.css declares the same file). */
@font-face { font-family: 'Schibsted Grotesk'; src: url('/app/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
html { --boot-bg: #ffffff; --boot-text: #1f2328; --boot-text-3: #5f666f; --boot-border: #d0d7de; --boot-accent: #1f3fd6; }
html[data-theme='dark'] { --boot-bg: #0e1116; --boot-text: #e6edf3; --boot-text-3: #9aa1aa; --boot-border: #30363d; --boot-accent: #93a9ff; }

body { margin: 0; background: var(--boot-bg); }

.app-boot {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 56rem;
  margin: 40px auto;
  padding: 16px;
  border: 1px solid var(--boot-border);
  color: var(--boot-text);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.app-boot .working-line {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 2px;
  overflow: hidden;
  background: var(--boot-border);
}

.app-boot .working-line::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: var(--boot-accent);
  animation: boot-working-line 1400ms linear infinite;
}

.app-boot-word { margin: 8px 0 0; font-size: 28px; line-height: 1.2; }
/* TAK-1985: the new site's wordmark, as in src/styles/globals.css. */
.app-boot .wordmark { display: inline-flex; align-items: center; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.app-boot .wordmark-stop { display: inline-block; width: .3em; height: .3em; background: var(--boot-accent); margin-left: .1em; transform: translateY(.38em); }
.app-boot-text { margin: 8px 0 0; color: var(--boot-text-3); font-size: 14px; }

@keyframes boot-working-line {
  from { transform: translateX(-100%); }
  to { transform: translateX(333%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot .working-line::after {
    width: 100%;
    background: repeating-linear-gradient(90deg, var(--boot-accent) 0 6px, transparent 6px 10px);
    transform: none;
    animation: none;
  }
}