/* ═══════════════════ devvista v2 · CORE ═══════════════════
   Burgundy port of devvista.org. Loaded LAST (after argon +
   polish + old theme) so it wins the cascade.
   ══════════════════════════════════════════════════════════ */

/* (fonts load via <link> in the layouts — no CSS @import, it blocks rendering) */

/* ── 1. TOKENS ── */
:root {
  --dv-accent:      #8A1538;
  --dv-accent-h:    #6E1030;
  --dv-accent-l1:   #A82047;
  --dv-accent-l2:   #C24768;
  --dv-accent-l3:   #E05C7E;
  --dv-accent-soft: rgba(138, 21, 56, 0.32);
  --dv-accent-08:   rgba(138, 21, 56, 0.08);
  --dv-accent-14:   rgba(138, 21, 56, 0.14);
  --dv-accent-28:   rgba(138, 21, 56, 0.28);
  --dv-accent-35:   rgba(138, 21, 56, 0.35);

  --dv-dark:    #0E100F;
  --dv-dark-2:  #141614;
  --dv-dark-3:  #1A1D1B;
  --dv-cream:   #F5E6D3;
  --dv-cream-2: #E8D4B8;
  --dv-white:   #FFFFFF;
  --dv-muted:   #8E918E;

  --dv-border:  rgba(245, 230, 211, 0.08);
  --dv-shadow:  0 18px 60px rgba(0, 0, 0, 0.45);

  /* legacy vars re-pointed into the new palette */
  --rq-bg: #0E100F;
  --rq-surface: rgba(20, 22, 20, 0.92);
  --rq-surface-2: rgba(26, 29, 27, 0.88);
  --rq-border: rgba(232, 92, 126, 0.24);
  --rq-border-hot: rgba(194, 71, 104, 0.45);
  --rq-cyan: #C24768;
  --rq-green: #E05C7E;
  --rq-blue: #A82047;
  --rq-rose: #E05C7E;
  --rq-text: #F5E6D3;
  --rq-muted: #8E918E;
  --rq-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --rq-glow: 0 0 28px rgba(138, 21, 56, 0.25);
  --cyber-neon: #C24768;
  --cyber-neon-dim: rgba(194, 71, 104, 0.15);
  --cyber-neon-glow: rgba(138, 21, 56, 0.4);
  --cyber-cyan: #E05C7E;
  --cyber-cyan-dim: rgba(224, 92, 126, 0.12);
  --cyber-cyan-glow: rgba(138, 21, 56, 0.35);
  --cyber-purple: #A82047;
  --cyber-red: #E05C7E;
  --cyber-purple: #A82047;
  --cyber-yellow: #ff9a3c;
  --cyber-border-neon: rgba(138, 21, 56, 0.45);
  --cyber-dark: #0E100F;
  --cyber-surface: #0E100F;
  --cyber-surface-2: #141614;
  --cyber-surface-3: #1A1D1B;
  --cyber-border: rgba(232, 92, 126, 0.2);
  --cyber-text: #F5E6D3;
  --cyber-text-muted: #8E918E;
  --cyber-font-mono: 'Montserrat', sans-serif;
  --cyber-font-head: 'Montserrat', sans-serif;
  --cyber-font-body: 'Montserrat', sans-serif;
}

/* ── 2. BASE ── */
html { scroll-behavior: smooth; overflow-x: clip; }
html, body {
  font-family: 'Montserrat', sans-serif !important;
  background: var(--dv-dark) !important;
  color: var(--dv-cream) !important;
  text-rendering: geometricPrecision;
}

/* grain overlay — exact data-URI from devvista.org */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018;
  pointer-events: none;
  z-index: 9999;
}

/* kill the cyberpunk scanline overlay */
body::after { content: none !important; }

/* ── 3. SCROLLBAR ── */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: var(--dv-dark); }
::-webkit-scrollbar-thumb { background: var(--dv-accent); }
* { scrollbar-width: thin; scrollbar-color: var(--dv-accent) var(--dv-dark); }

/* ── 4. TYPE ── */
/* body-prefixed to out-rank the late-loading cyber block in scripts.html */
body h1, body h2, body h3, body h4, body h5, body h6,
body .card-title, body .requiem-loader-title {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--dv-white) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
body p, body li, body td, body th, body label, body span, body small {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--dv-cream) !important;
}
.text-muted, .text-secondary { color: var(--dv-muted) !important; }
code, pre, .font-monospace { font-family: 'JetBrains Mono', monospace !important; }

/* ── 5. FADE-UP SCROLL REVEAL (devvista signature) ── */
.fade-up { transition: opacity 0.6s ease, transform 0.6s ease; }
.js-loaded .fade-up { opacity: 0; transform: translateY(24px); }
.js-loaded .fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.s2 { transition-delay: 0.1s; }
.fade-up.s3 { transition-delay: 0.2s; }
.fade-up.s4 { transition-delay: 0.3s; }
.fade-up.s5 { transition-delay: 0.4s; }

/* ── 6. BUTTONS ── */
.dv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.9rem 2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s;
}
.dv-btn-primary { background: var(--dv-cream); color: var(--dv-dark) !important; }
.dv-btn-primary:hover {
  background: var(--dv-accent);
  color: var(--dv-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(138, 21, 56, 0.35);
}
.dv-btn-outline {
  background: transparent;
  color: var(--dv-cream) !important;
  border: 1.5px solid rgba(245, 230, 211, 0.22);
  font-weight: 700;
}
.dv-btn-outline:hover {
  border-color: var(--dv-cream);
  color: var(--dv-white) !important;
  background: rgba(245, 230, 211, 0.05);
}
.dv-btn-sm { padding: 0.55rem 1.3rem; font-size: 0.78rem; }
.dv-btn-accent { background: var(--dv-accent); color: var(--dv-white) !important; }
.dv-btn-accent:hover {
  background: var(--dv-accent-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(138, 21, 56, 0.38);
}

/* ── 7. KEYFRAMES ── */
@keyframes dvElectricZap {
  0%   { background-position: 100% center; }
  100% { background-position: 0% center; }
}
@keyframes dvEyebrowDrop { to { opacity: 1; transform: none; } }
@keyframes dvLineUp { to { transform: translateY(0); opacity: 1; } }
@keyframes dvFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dvPulse {
  0%   { box-shadow: 0 0 0 0 var(--dv-accent-35); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes dvMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes dvSpin { to { transform: rotate(360deg); } }