/* ════════════════════════════════════════════════════════════════
   RUDHRON · HOLOGRAPHIC UNIVERSE LAYER
   Sci-fi / cinematic visual system layered over the base theme.
   Loaded LAST so it overrides the per-page inline styles + theme.css.
   Fuses the brand gold with neon cyan / violet holography.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Neon-holographic palette (fused with the existing --gold) */
  --neon-cyan:        #2de2ff;
  --neon-violet:      #9b6bff;
  --neon-magenta:     #ff4ecd;
  --holo-gold:        #e7c45a;
  --holo-gold-bright: #f6e6a8;

  /* Deep-space base */
  --void:   #05060d;
  --void-2: #0a0c18;

  /* Glass surfaces */
  --glass-bg:        rgba(14, 18, 34, 0.42);
  --glass-bg-strong: rgba(16, 20, 38, 0.62);
  --glass-border:    rgba(120, 170, 255, 0.18);
  --glass-blur:      blur(16px) saturate(150%);

  /* Glows */
  --glow-cyan:   0 0 26px rgba(45, 226, 255, 0.28);
  --glow-violet: 0 0 30px rgba(155, 107, 255, 0.24);
  --glow-gold:   0 0 26px rgba(231, 196, 90, 0.30);

  /* Holographic gradient used for text + accents */
  --holo-grad: linear-gradient(110deg, var(--holo-gold) 0%, var(--neon-cyan) 42%, var(--neon-violet) 72%, var(--neon-magenta) 100%);
}

/* ── COSMIC BASE ─────────────────────────────────────────────── */
html { background: var(--void); }

body {
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%,  rgba(80, 50, 180, 0.20), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 78%, rgba(0, 120, 160, 0.18), transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(120, 40, 140, 0.14), transparent 60%),
    var(--void) !important;
  background-attachment: fixed;
  color: var(--ash);
}

/* Keep the immersive dark universe even when the theme toggle flips to "light":
   reframe light mode as a warmer indigo-dawn cosmos instead of a beige page. */
html[data-theme="light"] {
  --ink:      #070912;
  --ink-mid:  #0b0e1c;
  --ink-soft: #0e1224;
  --smoke:    #9aa7c8;
  --ash:      #d7def0;
  --cream:    #ffffff;
}
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%,  rgba(120, 80, 220, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 78%, rgba(0, 150, 190, 0.20), transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(231, 196, 90, 0.10), transparent 60%),
    #070912 !important;
}
html[data-theme="light"] body::before { opacity: 0.18 !important; }

/* The "light" toggle now maps to a dark indigo-dawn cosmos, so theme.css's
   legacy cream nav/drawer backgrounds would put light text on light surfaces
   (the unreadable mobile menu). Force these shared chrome surfaces back to
   dark glass so the light text stays legible. */
html[data-theme="light"] nav {
  background: linear-gradient(to bottom, rgba(5,6,13,0.85), rgba(5,6,13,0)) !important;
}
html[data-theme="light"] nav.scrolled,
html[data-theme="light"] nav[data-solid] {
  background: rgba(8,10,22,0.6) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
}
html[data-theme="light"] .mobile-drawer {
  background: rgba(8,10,22,0.97) !important;
}

/* The WebGL universe canvas (injected by scifi.js) */
#scifi-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
}
#scifi-canvas.ready { opacity: 1; }

/* Soften the film-grain so neon reads cleanly */
body::before { opacity: 0.18 !important; mix-blend-mode: overlay; }

/* Holographic scanline veil over everything (very subtle) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px);
  opacity: 0.5; mix-blend-mode: overlay;
}

/* Page load fade-in (camera "boot up") */
@keyframes holo-boot { from { opacity: 0; } to { opacity: 1; } }
body { animation: holo-boot 0.9s ease both; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--neon-cyan), var(--neon-violet));
  border-radius: 6px; border: 2px solid var(--void);
}

