/* Alberti 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.22, 1, 0.36, 1);
  --hero-accent: #E9BC58;
  --hero-from: #030019;
  --hero-to: #14104a;
  /* Height of the sticky nav (h-16 + 1px border) so the hero fits the first screen. */
  --ui-hero-offset: 65px;
}
/* The hero stage is always dark, whatever the site theme, so its text is fixed light. */
.alb-hero-h1 { color: #fff; }
.alb-hero-sub { color: rgba(255, 255, 255, 0.8); }
.alb-hero-sub:hover { color: #fff; }
.alb-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; transition: background 0.2s, color 0.2s;
}
.alb-hero-btn--primary { background: var(--color-primary); color: #030019; border: 1px solid var(--color-primary); }
.alb-hero-btn--primary:hover { background: var(--color-primary-hover); }
.alb-hero-btn--ghost { border: 1px solid #fff; color: #fff; }
.alb-hero-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Phones: the desktop hero type sizes wrap to 4+ lines and push the hero past one screen. */
@media (max-width: 640px) {
  .alb-hero-h1 { font-size: 2.25rem; margin-bottom: 1rem; }
  .alb-hero-sub { font-size: 1rem; line-height: 1.6; margin-bottom: 1.75rem; }
}

/* 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; }
.alb-shell-nav { height: 65px; box-sizing: border-box; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }