:root {
  --bricolage: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--bricolage);
  -webkit-font-smoothing: antialiased;
}

.brand { font-family: var(--bricolage); letter-spacing: -0.02em; }
.font-mono, input.font-mono { font-family: var(--mono); }

/* hide scrollbars on tab strip */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== Animations ===== */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.anim-spin-slow { animation: spinSlow 1.4s linear infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.anim-float { animation: float 3.5s ease-in-out infinite; }

/* staggered reveal for generated pages */
@keyframes reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.reveal-2 { animation-delay: 0.12s; }

/* chips pop in */
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.chip { animation: chipIn 0.4s ease both; }

/* shimmer placeholder for hero image */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, #e4e4e7 25%, #f4f4f5 37%, #e4e4e7 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* smooth scroll inside generated pages */
.gen-page { scroll-behavior: smooth; }

/* honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim-spin-slow, .anim-float, .reveal, .chip, .shimmer { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}