/* FERDA — only what Tailwind can't express. All component styling lives
   in markup as utility classes; design tokens are in tailwind.config (head partial). */

html { font-family: 'Manrope', system-ui, sans-serif; color: #151517; }

/* MPA navigation polish: cross-document view transitions = crossfade instead
   of a white flash on supporting browsers (Chrome/Edge/Safari 18+). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* reserve chrome space before the bundle renders it — no layout jump */
#site-header:empty { min-height: 104px; }
#site-footer:empty { min-height: 320px; }

/* Fraunces optical sizing for display headings */
.font-display { font-optical-sizing: auto; letter-spacing: -0.01em; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.fade-in { animation: fadeIn .35s ease both; }

@keyframes slideUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.slide-up { animation: slideUp .4s ease both; }

@keyframes drawerIn { from { transform: translateX(100%) } to { transform: none } }
.drawer-in { animation: drawerIn .25s ease both; }

.scroll-thin::-webkit-scrollbar { height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #e0e0e3; border-radius: 3px; }

@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton {
  background: linear-gradient(90deg, #f2f2f2 25%, #e8e8ea 37%, #f2f2f2 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}