/* Bryforge rainbow-space visual alignment.
   Shared visual language with Phase1: readable black glass, luminous spectrum buttons,
   moving cosmic sheen, glowing stars, and premium builder-system presentation. */

:root {
  --rs-bg: #02030a;
  --rs-panel: rgba(8, 12, 24, 0.84);
  --rs-text: #f8fbff;
  --rs-muted: #b9c7df;
  --rs-line: rgba(180, 215, 255, 0.18);
  --rs-line-hot: rgba(116, 231, 255, 0.46);
  --rs-cyan: #30f7ff;
  --rs-blue: #6388ff;
  --rs-violet: #a45dff;
  --rs-pink: #ff48dc;
  --rs-red: #ff4e5e;
  --rs-orange: #ff9c35;
  --rs-gold: #ffe66b;
  --rs-green: #66ff9a;
  --rs-spectrum: linear-gradient(90deg, #30f7ff, #6388ff, #a45dff, #ff48dc, #ff4e5e, #ff9c35, #ffe66b, #66ff9a, #30f7ff);
  --rs-spectrum-hot: linear-gradient(90deg, #f8fbff, #30f7ff, #6388ff, #a45dff, #ff48dc, #ff9c35, #ffe66b, #f8fbff);
  --rs-glass: radial-gradient(circle at 16% 8%, rgba(48, 247, 255, 0.12), transparent 24rem), radial-gradient(circle at 80% 18%, rgba(255, 72, 220, 0.11), transparent 24rem), radial-gradient(circle at 48% 95%, rgba(255, 156, 53, 0.10), transparent 28rem), linear-gradient(145deg, rgba(8, 12, 24, 0.86), rgba(255, 255, 255, 0.052));
  --rs-shadow: 0 36px 142px rgba(0, 0, 0, 0.66), 0 0 60px rgba(48, 247, 255, 0.10), 0 0 90px rgba(255, 72, 220, 0.075), 0 0 100px rgba(255, 156, 53, 0.055);
  --rs-live: 0 0 34px rgba(48, 247, 255, 0.28), 0 0 72px rgba(164, 93, 255, 0.20), 0 0 118px rgba(255, 72, 220, 0.12);
}

html,
body { background: var(--rs-bg) !important; }

body {
  color: var(--rs-text) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(48,247,255,.18), transparent 30rem),
    radial-gradient(circle at 88% 6%, rgba(255,72,220,.15), transparent 30rem),
    radial-gradient(circle at 22% 82%, rgba(99,136,255,.12), transparent 26rem),
    radial-gradient(circle at 72% 88%, rgba(255,156,53,.12), transparent 28rem),
    linear-gradient(180deg, #02030a 0%, #070b18 48%, #02030a 100%) !important;
  overflow-x: hidden !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(48,247,255,.55) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(255,72,220,.45) 0 1px, transparent 1.8px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 190px 190px, 270px 270px, 350px 350px, 72px 72px, 72px 72px;
  opacity: .30;
  mask-image: radial-gradient(circle at center, black 0 58%, transparent 92%);
  animation: rs-star-drift 54s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(122deg, transparent 0 30%, rgba(255,255,255,.055) 37%, rgba(48,247,255,.11) 44%, rgba(255,72,220,.09) 52%, transparent 64% 100%),
    radial-gradient(circle at 18% 18%, rgba(48,247,255,.10), transparent 26rem),
    radial-gradient(circle at 80% 74%, rgba(255,156,53,.08), transparent 26rem);
  opacity: .86;
  animation: rs-cosmic-sheen 13s ease-in-out infinite;
}

#smoke-canvas { opacity: .28 !important; filter: saturate(1.28) contrast(1.08); }
.grain { opacity: .045 !important; }
.ember { filter: saturate(1.24) hue-rotate(70deg); opacity: .20 !important; }

.glass,
.hero,
.nav,
.smoke-card,
.projects,
.support,
.manifesto,
.coffee-card,
.project-feature,
.forge-panel,
.footer {
  background: var(--rs-glass) !important;
  border-color: var(--rs-line) !important;
  box-shadow: var(--rs-shadow), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
}

.hero,
.projects,
.support,
.manifesto {
  border-radius: clamp(32px, 4vw, 52px) !important;
  overflow: hidden !important;
}

.hero::before,
.projects::before,
.support::before,
.manifesto::before,
.smoke-card::before,
.project-feature::before,
.forge-panel::before {
  background:
    radial-gradient(circle at 16% 16%, rgba(48,247,255,.13), transparent 18rem),
    radial-gradient(circle at 86% 32%, rgba(255,72,220,.105), transparent 18rem),
    linear-gradient(114deg, transparent 0%, rgba(255,255,255,.035) 34%, rgba(48,247,255,.12) 45%, rgba(164,93,255,.105) 54%, rgba(255,156,53,.075) 64%, transparent 78%) !important;
  opacity: .76 !important;
  animation: rs-panel-sheen 10s ease-in-out infinite !important;
}

h1,
h2,
h3,
.hero h1,
.section-heading h2 {
  background-image: var(--rs-spectrum-hot) !important;
  background-size: 340% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  animation: rs-spectrum-flow 10s linear infinite !important;
}

p,
.hero-text,
.smoke-card p,
.project-feature p,
.manifesto p,
.support p,
.footer {
  color: var(--rs-muted) !important;
}

.eyebrow,
.status-pill,
.live-pill,
.number {
  color: var(--rs-cyan) !important;
  text-shadow: 0 0 18px rgba(48,247,255,.62), 0 0 42px rgba(255,72,220,.24) !important;
}

.button,
.small-link,
.coffee-card,
.brand-mark,
.phase-caption,
.live-pill {
  background-image: var(--rs-spectrum) !important;
  background-size: 340% 100% !important;
  color: #050611 !important;
  box-shadow: var(--rs-live), inset 0 1px 0 rgba(255,255,255,.40) !important;
  animation: rs-spectrum-flow 6.8s linear infinite, rs-live-pulse 3.2s ease-in-out infinite !important;
}

.button.ghost,
.button:not(.primary):not(.coffee) {
  color: var(--rs-text) !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(8,12,24,.88), rgba(255,255,255,.055)) padding-box,
    var(--rs-spectrum) border-box !important;
  background-size: 100% 100%, 340% 100% !important;
}

.button::before,
.coffee-card::before,
.small-link::before {
  background: linear-gradient(112deg, transparent 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.58) 48%, rgba(48,247,255,.40) 55%, rgba(255,72,220,.25) 63%, transparent 78%) !important;
  animation: rs-button-sheen 3.05s ease-in-out infinite !important;
}

