/* ─── Base resets ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

::selection {
  background: rgba(124, 58, 237, 0.35);
  color: #fff;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ─── Reveal on scroll ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── Ticker ──────────────────────────────────────────── */
#ticker-track { will-change: transform; }
#ticker-track:hover { animation-play-state: paused; }

/* ─── Card hover ──────────────────────────────────────── */
.card-hover {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.12);
}

/* ─── Gradient text ───────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Accent line ─────────────────────────────────────── */
.accent-line {
  position: relative;
  padding-bottom: 0.75rem;
}
.accent-line::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 2px;
  background: #7c3aed;
  border-radius: 1px;
}

/* ─── Prose (blog content) ────────────────────────────── */
.prose-dark { color: #d1d5db; }
.prose-dark h1,.prose-dark h2,.prose-dark h3 { color: #f9fafb; margin-top: 1.75em; margin-bottom: 0.75em; }
.prose-dark h2 { font-size: 1.5rem; font-weight: 600; }
.prose-dark h3 { font-size: 1.2rem; font-weight: 600; }
.prose-dark p  { line-height: 1.8; margin-bottom: 1.25em; }
.prose-dark a  { color: #8b5cf6; text-decoration: underline; text-decoration-color: rgba(139,92,246,0.4); }
.prose-dark a:hover { color: #a78bfa; }
.prose-dark code { background: #1c1c1c; border: 1px solid #2a2a2a; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; color: #c4b5fd; font-family: 'JetBrains Mono', monospace; }
.prose-dark pre { background: #141414; border: 1px solid #2a2a2a; padding: 1.25em; border-radius: 8px; overflow-x: auto; margin: 1.5em 0; }
.prose-dark pre code { background: none; border: none; padding: 0; color: #e2e8f0; }
.prose-dark blockquote { border-left: 3px solid #7c3aed; padding-left: 1.25em; margin: 1.5em 0; color: #9ca3af; font-style: italic; }
.prose-dark ul,.prose-dark ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.prose-dark li { margin-bottom: 0.4em; line-height: 1.7; }
.prose-dark img { border-radius: 8px; width: 100%; margin: 1.5em 0; }
.prose-dark hr { border-color: #2a2a2a; margin: 2em 0; }

/* ─── Tag badge ───────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 0.7rem; font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  border: 1px solid rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.1);
  color: #c4b5fd;
}

/* ─── Glow button ─────────────────────────────────────── */
.btn-accent {
  background: #7c3aed;
  color: white;
  font-weight: 500;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-accent:hover {
  background: #6d28d9;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}
.btn-accent:active { transform: translateY(0); }

/* ─── Admin sidebar ───────────────────────────────────── */
.admin-sidebar a.active {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border-left-color: #7c3aed;
}

/* ─── Status badges ───────────────────────────────────── */
.badge-draft     { background: rgba(107,114,128,0.2); color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }
.badge-published { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }

/* ─── Currency bar ────────────────────────────────────── */
.currency-item { display: flex; align-items: center; gap: 3px; }
.currency-up   { color: #10b981; }
.currency-down { color: #ef4444; }

/* ─── Hero glow ───────────────────────────────────────── */
.hero-glow {
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
  pointer-events: none;
  top: -100px; right: -100px;
  border-radius: 50%;
}

/* ─── Hero grid background ────────────────────────────── */
.hero-grid {
  background-image:
    linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ─── Input focus accent ──────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline: 2px solid rgba(124, 58, 237, 0.5) !important;
  outline-offset: 0;
}