/* ── MAKE SECTIONS FLOAT OVER THE UNIVERSE ──────────────────────
   Strip the opaque per-page section backgrounds so particles show through. */
#hero, #music, #listen, #streaming, #social, #label, #about,
.posts-section, .catalog-section, section[id] {
  background: transparent !important;
}
section { position: relative; z-index: 2; }

/* ── NAV · holographic glass bar ────────────────────────────── */
/* Stay opaque + blurred: the live WebGL scene behind must not show through and
   wash out the nav content (logo, theme toggle, mobile hamburger bars). */
nav {
  background: linear-gradient(to bottom, rgba(5,6,13,0.94), rgba(5,6,13,0.82)) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
/* Make the mobile hamburger bars unmistakable over the holographic backdrop */
.nav-menu-btn span { height: 2px !important; background: var(--holo-gold-bright, #e7c45a) !important; }
nav.scrolled, nav[data-solid] {
  background: rgba(8, 10, 22, 0.55) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(120,170,255,0.08);
}
.nav-logo {
  color: var(--holo-gold-bright) !important;
  text-shadow: 0 0 12px rgba(231,196,90,0.5);
}
.nav-links a:hover, .nav-links a.active { color: var(--neon-cyan) !important; }
.nav-links a::after { background: var(--holo-grad) !important; box-shadow: var(--glow-cyan); }

/* ── HOLOGRAPHIC TYPOGRAPHY ─────────────────────────────────── */
.hero-title {
  background: var(--holo-grad);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 28px rgba(45,226,255,0.28)) drop-shadow(0 0 50px rgba(155,107,255,0.18));
  animation: fade-up 1s 0.5s forwards, holo-shift 9s linear infinite;
}
.hero-title span {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(110deg, var(--neon-magenta), var(--holo-gold-bright));
  -webkit-background-clip: text; background-clip: text;
}
@keyframes holo-shift { to { background-position: 220% center; } }

.hero-label, .section-label, .page-header-label, .release-date {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 10px rgba(45,226,255,0.4);
}
.hero-subtitle { color: var(--ash) !important; text-shadow: 0 0 18px rgba(155,107,255,0.25); }

.section-title, .page-header-title {
  background: linear-gradient(110deg, var(--cream), var(--neon-cyan) 60%, var(--neon-violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(45,226,255,0.18));
}

/* Reduce the static SVG mandala in the hero — the WebGL mandala is the star */
.hero-mandala { opacity: 0.12 !important; filter: hue-rotate(150deg) saturate(1.4) drop-shadow(0 0 20px rgba(45,226,255,0.3)); }
.hero-bg { mix-blend-mode: screen; }

/* Hero genre chips → glass holo pills */
.genre-tag {
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ash) !important; border-radius: 100px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, color 0.3s;
  animation: card-float 7s ease-in-out infinite;
}
.genre-tag:hover {
  color: var(--neon-cyan) !important; transform: translateY(-3px);
  border-color: rgba(45,226,255,0.5) !important; box-shadow: var(--glow-cyan);
}
.hero-genres .genre-tag:nth-child(even) { animation-delay: -3.5s; }
.hero-genres .genre-tag:nth-child(3n)   { animation-delay: -1.8s; }

/* ── GLASSMORPHISM CARD SYSTEM ──────────────────────────────── */
.stream-card, .social-card, .embed-wrap, .about-sigil, .label-inner,
.post-content, .post-layout, .page-header-inner, .filter-bar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(150,190,255,0.06);
}

/* Floating depth on the feature cards (kept off dense list rows for perf) */
.stream-card, .social-card { animation: card-float 8s ease-in-out infinite; }
.streaming-grid .stream-card:nth-child(even) { animation-delay: -4s; }
.streaming-grid .stream-card:nth-child(3n)   { animation-delay: -2.4s; }
.social-grid .social-card:nth-child(even)    { animation-delay: -4s; }
@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.stream-card:hover, .social-card:hover {
  transform: translateY(-9px) !important;
  border-color: rgba(45,226,255,0.45) !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), var(--glow-cyan);
}
.stream-card::before { background: var(--holo-grad) !important; height: 2px; }
.stream-name { color: var(--holo-gold-bright) !important; }
.social-platform { color: var(--holo-gold-bright) !important; }

