/* ============================================================================
   Pre-hydration shell for the public surfaces.

   This paints from the inline markup in `index.html` with no JavaScript, so the
   first frame is already the final layout rather than a spinner that is later
   replaced. Every value below mirrors `src/features/annai-home/annai-home.css`
   — same background, same corner bloom geometry, same wordmark size and
   letter-spacing, same tagline positions, same search-pill height, same hero
   spacing, same intent-card dimensions and radius, same rail card aspect.

   The consequence is that hydration swaps content into place that is already
   where it will stay: no reflow, no shift, no visible "loading then loaded"
   transition. If either file changes these values, change both.

   The approved taglines are real text, not skeleton bars: they are fixed English
   copy in the live UI too, so painting them immediately is honest and costs
   nothing. The rail uses the same fictional sample images as the live React
   surface and labels them in both Japanese and English; everything that depends
   on server authority remains a neutral placeholder.
   ============================================================================ */

html,
body,
#root {
  min-height: 100%;
  margin: 0;
  /* Matches --ah-bg. A different value here would flash on hydration. */
  background: #faf8f4;
}

#annai-boot-shell {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: #faf8f4;
  color: #1c1917;
  font-family: Inter, "Noto Sans JP", "Noto Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Same single warm bloom as `.annai-home-shell::before`. */
#annai-boot-shell::before {
  content: "";
  position: absolute;
  top: -260px;
  left: -220px;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #f6e7d6 0%, rgba(246, 231, 214, 0) 70%);
  pointer-events: none;
}

#annai-boot-shell section {
  position: relative;
  display: grid;
  width: min(1200px, calc(100% - 96px));
  margin: 0 auto;
  padding-top: 22px;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 24px;
  align-items: start;
}

/* ------------------------------------------------------------ brand column */

.annai-boot-brand { padding-top: 4px; }

.annai-boot-wordmark {
  margin: 0;
  color: #1c1917;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.34em;
  white-space: nowrap;
}

.annai-boot-tagline {
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #1c1917;
}

.annai-boot-subtagline {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b6560;
}

/* --------------------------------------------------------------- controls */

.annai-boot-main { min-width: 0; display: grid; gap: 14px; }

.annai-boot-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.annai-boot-search {
  flex: 1;
  max-width: 520px;
  height: 46px;
  border: 1px solid #e7e2dc;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.annai-boot-chips {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.annai-boot-chip {
  width: 132px;
  height: 40px;
  border: 1px solid #e7e2dc;
  border-radius: 999px;
  background: #ffffff;
}

.annai-boot-chip.is-round { width: 40px; }

.annai-boot-strip {
  height: 50px;
  border: 1px solid #e7e2dc;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

/* ------------------------------------------------------------------- hero */

.annai-boot-hero {
  grid-column: 1 / -1;
  margin-top: 52px;
  text-align: center;
}

.annai-boot-title {
  width: min(60%, 430px);
  height: clamp(30px, 3.4vw, 46px);
  margin: 0 auto 30px;
  border-radius: 12px;
  background: rgba(28, 25, 23, 0.055);
}

.annai-boot-tiles {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.annai-boot-tile {
  width: min(280px, 42vw);
  height: 128px;
  border: 1px solid #e7e2dc;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

/* ------------------------------------------------------------------- rail */

.annai-boot-rail {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  margin-top: 44px;
  overflow: hidden;
}

.annai-boot-rail-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 226px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #1c1917;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
}

.annai-boot-rail-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 9, 0.42), transparent 62%);
}

.annai-boot-rail-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.annai-boot-sample {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border: 1px solid #e12920;
  border-radius: 6px;
  background: rgba(150, 18, 13, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

/* ----------------------------------------------------------------- status */

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

/* These tiny public-shell utilities live in the already-loaded boot sheet so
   public pages do not need the 22 KB merchant/app utility stylesheet. */
.annai-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.annai-skip-link {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  display: inline-flex;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  padding: 10px 16px;
  transform: translateY(-120%);
  border-radius: 0 0 8px 0;
  background: #1c1917;
  color: #fff;
  font: 600 14px/1.4 Inter, "Noto Sans JP", system-ui, sans-serif;
  text-decoration: none;
  transition: transform 150ms ease;
}

.annai-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #b86b2b;
  outline-offset: 2px;
}

.annai-translation-indicator {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.annai-translation-indicator-bar {
  width: 40%;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: #8a4f1d;
  animation: annai-translation-progress 1.2s ease-in-out infinite;
}

.annai-translation-indicator.error .annai-translation-indicator-bar {
  background: #9a5f16;
}

@keyframes annai-translation-progress {
  0% { transform: translateX(-100%) scaleX(0.4); }
  50% { transform: translateX(50%) scaleX(0.6); }
  100% { transform: translateX(250%) scaleX(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .annai-skip-link { transition: none; }
  .annai-translation-indicator-bar {
    width: 100%;
    border-radius: 0;
    animation: none;
  }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  #annai-boot-shell section {
    width: calc(100% - 56px);
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .annai-boot-brand { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .annai-boot-tagline { margin: 0; }
  .annai-boot-subtagline { display: none; }
}

@media (max-width: 768px) {
  #annai-boot-shell::before { top: -160px; left: -160px; width: 460px; height: 460px; }
  #annai-boot-shell section { width: calc(100% - 32px); padding-top: 14px; gap: 14px; }
  .annai-boot-wordmark { font-size: 17px; letter-spacing: 0.3em; }
  .annai-boot-tagline { font-size: 12px; }
  .annai-boot-row { flex-wrap: wrap; gap: 10px; }
  .annai-boot-search { order: 2; flex-basis: 100%; max-width: none; height: 44px; }
  .annai-boot-chips { order: 1; width: 100%; margin-left: 0; gap: 8px; }
  .annai-boot-chip { flex: 1; width: auto; height: 44px; }
  .annai-boot-chip.is-round { flex: 0 0 44px; width: 44px; }
  .annai-boot-hero { margin-top: 30px; }
  .annai-boot-title { width: 74%; margin-bottom: 20px; }
  .annai-boot-tiles { gap: 10px; }
  .annai-boot-tile { width: 100%; height: 108px; border-radius: 20px; }
  .annai-boot-rail { margin-top: 32px; }
  .annai-boot-rail-card { width: min(196px, 56vw); aspect-ratio: 4 / 5; }
}

/* No animation: the shell is the real layout, not a spinner, so there is
   nothing to signal with motion and nothing to distract from the content that
   replaces it. */

/* ---------------------------------------------------- chunk-failure fallback */

/* Styled here rather than in a JS-imported stylesheet: this state exists because
   a script or stylesheet chunk failed to load, so it must not depend on one. */
.annai-public-boot-error {
  display: grid;
  gap: 14px;
  justify-items: start;
  align-content: center;
  min-height: 60vh;
  width: min(1200px, calc(100% - 96px));
  margin: 0 auto;
  padding: 24px 0;
  font-family: Inter, "Noto Sans JP", "Noto Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  color: #1c1917;
}

.annai-public-boot-error h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.annai-public-boot-error p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b6560;
}

.annai-public-boot-error button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #1c1917;
  color: #faf8f4;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.annai-public-boot-error button:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .annai-public-boot-error { width: calc(100% - 32px); }
}