/**
 * sci-fi-theme.css — immersive sci-fi layer (home + AI Hub only)
 * Scoped via body.sci-fi-page so other pages stay unchanged.
 */

body.sci-fi-page {
  --sf-cyan: #00e5ff;
  --sf-magenta: #c026d3;
  --sf-violet: #8b5cf6;
  --sf-blue: #3b82f6;
  --sf-pink: #ec4899;
  --sf-glass: rgba(8, 12, 28, 0.55);
  --sf-glass-border: rgba(0, 229, 255, 0.18);
  --sf-glow: rgba(0, 229, 255, 0.35);
  background: #030308;
}

/* WebGL canvas + atmospheric overlays */
.sci-fi-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
}

.sci-fi-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(3, 3, 8, 0.4) 55%, rgba(3, 3, 8, 0.92) 100%),
    linear-gradient(180deg, rgba(3, 3, 8, 0.3) 0%, transparent 30%, transparent 70%, rgba(3, 3, 8, 0.85) 100%);
}

.sci-fi-scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 229, 255, 0.15) 2px,
    rgba(0, 229, 255, 0.15) 4px
  );
}

body.sci-fi-page > *:not(.sci-fi-canvas):not(.sci-fi-vignette):not(.sci-fi-scanlines) {
  position: relative;
  z-index: 2;
}

/* Nav — holographic bar */
body.sci-fi-page .navbar-glass {
  background: rgba(4, 6, 18, 0.72) !important;
  border-bottom: 1px solid var(--sf-glass-border) !important;
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.06);
}

body.sci-fi-page .nav-link:hover::after,
body.sci-fi-page .nav-link.active::after {
  background: linear-gradient(90deg, var(--sf-cyan), var(--sf-violet));
  box-shadow: 0 0 12px var(--sf-glow);
}

/* Hero */
body.sci-fi-page .hub-hero {
  background: transparent;
  min-height: 100vh;
}

body.sci-fi-page .hub-hero::before {
  display: none;
}

body.sci-fi-page .hub-hero h1 span {
  background: linear-gradient(135deg, var(--sf-cyan) 0%, var(--sf-violet) 45%, var(--sf-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.35));
}

body.sci-fi-page .hub-hero .btn-primary {
  background: linear-gradient(135deg, #0891b2, var(--sf-violet));
  border: 1px solid rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.sci-fi-page .hub-hero .btn-outline-light {
  border-color: rgba(0, 229, 255, 0.35);
  color: var(--sf-cyan);
  backdrop-filter: blur(8px);
}

body.sci-fi-page .hub-hero .btn-outline-light:hover {
  background: rgba(0, 229, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
  color: #fff;
}

/* Holographic glass cards */
body.sci-fi-page .holo-glass,
body.sci-fi-page .bout-card,
body.sci-fi-page .ai-feature-card,
body.sci-fi-page .blog-card,
body.sci-fi-page .leaderboard-container,
body.sci-fi-page .framez-pick-card,
body.sci-fi-page #guest-view .feature-content,
body.sci-fi-page #guest-view .mfg-card,
body.sci-fi-page #guest-view .hub-cta-block,
body.sci-fi-page #guest-view .feature-img-wrap img {
  background: var(--sf-glass) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--sf-glass-border) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 40px rgba(0, 229, 255, 0.04);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease,
              border-color 0.35s ease;
}

body.sci-fi-page .bout-card:hover,
body.sci-fi-page .ai-feature-card:hover,
body.sci-fi-page .blog-card:hover,
body.sci-fi-page #guest-view .mfg-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(0, 229, 255, 0.35) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(139, 92, 246, 0.12),
    0 0 0 1px rgba(0, 229, 255, 0.15) inset;
}

body.sci-fi-page #guest-view .feature-img-wrap img {
  padding: 0;
  border-radius: 20px;
}

body.sci-fi-page #guest-view .feature-content {
  padding: 28px;
  border-radius: 20px;
}

