/* Pre-JS paint for signed-out /, /auth, and /feed.
   Kept off the main stylesheet so first paint does not wait on the app CSS.
   The visible word is a system font, larger than the Bebas heading React
   paints later, so the shell stays the largest contentful element.
   React removes these nodes on its first commit (see dismissLcpShell). */

.lcp-shell {
  display: none;
  box-sizing: border-box;
  margin: 0;
  background: #0a0a0a;
  color: #fff;
}

/* The shell sits under the app until React removes it. No background here:
   an empty #root must not hide that first paint. */
#root {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

html:not([data-lcp]) .lcp-shell-home,
html[data-lcp="home"] .lcp-shell-home,
html[data-lcp="auth"] .lcp-shell-auth {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 0.25rem;
}

html[data-lcp="feed"] .lcp-shell-feed {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  margin: 0;
  background: #0a0a0a;
}

.lcp-title {
  margin: 0;
}

.lcp-word {
  display: block;
  margin: 0;
  white-space: nowrap;
  font-family: Impact, "Arial Black", "Nimbus Sans Narrow", sans-serif;
  font-weight: 400;
  /* 4.5rem is ~508px wide and gets clipped on a 375 screen. Chrome sizes
     text LCP from the painted glyphs, not the line box, so a smaller font
     loses to the hero subtitle. scaleX keeps that painted area and fits
     the word to about 90% of a phone. */
  font-size: min(21.3vw, 5.75rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  transform: scaleX(0.6);
  transform-origin: center;
  color: #ff6b00;
}

.lcp-sub {
  margin: 0.75rem 0 0;
  max-width: 22rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #999;
}

/* Ink has to outsize the feed poster or that image becomes LCP after it decodes. */
.lcp-fill {
  margin: 0;
  font-family: Impact, "Arial Black", "Nimbus Sans Narrow", sans-serif;
  font-size: 5.5rem;
  line-height: 0.8;
  letter-spacing: 0;
  color: #ff6b00;
  word-break: break-all;
}