docs/apps/engine-docs/app/global.css

@import '@hanzo/font/css';
@import 'tailwindcss';
@import '@hanzo/docs-base-ui/css/neutral.css';
@import '@hanzo/docs-base-ui/css/preset.css';
@plugin 'tailwindcss-animate';

/* Zen is the family. The import above declares the faces and publishes
   --font-zen-sans / --font-zen-mono; they are spelled HERE and nowhere else,
   bound to the --font-sans / --font-mono pair every rule and every font-*
   utility already reads — so the next face swap is these two lines, not a sweep.
   Unlayered, so it outranks Tailwind's own @layer theme defaults. */
:root {
  --font-sans: var(--font-zen-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-zen-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
}

@theme {
  --spacing-page: 1436px;
  --color-brand: hsl(0, 98%, 63%);
  --color-brand-foreground: white;
  --color-brand-secondary: hsl(0, 80%, 50%);
  --color-brand-secondary-foreground: white;
  --color-brand-200: hsl(0, 90%, 72%);

  --color-landing-foreground: #1a1a2e;
  --color-landing-foreground-200: #4a4a6a;
}

.dark {
  --color-landing-foreground: #e4e4f0;
  --color-landing-foreground-200: #a0a0c0;

  --color-brand: hsl(0, 98%, 63%);
  --color-brand-secondary: hsl(0, 100%, 65%);
  --color-brand-secondary-foreground: black;
  --color-brand-foreground: white;
  --color-brand-200: hsl(0, 90%, 80%);
}

@theme inline {
  --default-mono-font-family: var(--font-mono);
  --animate-pulse-fast: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
}

/* Selection */
::selection {
  background: hsl(0, 98%, 63%);
  color: white;
}

/* Starfield Background */
.stars {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 200px 60px, rgba(255,77,77,0.6), transparent),
    radial-gradient(1px 1px at 250px 150px, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 300px 40px, rgba(255,77,77,0.4), transparent);
  background-size: 350px 200px;
  animation: twinkle 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Nebula Gradient */
.nebula {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255, 77, 77, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 30%, rgba(0, 229, 204, 0.08), transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 90%, rgba(255, 77, 77, 0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

html {
  scrollbar-gutter: stable;
}

html:has(body[data-scroll-locked]) {
  scrollbar-gutter: auto;
}

body {
  background-color: var(--color-fd-background);
}

:root {
  color-scheme: dark;
  --color-fd-background: hsl(0, 0%, 2%);
  --color-fd-foreground: hsl(0, 0%, 96%);
  --color-fd-muted: hsl(0, 0%, 10%);
  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
  --color-fd-popover: hsl(0, 0%, 4%);
  --color-fd-popover-foreground: hsl(0, 0%, 90%);
  --color-fd-card: hsl(0, 0%, 4%);
  --color-fd-card-foreground: hsl(0, 0%, 96%);
  --color-fd-border: hsla(0, 0%, 40%, 0.2);
  --color-fd-primary: hsl(0, 0%, 96%);
  --color-fd-primary-foreground: hsl(0, 0%, 8%);
  --color-fd-secondary: hsl(0, 0%, 12%);
  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
  --color-fd-accent: hsla(0, 0%, 40%, 0.3);
  --color-fd-accent-foreground: hsl(0, 0%, 92%);
  --color-fd-ring: hsl(0, 0%, 55%);
  --color-fd-overlay: hsla(0, 0%, 0%, 0.3);
  --color-fd-warning: hsl(0, 0%, 96%);
  --color-fd-idea: hsl(0, 0%, 96%);
  --color-fd-info: hsl(0, 0%, 96%);
  --color-fd-error: hsl(0, 0%, 96%);
  --color-fd-success: hsl(0, 0%, 96%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 2%);
  --color-fd-foreground: hsl(0, 0%, 96%);
  --color-fd-muted: hsl(0, 0%, 10%);
  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
  --color-fd-popover: hsl(0, 0%, 4%);
  --color-fd-popover-foreground: hsl(0, 0%, 90%);
  --color-fd-card: hsl(0, 0%, 4%);
  --color-fd-card-foreground: hsl(0, 0%, 96%);
  --color-fd-border: hsla(0, 0%, 40%, 0.2);
  --color-fd-primary: hsl(0, 0%, 96%);
  --color-fd-primary-foreground: hsl(0, 0%, 8%);
  --color-fd-secondary: hsl(0, 0%, 12%);
  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
  --color-fd-accent: hsla(0, 0%, 40%, 0.3);
  --color-fd-accent-foreground: hsl(0, 0%, 92%);
  --color-fd-ring: hsl(0, 0%, 55%);
  --color-fd-overlay: hsla(0, 0%, 0%, 0.3);
}

/* Animation Keyframes */
@keyframes twinkle {
  0% { opacity: 0.4; }
  100% { opacity: 0.7; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Ninja Hero Animations */
.ninja-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ninja-container {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ninja-emoji {
  font-size: 64px;
  line-height: 1;
  transition: none;
  filter: drop-shadow(0 0 20px rgba(253, 68, 68, 0.4));
}

.ninja-visible {
  opacity: 1;
  transform: scale(1);
  animation: ninjaFloat 3s ease-in-out infinite;
}

.ninja-poof-out {
  animation: poofOut 0.4s ease-in forwards;
}

.ninja-hidden {
  opacity: 0;
  transform: scale(0);
}

.ninja-poof-in {
  animation: poofIn 0.4s ease-out forwards;
}

.ninja-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ninja-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, hsl(0, 98%, 63%), hsl(0, 80%, 50%));
  animation: particleBurst 0.5s ease-out forwards;
  transform-origin: center;
  --angle: 0deg;
  --speed: 50px;
  --size: 6px;
}

.ninja-particle:nth-child(odd) {
  background: radial-gradient(circle, #00e5cc, #14b8a6);
}

.ninja-role {
  font-family: var(--font-mono), monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(0, 98%, 63%);
  min-height: 1.2em;
  text-align: center;
}

.ninja-role-in {
  animation: roleIn 0.3s ease-out forwards;
}

.ninja-role-out {
  animation: roleOut 0.25s ease-in forwards;
}

@keyframes ninjaFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.05) translateY(-6px); }
}

@keyframes poofOut {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(-20deg);
  }
}

@keyframes poofIn {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(20deg);
  }
  60% {
    opacity: 0.8;
    transform: scale(1.15) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes particleBurst {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--speed)) scale(0);
    opacity: 0;
  }
}

@keyframes roleIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes roleOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }
}

@media (max-width: 640px) {
  .ninja-container {
    width: 80px;
    height: 80px;
  }
  .ninja-emoji {
    font-size: 52px;
  }
  .ninja-role {
    font-size: 0.7rem;
  }
}