/* Release artwork → holographic frame */
.release-art {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), var(--glow-violet);
}
.release-art img { filter: saturate(1.15) contrast(1.08) !important; }
.release-art:hover img { filter: saturate(1.35) contrast(1.12) !important; transform: scale(1.05); }
.release-art::after {
  background: linear-gradient(135deg, rgba(45,226,255,0.12), transparent 55%, rgba(155,107,255,0.14)) !important;
}
.release-frame { border-color: rgba(120,170,255,0.35) !important; border-radius: 10px; }
.release-title { color: var(--cream) !important; }

/* Release / player tabs → neon underline */
.release-tab.active, .player-tab.active { color: var(--neon-cyan) !important; border-bottom-color: var(--neon-cyan) !important; }
.release-tabs, .player-tabs { border-bottom-color: var(--glass-border) !important; }
.release-stream-link:hover {
  border-color: rgba(45,226,255,0.5) !important;
  background: rgba(45,226,255,0.08) !important;
  box-shadow: var(--glow-cyan);
}

/* ── BUTTONS · neon ───────────────────────────────────────── */
.btn-primary {
  background: var(--holo-grad) !important; background-size: 200% auto;
  color: #04060f !important; border-radius: 8px; font-weight: 700;
  box-shadow: var(--glow-cyan); border: none;
  transition: transform 0.25s, box-shadow 0.3s, background-position 0.6s;
}
.btn-primary:hover { transform: translateY(-3px); background-position: right center; box-shadow: 0 0 36px rgba(155,107,255,0.5); }

.btn-ghost, .label-contact, .filter-btn, .stream-btn {
  border: 1px solid var(--glass-border) !important;
  color: var(--neon-cyan) !important; border-radius: 8px;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.25s, box-shadow 0.3s, border-color 0.3s, background 0.3s, color 0.3s;
}
.btn-ghost:hover, .label-contact:hover, .stream-btn:hover {
  border-color: rgba(45,226,255,0.55) !important;
  background: rgba(45,226,255,0.08) !important;
  box-shadow: var(--glow-cyan); transform: translateY(-3px); color: var(--neon-cyan) !important;
}
.filter-btn.active {
  background: var(--holo-grad) !important; color: #04060f !important;
  border-color: transparent !important; box-shadow: var(--glow-cyan); font-weight: 700;
}

/* ── DIVIDERS / FRAMES ─────────────────────────────────────── */
.divider {
  background: linear-gradient(to right, transparent, var(--neon-cyan) 30%, var(--neon-violet) 70%, transparent) !important;
  box-shadow: 0 0 14px rgba(45,226,255,0.4); height: 1px !important;
}

