@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700&display=swap');
@import '../fonts/huge-icon/hugeicons-font.css';

@font-face {
  font-family: 'ClashDisplay';
  src: local('Sora');
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: 'Sora', system-ui, sans-serif;
  background-color: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  background-image: var(--gradient-grid);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main {
  display: block;
}

.surface-panel {
  background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.01) 35%
    ),
    rgb(var(--color-surface));
  border: 1px solid rgba(var(--color-border), 0.08);
  box-shadow: var(--shadow-card);
}

.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease-premium),
    transform 0.7s var(--ease-premium);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}