/* Section headers — neon labels */
body.sci-fi-page .section-header h6,
body.sci-fi-page .ai-hub-badge,
body.sci-fi-page #guest-view .feature-label {
  color: var(--sf-cyan) !important;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

body.sci-fi-page .ai-hub-title-accent,
body.sci-fi-page .section-header h2 {
  text-shadow: 0 0 40px rgba(139, 92, 246, 0.15);
}

body.sci-fi-page .ai-hub-title-accent {
  background: linear-gradient(135deg, var(--sf-cyan), var(--sf-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sections — depth layers */
body.sci-fi-page .bouts-section,
body.sci-fi-page .ai-hub-section,
body.sci-fi-page .leaderboard-section,
body.sci-fi-page .framez-picks-section,
body.sci-fi-page .blog-section,
body.sci-fi-page .download-section,
body.sci-fi-page #guest-view .feature-showcase,
body.sci-fi-page #guest-view .mini-feature-grid {
  background: transparent !important;
}

body.sci-fi-page .parallax-section-bg {
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(139, 92, 246, 0.08), transparent),
    radial-gradient(ellipse 50% 35% at 80% 60%, rgba(0, 229, 255, 0.06), transparent) !important;
}

body.sci-fi-page .ai-hub-section::before {
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(192, 38, 211, 0.1), transparent);
}

/* Trust bar (AI Hub) */
body.sci-fi-page #guest-view .trust-bar {
  background: rgba(4, 6, 18, 0.6);
  backdrop-filter: blur(12px);
  border-color: var(--sf-glass-border);
}

body.sci-fi-page #guest-view .trust-item i {
  color: var(--sf-cyan);
  filter: drop-shadow(0 0 8px var(--sf-glow));
}

/* Pills & badges on hero phones */
body.sci-fi-page .score-pill {
  background: rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.4);
}

body.sci-fi-page .ai-pill {
  background: rgba(8, 47, 73, 0.9) !important;
  border: 1px solid rgba(0, 229, 255, 0.35);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.25);
}

body.sci-fi-page .phone-front-group .phone-front,
body.sci-fi-page .hero-phone-stack .phone-back {
  box-shadow: 0 0 60px rgba(0, 229, 255, 0.15), 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* Buttons site-wide on sci-fi pages */
body.sci-fi-page .btn-primary {
  background: linear-gradient(135deg, #0891b2, #7c3aed);
  border: 1px solid rgba(0, 229, 255, 0.3);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.15);
}

body.sci-fi-page .btn-outline-primary {
  color: var(--sf-cyan);
  border-color: rgba(0, 229, 255, 0.4);
}

body.sci-fi-page .btn-outline-primary:hover {
  background: rgba(0, 229, 255, 0.12);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
}

/* Scroll reveal — cinematic fade */
body.sci-fi-page .reveal-on-scroll {
  transform: translateY(40px) scale(0.98);
  filter: blur(4px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s ease;
}

body.sci-fi-page .reveal-on-scroll.revealed {
  filter: blur(0);
}

/* Footer */
body.sci-fi-page .footer-section {
  background: rgba(3, 3, 8, 0.85);
  border-top: 1px solid var(--sf-glass-border);
}

/* Hub CTA gradient override */
body.sci-fi-page #guest-view .hub-cta-block {
  background: linear-gradient(135deg, rgba(8, 12, 40, 0.9), rgba(30, 20, 60, 0.85)) !important;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

body.sci-fi-page #guest-view .hub-cta-block::before {
  background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.12) 0%, transparent 70%);
}

/* Logged-in AI Hub — keep UI readable, subtle tint only */
body.sci-fi-page #logged-in-view {
  background: rgba(3, 3, 8, 0.92);
}

@media (max-width: 991px) {
  .sci-fi-canvas {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sci-fi-canvas,
  .sci-fi-scanlines {
    display: none !important;
  }

  body.sci-fi-page .reveal-on-scroll {
    filter: none;
    transform: none;
  }
}