/* THE LOADING SCREEN's one stylesheet (src/shared/ui/LoadingScreen.tsx; Ward, 2026-10-02).
 *
 * Linked from index.html, not imported by the bundle: index.html carries the same markup inside #root so the
 * first paint is never blank, and that copy is styled before any JS (or tokens.css, which the bundle brings)
 * exists. External on purpose: the CSP is 'self' with no nonce, so nothing inline (see theme-boot.js). React's
 * LoadingScreen uses these same classes, so the pre-JS copy and the React one cannot drift.
 *
 * COLOURS: the design-system tokens when they are loaded (var(--…)), else the same values from
 * design-system/tokens.json, light then dark (paper-1 page, ink-900 text, ink-500 muted, matcha-600 accent).
 * The theme is <html data-theme>, set pre-paint by theme-boot.js; with no attribute at all (the script
 * refused), the OS setting decides.
 * MOTION (design-system/README.md, Visual foundations): quiet, --ease-out / --ease-inout curves, no bounce,
 * nothing at all under prefers-reduced-motion. */

html { background: #f6f4eb; }
html[data-theme="dark"] { background: #1a1f17; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) { background: #1a1f17; } }

.loading-screen {
  --ls-ink: var(--text-body, #20261d);
  --ls-muted: var(--text-muted, #5e6858);
  --ls-accent: var(--accent, #4c7a34);
  --ls-ease: cubic-bezier(.65,0,.35,1);
  --ls-delay: 250ms; /* React sets it inline (LoadingScreen.tsx: the pre-JS copy's clock, carried over) */
  display: grid; place-items: center; align-content: center; gap: 20px;
  box-sizing: border-box; width: 100%; padding: 32px 16px;
  text-align: center; color: var(--ls-ink);
  opacity: 0;
  animation: ls-appear 420ms cubic-bezier(.22,1,.36,1) var(--ls-delay, 250ms) both;
}
[data-theme="dark"] .loading-screen { --ls-ink: var(--text-body, #edebe0); --ls-muted: var(--text-muted, #99a18d); --ls-accent: var(--accent, #85ae60); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .loading-screen { --ls-ink: #edebe0; --ls-muted: #99a18d; --ls-accent: #85ae60; }
}

/* fill: the whole viewport (100vh first, for a browser without dvh). area: the page's main area under the
   shell's sticky header (--shell-header-h, styles.css) less the main's own padding. */
.loading-screen--fill { min-height: 100vh; min-height: 100dvh; }
.loading-screen--area {
  min-height: calc(100vh - var(--shell-header-h, 65px) - 160px);
  min-height: calc(100dvh - var(--shell-header-h, 65px) - 160px);
}

/* The wordmark, as the shell header sets it (styles.css .wordmark), larger. */
.loading-mark { display: block; line-height: 1; }
.loading-screen .wordmark { display: inline-flex; flex-wrap: nowrap; align-items: baseline; white-space: nowrap; }
.loading-screen .wordmark-latin {
  font-family: "Instrument Serif", "Zen Old Mincho", serif; font-weight: 400;
  font-size: 56px; line-height: 1; letter-spacing: 0.005em; color: var(--ls-ink);
}
.loading-screen .wordmark-ja {
  margin-inline-start: 12px;
  font-family: "Zen Old Mincho", "Instrument Serif", serif; font-size: 34px; line-height: 1; color: var(--ls-muted);
  animation: ls-ink 2.8s var(--ls-ease) var(--ls-delay, 250ms) infinite;
}
@media (max-width: 480px) {
  .loading-screen .wordmark-latin { font-size: 44px; }
  .loading-screen .wordmark-ja { font-size: 27px; margin-inline-start: 10px; }
}

/* A slow matcha sheen across "Narai": the ink colour, one soft band of accent passing left to right, the
   glyphs as the clip. Only where text clipping exists (else the plain ink colour stays). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .loading-screen .wordmark-latin {
    background-image: linear-gradient(100deg, var(--ls-ink) 0%, var(--ls-ink) 38%, var(--ls-accent) 50%, var(--ls-ink) 62%, var(--ls-ink) 100%);
    background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: ls-sheen 2.8s var(--ls-ease) var(--ls-delay, 250ms) infinite;
  }
}

/* Three accent dots breathing in a stagger (also the auth interstitial's, features/auth-transition). */
.loading-dots { display: inline-flex; align-items: center; gap: 10px; height: 12px; }
.loading-dots > i {
  display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ls-accent, var(--accent, #4c7a34));
  opacity: 0.35; transform: scale(0.75);
  animation: ls-breathe 1.4s var(--ls-ease) infinite;
  animation-delay: var(--ls-delay, 0ms);
}
.loading-dots > i:nth-child(2) { animation-delay: calc(var(--ls-delay, 0ms) + 0.18s); }
.loading-dots > i:nth-child(3) { animation-delay: calc(var(--ls-delay, 0ms) + 0.36s); }
.loading-dots[data-still] > i { animation: none; opacity: 0.5; transform: none; }

.loading-caption {
  margin: 0; color: var(--ls-muted);
  font-family: "Schibsted Grotesk", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.loading-caption:lang(ja) { letter-spacing: 0.04em; }

@keyframes ls-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ls-sheen { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
@keyframes ls-ink { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ls-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  40% { opacity: 1; transform: scale(1.15); }
}

/* Reduced motion: no fade, no sheen, no breathing. Still appears after the delay (a step, not a fade), so a
   fast load still never flashes it: a static mark, three still dots, the caption. */
@media (prefers-reduced-motion: reduce) {
  .loading-screen { animation: ls-appear-still 1ms step-end var(--ls-delay, 250ms) both; transform: none; }
  .loading-screen .wordmark-latin, .loading-screen .wordmark-ja { animation: none; }
  .loading-screen .wordmark-latin { background: none; color: var(--ls-ink); -webkit-text-fill-color: currentColor; }
  .loading-screen .wordmark-ja { opacity: 1; }
  .loading-dots > i, .loading-dots > i:nth-child(2), .loading-dots > i:nth-child(3) { animation: none; opacity: 0.6; transform: none; }
}
@keyframes ls-appear-still { from { opacity: 0; } to { opacity: 1; } }