/* =========================================================
   ORPHEUS DAO — Design Tokens & Global Foundation
   ========================================================= */

:root {
  --black:   #0a0705;
  --char:    #15110c;
  --charcoal:#15110c;
  --gold:    #d4af37;
  --agold:   #d4af88;
  --marble:  #f5e8c7;
  --stone:   #a99f8a;
  --oracle:  #39ff14;
  --ink:     #1c1812;
  --rule:    rgba(212, 175, 136, 0.14);
  --rule-hi: rgba(212, 175, 136, 0.32);

  --serif: "Cormorant Garamond", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --ease-soft: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--black);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--marble);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--gold); font-weight: 400; }

::selection {
  background: var(--oracle);
  color: var(--black);
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--black); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--char), #2a221a);
  border: 1px solid #2a221a;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ----- Background textures (match conductor.html) ----- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.83  0 0 0 0 0.68  0 0 0 0 0.22  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .22;
  mix-blend-mode: overlay;
}
.constellation {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(245,232,199,.18), transparent 60%),
    radial-gradient(1px 1px at 78% 16%, rgba(245,232,199,.14), transparent 60%),
    radial-gradient(1px 1px at 32% 78%, rgba(245,232,199,.12), transparent 60%),
    radial-gradient(1px 1px at 88% 64%, rgba(245,232,199,.16), transparent 60%),
    radial-gradient(1px 1px at 55% 38%, rgba(57,255,20,.10), transparent 60%),
    radial-gradient(1px 1px at 22% 56%, rgba(57,255,20,.08), transparent 60%),
    radial-gradient(1px 1px at 68% 84%, rgba(212,175,55,.10), transparent 60%);
}

header, section, footer, main, .ui-layer { position: relative; z-index: 3; }

/* ----- Typography helpers ----- */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--agold);
}
.mono { font-family: var(--mono); }
.inline-gold { color: var(--gold); }

.marble-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,136,.45), transparent);
  max-width: 1320px;
  margin: 0 auto;
}

.section { padding: 100px 0; }
@media (max-width: 768px) { .section { padding: 72px 0; } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes oraclePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--oracle); }
  50%      { opacity: .55; box-shadow: 0 0 2px var(--oracle); }
}
@keyframes beatPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.4); opacity: .55; }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}