/* ───────────────────────────────────────────────────────────
   AR3NA — Base styles
   ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: 'ss01', 'ss02', 'cv01';
  overflow-x: hidden;
}

body {
  background-color: var(--surface-base);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,107,90,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(139,158,255,0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(94,201,168,0.03) 0%, transparent 40%);
  min-height: 100vh;
}

/* Paper grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
  z-index: 1;
}

.app {
  position: relative;
  z-index: 2;
  padding: var(--pad) 40px;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* App region drag for macOS title bar */
.title-drag {
  -webkit-app-region: drag;
  height: 28px;
  width: 100%;
  position: fixed;
  top: 0; left: 0;
  z-index: 10;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--paper-deep);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-mute);
}

/* Stagger fade-in animation */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp var(--dur-slow) var(--ease-out) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.fade-up:nth-child(1) { animation-delay: 0.05s; }
.fade-up:nth-child(2) { animation-delay: 0.12s; }
.fade-up:nth-child(3) { animation-delay: 0.19s; }
.fade-up:nth-child(4) { animation-delay: 0.26s; }
.fade-up:nth-child(5) { animation-delay: 0.33s; }
.fade-up:nth-child(6) { animation-delay: 0.40s; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes numberFlash {
  0% { color: inherit; }
  30% { color: var(--coral); }
  100% { color: inherit; }
}