/* ── DISCOGRAPHY TRACK ROWS → glass strips ─────────────────── */
.track-row {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(120,170,255,0.10) !important;
  border-radius: 10px; margin-bottom: 0.5rem;
  transition: transform 0.25s, border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.track-row:hover {
  transform: translateX(6px);
  border-color: rgba(45,226,255,0.4) !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: -6px 0 24px rgba(45,226,255,0.15);
}
.track-num { color: var(--neon-violet) !important; }
.track-name { color: var(--cream) !important; }
.track-genre { color: var(--neon-cyan) !important; }

/* ── ABOUT SIGIL ───────────────────────────────────────────── */
.about-sigil { border-radius: 50%; }
.about-sigil svg { filter: hue-rotate(150deg) saturate(1.5) drop-shadow(0 0 24px rgba(45,226,255,0.35)); opacity: 0.4 !important; }
.about-sigil-text {
  background: var(--holo-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 26px rgba(45,226,255,0.35));
}
.about-text em { color: var(--neon-cyan) !important; text-shadow: 0 0 12px rgba(45,226,255,0.3); }

/* ── LABEL / FOOTER ────────────────────────────────────────── */
#label { border-top: 1px solid var(--glass-border) !important; }
.label-name span { color: var(--holo-gold-bright) !important; text-shadow: var(--glow-gold); }
footer { border-top: 1px solid var(--glass-border) !important; background: rgba(5,6,13,0.6) !important; }
.footer-links a:hover { color: var(--neon-cyan) !important; }

/* ── BACKGROUND MUSIC PLAYER · holo glass ──────────────────── */
.bg-player {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), var(--glow-violet);
}
.bg-player.playing { border-color: rgba(45,226,255,0.5) !important; }
.bg-eq span { background: var(--neon-cyan) !important; box-shadow: 0 0 6px rgba(45,226,255,0.6); }
.bg-track-name { color: var(--ash) !important; }
.bg-track-sub { color: var(--neon-cyan) !important; }
.bg-btn:hover { color: var(--neon-cyan) !important; }

/* ── THEME TOGGLE → holo ───────────────────────────────────── */
.theme-toggle { border-color: var(--glass-border) !important; }
.theme-toggle:hover { border-color: rgba(45,226,255,0.5) !important; background: rgba(45,226,255,0.08) !important; box-shadow: var(--glow-cyan); }
.theme-toggle svg { stroke: var(--neon-cyan) !important; }

/* ── CUSTOM CURSOR → neon (index) ──────────────────────────── */
#cursor { background: var(--neon-cyan) !important; box-shadow: 0 0 12px var(--neon-cyan); mix-blend-mode: normal; }
#cursor-ring { border-color: rgba(45,226,255,0.6) !important; box-shadow: 0 0 18px rgba(45,226,255,0.25); }

/* ── SCROLL REVEAL → depth dolly ───────────────────────────── */
.reveal { transform: translateY(50px) scale(0.985); filter: blur(2px); }
.reveal.visible { transform: translateY(0) scale(1); filter: blur(0); }

/* Filter bar / page header polish */
.page-header-sub { color: var(--smoke) !important; }
.page-header-count, .filter-count { color: var(--neon-cyan) !important; }

/* ── POSTS (announcements) ─────────────────────────────────── */
.post-title { color: var(--cream) !important; }
.post-date, .post-meta { color: var(--neon-cyan) !important; }
.post-art-thumb { border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.45), var(--glow-violet); }

/* ── MOBILE / PERFORMANCE ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Lighter glass blur + disable float animations to protect battery/scroll */
  .stream-card, .social-card, .genre-tag { animation: none !important; }
  .stream-card, .social-card, .embed-wrap, .post-content, .post-layout,
  .filter-bar, .page-header-inner, .label-inner, .about-sigil {
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .stream-card, .social-card, .genre-tag, .hero-title, body { animation: none !important; }
  #scifi-canvas { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── MODERN HEADING TYPEFACE (Space Grotesk, pairs with Space Mono) ───────── */
.hero-title, .section-title, .page-header-title, .release-title, .post-title,
.label-name, .legal h2, .about-sigil-sub {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}
.hero-title { font-weight: 700 !important; }
.section-title, .page-header-title, .release-title, .post-title, .label-name,
.legal h2 { font-weight: 600 !important; }

/* ── Prevent horizontal scroll on mobile (safety net against any stray overflow) ── */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Mobile fit: wrap footer + tame single-word page headers (all pages) ── */
@media (max-width: 768px) {
  footer { flex-direction: column; text-align: center; }
  .footer-copy { max-width: 100%; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.9rem 1.25rem; }
  .page-header-title { font-size: clamp(2.2rem, 9vw, 5rem) !important; }
}

/* ── Accessibility: honor reduced-motion (vestibular safety + perf) ──
   Kills the WebGL universe + all animations/transitions for users who ask. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #scifi-canvas { display: none !important; }
}