/* ============================================
   myAct React SPA — Visual Theme Override
   Only overrides CSS custom properties + cosmetic-only rules.
   Does NOT touch any HTML element selectors.
   ============================================ */

/* === Override theme variables to match landing page === */
.theme-midnight, :root {
  /* Core colors → purple instead of blue */
  --primary: 263 70% 58% !important;
  --primary-foreground: 0 0% 100% !important;
  --accent: 263 70% 58% !important;
  --accent-foreground: 0 0% 100% !important;
  --ring: 263 70% 58% !important;

  /* Background → pure black */
  --background: 0 0% 0% !important;
  --foreground: 0 0% 98% !important;

  /* Cards → darker */
  --card: 0 0% 4% !important;
  --card-foreground: 0 0% 98% !important;

  /* Muted */
  --muted: 0 0% 6% !important;
  --muted-foreground: 0 0% 50% !important;

  /* Secondary */
  --secondary: 260 15% 12% !important;
  --secondary-foreground: 0 0% 98% !important;

  /* Borders */
  --border: 0 0% 100% / 0.06 !important;
  --input: 0 0% 100% / 0.04 !important;

  /* Charts → purple family */
  --chart-1: 263 70% 58% !important;
  --chart-2: 190 90% 50% !important;
  --chart-3: 168 76% 50% !important;
  --chart-4: 280 65% 60% !important;
  --chart-5: 340 75% 55% !important;

  /* Custom app vars */
  --surface: #000 !important;
  --surface-card: rgba(10,10,10,0.6) !important;
  --surface-elevated: #0a0a0a !important;
  --text-primary: #fafafa !important;
  --text-secondary: rgba(255,255,255,0.6) !important;
  --text-muted: rgba(255,255,255,0.35) !important;
  --border-subtle: rgba(255,255,255,0.06) !important;
  --border-medium: rgba(255,255,255,0.1) !important;
  --glow-color: rgba(139,92,246,0.15) !important;
  --input-bg: rgba(255,255,255,0.04) !important;
  --scrollbar-bg: #000 !important;
  --scrollbar-thumb: rgba(255,255,255,0.08) !important;
}

/* === Film grain texture (cosmetic, pointer-events: none) === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.012;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === Scrollbar (cosmetic only) === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 10px; }
::selection { background: rgba(139,92,246,0.25); color: #fff; }

/* === Smooth float animations (replaces jittery originals) === */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes float-medium {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes icon-float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.float-slow { animation: float-slow 6s ease-in-out infinite !important; will-change: transform; }
.float-medium { animation: float-medium 4s ease-in-out infinite !important; will-change: transform; }
.icon-3d-float { animation: icon-float-gentle 6s ease-in-out infinite !important; will-change: transform; }

/* === App-specific class overrides (myAct classes only) === */
.issue-card-3d .card-face {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.issue-card-3d:hover .card-face {
  transform: translateY(-3px) !important;
}
.hero-issue-card:hover .issue-icon-3d {
  transform: translateZ(6px) !important;
}
.platform-logo-neon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.platform-logo-neon:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

@keyframes card-selected-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.12); }
  50% { box-shadow: 0 0 40px rgba(139,92,246,0.2); }
}
.issue-card-3d.selected .card-face {
  animation: card-selected-glow 2.5s ease-in-out infinite !important;
}

@keyframes step-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(139,92,246,0.2); }
  50% { box-shadow: 0 0 20px rgba(139,92,246,0.35); }
}
.step-active {
  animation: step-glow 2.5s ease-in-out infinite !important;
}

@keyframes icon-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.1); }
  50% { box-shadow: 0 0 20px 4px rgba(139,92,246,0.05); }
}
.icon-3d-breathe {
  animation: icon-breathe 4s ease-in-out infinite !important;
}

@keyframes neon-border-pulse {
  0%, 100% { box-shadow: 0 0 15px var(--platform-color, rgba(139,92,246,0.3)); }
  50% { box-shadow: 0 0 30px var(--platform-color, rgba(139,92,246,0.5)); }
}

.premium-card:hover {
  transform: translateY(-2px) !important;
}

/* Toast styling via CSS vars */
[data-sonner-toaster] {
  --normal-bg: var(--surface-elevated) !important;
  --normal-border: var(--border-subtle) !important;
  --normal-text: var(--text-primary) !important;
}

/* Smooth page entry */
#root > div {
  animation: pageEntry 0.3s ease both;
}
@keyframes pageEntry {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Grid background override to match purple */
.grid-bg {
  background-image: linear-gradient(rgba(139,92,246,0.04) 1px, transparent 0),
                    linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 0) !important;
}
.grid-bg-subtle {
  background-image: linear-gradient(rgba(139,92,246,0.02) 1px, transparent 0),
                    linear-gradient(90deg, rgba(139,92,246,0.02) 1px, transparent 0) !important;
}

/* Noise overlay class override */
.noise-overlay::before {
  opacity: 0.012 !important;
}