/* ── Reset & Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}

/* Dashboard pages use smaller base font */
body.dashboard {
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: auto;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--cowrie-gold); border-radius: 2px; }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes expand {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.85); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.06); }
}

@keyframes scrollDrop {
  0%,100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  40%,60% { opacity: 1; transform: scaleY(1); }
}

/* ── Scroll Reveal ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .25s; }
.reveal-delay-3 { transition-delay: .4s; }
.reveal-delay-4 { transition-delay: .55s; }