/* Otto integration of ui_kit (HeroScene + motion). Maps the kit's tokens onto the site theme. */
:root {
  --bg: var(--color-bg);
  --fg: var(--color-text);
  --ease: cubic-bezier(0.25, 0.9, 0.3, 1);
  /* Brighter than the brand orange so accent text clears contrast on the dark hero stage. */
  --hero-accent: #FF8A57;
  --hero-from: #1a1917;
  --hero-to: #3a2a22;
  /* Height of the sticky nav (h-16 + 1px border). */
  --ui-hero-offset: 65px;
}
/* The hero stage is always dark, whatever the site theme, so its text is fixed light. */
.otto-hero-h1 { color: #fff; }
.otto-hero-accent { color: var(--hero-accent); }
.otto-hero-sub { color: rgba(255, 255, 255, 0.78); }
.otto-hero-quote { color: rgba(255, 255, 255, 0.62); }
.otto-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 2rem;
  border-radius: 0.5rem; font-size: 1rem; font-weight: 600; text-decoration: none;
  background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); transition: background 0.2s;
}
.otto-hero-btn:hover { background: var(--color-primary-hover); }
@media (max-width: 640px) {
  .otto-hero-h1 { font-size: 2.1rem; margin-bottom: 1.25rem; }
  .otto-hero-sub { line-height: 1.6; }
}

/* Static first-paint shell (index.html #static-hero): shown only on "/" until the WASM app mounts. */
#static-hero { display: none; }
html.home-shell #static-hero { display: block; }
.shell-nav { height: 65px; box-sizing: border-box; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }