/* ===================================================================
   NEXUS DESIGN SYSTEM — TOKEN ALIASES + COSMIC ART LAYER
   Visual Art Pass (architect directive 2026-10-07):
   cosmic dark aesthetic, typography as hero, ambient glows and
   starfields behind content, ONE strong moment per viewport.
   All values resolve to the canonical token set in tokens.css.
   =================================================================== */

:root {
  /* ---- Alias: text colors ---- */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text: var(--text-primary);
  --color-white: var(--color-off-white);

  /* ---- Alias: backgrounds / surfaces ---- */
  --color-bg: var(--bg-primary);
  --color-bg-dark: #111111;
  --color-bg-darker: var(--color-black);
  --color-surface: var(--bg-secondary);
  --color-surface-elevated: rgba(26, 26, 26, 0.72);
  --color-ton-black: #0C0B0A;
  --color-border: var(--border-primary);
  --color-border-light: var(--border-secondary);

  /* ---- Alias: brand tints ---- */
  --color-purple-light: #A78BFA;
  --color-gold-bright: #FFB800;
  --color-gold-light: #FFD166;
  --color-green-bright: #39FF9A;
  --color-purple-rgb: 139, 92, 246;

  /* ---- Alias: font sizes ---- */
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-size-6xl: var(--text-6xl);
  --font-size-7xl: var(--text-7xl);

  /* ---- Alias: weights / spacing / rhythm ---- */
  --font-weight-normal: var(--font-normal);
  --font-weight-medium: var(--font-medium);
  --font-weight-semibold: var(--font-semibold);
  --font-weight-bold: var(--font-bold);
  --font-family-mono: var(--font-secondary);
  --letter-spacing-wide: var(--tracking-wider);
  --line-height-relaxed: var(--leading-relaxed);
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12, 3rem);
  --spacing-3xl: var(--space-16, 4rem);
  --max-width: var(--container-max);
  --border-width-1: 1px;
}

/* ===================================================================
   COSMIC AMBIENT LAYER — lives BEHIND all content on every page
   Deep-space gradient wash + two slow-drifting nebula glows.
   Single fixed element; CSS-only; zero JS; loads with the site.
   =================================================================== */

.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 22% 12%, rgba(139, 92, 246, 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 65% 45% at 82% 78%, rgba(255, 215, 0, 0.07) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 68% 22%, rgba(57, 255, 148, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #000000 0%, #0C0B0A 55%, #000000 100%);
}

.cosmic-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(245, 246, 245, 0.9), transparent 100%),
    radial-gradient(1px 1px at 34% 68%, rgba(245, 246, 245, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 14%, rgba(211, 212, 229, 0.8), transparent 100%),
    radial-gradient(1px 1px at 74% 44%, rgba(245, 246, 245, 0.65), transparent 100%),
    radial-gradient(1px 1px at 88% 74%, rgba(211, 212, 229, 0.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 88%, rgba(245, 246, 245, 0.6), transparent 100%),
    radial-gradient(1px 1px at 8% 82%, rgba(211, 212, 229, 0.5), transparent 100%),
    radial-gradient(1px 1px at 92% 8%, rgba(245, 246, 245, 0.7), transparent 100%);
  background-repeat: repeat;
  background-size: 640px 640px;
  opacity: 0.7;
  animation: cosmic-drift 240s linear infinite;
}

.cosmic-bg::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 120deg at 60% 40%,
    transparent 0deg,
    rgba(139, 92, 246, 0.05) 60deg,
    transparent 130deg,
    rgba(255, 215, 0, 0.03) 210deg,
    transparent 300deg);
  animation: cosmic-slow-spin 180s linear infinite;
}

@keyframes cosmic-drift {
  from { background-position: 0 0; }
  to   { background-position: -640px 320px; }
}

@keyframes cosmic-slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===================================================================
   TYPOGRAPHY AS HERO — kinetic gradient headline treatment
   =================================================================== */

.hero-title .page-hero-title-line,
.hero-title,
.page-hero-title {
  /* Chrome metal headline — from the architect's mock designs (2026-10-07).
     Static and restrained: typography is the hero, animation lives elsewhere. */
  background: var(--gradient-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold-metal accent word inside headlines (payoff word) */
.hero-title .gold-word,
.page-hero-title .gold-word {
  background: var(--gradient-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Legacy accent-word class keeps its brand-gradient payoff */
.hero-title .gradient-word,
.page-hero-title .gradient-word {
  background: linear-gradient(105deg,
    var(--color-purple) 0%,
    var(--color-lavender) 45%,
    var(--color-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section titles get a quieter, static lavender-to-white treatment */
.section-title {
  background: linear-gradient(105deg, var(--color-off-white) 55%, var(--color-purple) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Page hero titles: typography is the hero on every page */
.page-hero-title {
  font-size: clamp(2.75rem, 10vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ===================================================================
   AMBIENT GLOW ORBS — page-hero visual moments (one per viewport)
   Pure CSS orbs that float behind hero content on every page.
   =================================================================== */

.page-hero-visual .community-orb,
.page-hero-visual .shop-orb,
.page-hero-visual .contact-orb,
.page-hero-visual .cosmic-orb,
.page-hero-visual .bot-float .bot-icon {
  will-change: transform;
}

.page-hero-container {
  position: relative;
  overflow: hidden;
}

/* Soft aurora band across every page hero */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%, rgba(139, 92, 246, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 55% 42% at 85% 85%, rgba(255, 215, 0, 0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.page-hero .page-hero-container { z-index: 1; }

/* ===================================================================
   SURFACE REFINEMENTS — glass cards, hairline borders, hover glow
   =================================================================== */

.section {
  position: relative;
}

.card,
.contribution-card,
.contact-card,
.product-card,
.bot-card,
.discord-channel,
.telegram-channel {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

@media (hover: hover) {
  .card:hover,
  .contribution-card:hover,
  .contact-card:hover,
  .product-card:hover,
  .bot-card:hover {
    box-shadow: 0 12px 44px rgba(139, 92, 246, 0.16),
                inset 0 0 0 1px rgba(139, 92, 246, 0.25);
  }
}

/* Buttons: subtle glow on primary */
.btn-primary {
  box-shadow: 0 0 0 rgba(139, 92, 246, 0);
}

@media (hover: hover) {
  .btn-primary:hover {
    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.38);
  }
}

/* ===================================================================
   SECTION RHYTHM — alternating ambient washes between sections
   =================================================================== */

.section:nth-of-type(even) {
  background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.035) 50%, transparent 100%);
}

/* ===================================================================
   REDUCED MOTION — kill all ambient animation
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cosmic-bg::before,
  .cosmic-bg::after,
  .hero-title,
  .page-hero-title,
  .hero-title .page-hero-title-line {
    animation: none !important;
  }
  .hero-title .page-hero-title-line,
  .hero-title,
  .page-hero-title,
  .section-title {
    -webkit-text-fill-color: initial;
    background: none;
    color: var(--text-primary);
  }
}