.forge-core,
.phase-live-stage {
  box-shadow: inset 0 0 80px rgba(48,247,255,.10), 0 0 76px rgba(48,247,255,.14), 0 0 110px rgba(255,72,220,.09) !important;
}

.core-ring,
.phase-halo {
  border-color: rgba(48,247,255,.46) !important;
  box-shadow: 0 0 34px rgba(255,72,220,.18) !important;
}

@keyframes rs-spectrum-flow { to { background-position: 340% 50%; } }
@keyframes rs-live-pulse { 0%,100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.2) brightness(1.08); } }
@keyframes rs-button-sheen { 0%, 35% { transform: translateX(-132%); opacity: 0; } 50% { opacity: .62; } 78%, 100% { transform: translateX(132%); opacity: 0; } }
@keyframes rs-panel-sheen { 0%,100% { transform: translateX(-4%) translateY(-1%); opacity: .36; } 50% { transform: translateX(4%) translateY(1%); opacity: .72; } }
@keyframes rs-cosmic-sheen { 0%,100% { transform: translateX(-3%); opacity: .60; } 50% { transform: translateX(3%); opacity: .95; } }
@keyframes rs-star-drift { to { background-position: 190px 190px, 270px 270px, 350px 350px, 72px 72px, 72px 72px; } }