/* ---------- landing ---------- */
.landing {
  max-width: 640px; margin: 0 auto; padding: 8vh 24px 6vh;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-star {
  width: 128px; height: 128px; color: var(--coral);
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--coral) 35%, transparent));
  animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* Shoko critter as the landing centerpiece, mirroring the topbar brand swap.
   Hidden for every other theme; under shoko the .hero-star is hidden and this
   shows. The bob float lives on the wrapper (matching the star it replaces),
   while the idle/growl crossfade + hover zoom live on the stacked <img> frames,
   so the two transforms don't fight. */
.hero-critter { display: none; }
[data-theme="shoko"] .hero-star { display: none; }
[data-theme="shoko"] .hero-critter {
  display: block; position: relative; width: 128px; height: 128px;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--coral) 35%, transparent));
  animation: bob 3.2s ease-in-out infinite;
}
.hero-critter img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
  transition: opacity 0.12s ease, transform 0.25s cubic-bezier(.5,1.6,.5,1);
}
.hero-critter .critter-growl { opacity: 0; }
.hero-critter:hover .critter-idle { opacity: 0; }
.hero-critter:hover .critter-growl { opacity: 1; }
.hero-critter:hover img { transform: scale(1.08); }
.hero-title { font-family: var(--title-font, 'Fredoka'), "Noto Sans JP", sans-serif; font-weight: 700; font-size: 62px; margin: 14px 0 6px; letter-spacing: 0.5px; }
.hero-tagline { color: var(--muted); font-size: 16px; margin: 0 0 26px; max-width: 440px; line-height: 1.5; }
.hero-search-wrap { width: 100%; max-width: 480px; position: relative; }
#heroSearch {
  width: 100%; padding: 15px 22px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 16px; outline: none; font-family: inherit; text-align: center;
}
#heroSearch:focus { border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 18%, transparent); }
.hero-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 15;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.45); text-align: left; }
.hero-suggest-opt { padding: 11px 18px; font-size: 15px; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; }
.hero-suggest-opt:hover, .hero-suggest-opt.active { background: var(--surface); color: var(--coral); }
.hero-suggest-opt .hs-sub { color: var(--muted); font-size: 12px; }
/* min-height reserves one chip-row (chip = ~33px: 13px text + 7px*2 pad + 1px
   border*2) so the empty container holds its space and the layout doesn't shift
   when loadHeroSuggestions() fills it in. */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 16px 0 30px; min-height: 33px; }
.ex-chip {
  font-family: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--lavender); border: 1px solid var(--border); cursor: pointer;
}
.ex-chip:hover { border-color: var(--lavender); transform: translateY(-1px); }
.hero-actions { display: flex; gap: 12px; }
.hero-stat { color: var(--muted); font-size: 13px; margin-top: 28px; }
.hero-stat b { color: var(--mint); }

/* Loading placeholders for content backed by the slower people/teams queries
   (hero chips, search chips, hero stat line) -- a plain surface-colored block,
   same footprint as the real content, with a slow opacity breathe so it reads
   as "loading" without being a loud/busy animation. Sized per call site via
   width, not a shared class, so each one approximates its real content's
   shape and nothing jumps when the real content swaps in. */
@keyframes skel-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
.chips-skel, .hero-stat-skel {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; animation: skel-breathe 1.6s ease-in-out infinite;
}
.chips-skel { width: 64px; height: 25px; }
.chips-skel-lg { width: 88px; height: 33px; }
.hero-stat-skel { width: 220px; height: 13px; border-radius: 6px; border: none; }
@media (prefers-reduced-motion: reduce) {
  .chips-skel, .hero-stat-skel { animation: none; opacity: 0.7; }
}