/*
 * ═══════════════════════════════════════════════════════════
 *  HEISTAI PREMIUM VISUAL SYSTEM  v1.0
 *  Design-only upgrade — zero copy changes
 *  Loads AFTER heist-design-system.css for clean override
 * ═══════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════
   1. DESIGN TOKENS — COLOR REFINEMENT
   ════════════════════════════════════════ */
:root {
  /* Deep charcoal — not navy, not pure black */
  --bg:          #0A0A0F;
  --bg2:         #0F0F1A;
  --bg3:         #141420;
  --bg-card:     rgba(14, 14, 22, 0.75);

  /* Primary: Electric Purple */
  --accent:      #7C3AED;
  --accent-dim:  rgba(124, 58, 237, 0.15);
  --accent-glow: rgba(124, 58, 237, 0.35);

  /* Secondary: Lighter violet */
  --accent2:     #A855F7;

  /* Neon accent */
  --neon:        #00D4FF;
  --neon-glow:   rgba(0, 212, 255, 0.2);

  /* Semantic */
  --success:     #00FFA3;
  --danger:      #FF4D6D;
  --gold:        #F59E0B;

  /* Typography */
  --mono: 'Space Grotesk', 'JetBrains Mono', 'Fira Mono', monospace;

  /* Spacing rhythm (8pt) */
  --sp1: 8px;
  --sp2: 16px;
  --sp3: 24px;
  --sp4: 32px;
  --sp6: 48px;
  --sp8: 64px;
  --sp12: 96px;
  --sp15: 120px;
  --section-py: 120px;
}

/* ════════════════════════════════════════
   2. BODY — DEPTH GRADIENT BACKGROUND
   ════════════════════════════════════════ */
body {
  background-color: #0A0A0F;
  background-image:
    linear-gradient(180deg, #0A0A0F 0%, #0F0F1A 60%, #0A0A0F 100%),
    radial-gradient(ellipse at 15% 0%, rgba(124,58,237,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(0,212,255,0.04) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ════════════════════════════════════════
   3. SECTION SPACING — 120px BREATHING ROOM
   ════════════════════════════════════════ */
section {
  padding: var(--section-py) 0;
}
#hero {
  padding-top: 160px;
  padding-bottom: var(--section-py);
}

/* ════════════════════════════════════════
   4. CONTENT WIDTH — 1200px
   ════════════════════════════════════════ */
.container-wide {
  max-width: 1200px;
}

/* ════════════════════════════════════════
   5. NAVBAR — GLASSMORPHISM ON SCROLL
   ════════════════════════════════════════ */
nav {
  background: rgba(10, 10, 15, 0) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  transition:
    background 0.4s ease,
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  will-change: background, backdrop-filter;
}

nav.nav-scrolled {
  background: rgba(10, 10, 15, 0.88) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12) !important;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.4);
}

/* ── Nav link active state ── */
.nav-link-active {
  color: #ffffff !important;
  text-decoration: none;
}

/* Nav CTA — updated to Electric Indigo */
.nav-cta {
  background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.nav-cta:hover {
  background: linear-gradient(135deg, #8B5CF6, #9333EA) !important;
  box-shadow: 0 0 36px rgba(124, 58, 237, 0.55) !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════
   6. HERO — ANIMATED GRADIENT + PARALLAX
   ════════════════════════════════════════ */

/* Animated gradient orbs via pseudo-elements */
#hero {
  position: relative;
  overflow: hidden;
}

/* Override existing ::before with animated version */
#hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 10%;
  width: 900px;
  height: 700px;
  background: radial-gradient(
    ellipse at center,
    rgba(124, 58, 237, 0.16) 0%,
    rgba(0, 212, 255, 0.05) 45%,
    transparent 70%
  );
  animation: heroOrb1 10s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform, opacity;
}

#hero::after {
  content: '';
  position: absolute;
  top: 40%;
  right: -8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 212, 255, 0.09) 0%,
    rgba(124, 58, 237, 0.04) 50%,
    transparent 70%
  );
  animation: heroOrb2 14s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes heroOrb1 {
  0%   { transform: translate(0, 0) scale(1);     opacity: 0.85; }
  33%  { transform: translate(60px, 30px) scale(1.1);  opacity: 1; }
  66%  { transform: translate(-40px, 50px) scale(0.95); opacity: 0.9; }
  100% { transform: translate(80px, -20px) scale(1.05); opacity: 0.95; }
}

@keyframes heroOrb2 {
  0%   { transform: translate(0, 0) scale(1);     opacity: 0.7; }
  50%  { transform: translate(-50px, 40px) scale(1.15); opacity: 1; }
  100% { transform: translate(30px, -60px) scale(0.9);  opacity: 0.8; }
}

/* Parallax container — JS sets --parallax-y */
.hero-right {
  transform: translateY(var(--parallax-y, 0px));
  transition: transform 0.08s linear;
  will-change: transform;
}

/* ── CTA Glow Enhancement ── */
.btn-primary {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #00D4FF 100%) !important;
  background-size: 200% 200% !important;
  animation: ctaGradientShift 6s ease infinite !important;
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.4),
    0 0 80px rgba(124, 58, 237, 0.15) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 0 60px rgba(124, 58, 237, 0.6),
    0 0 120px rgba(124, 58, 237, 0.2),
    0 0 20px rgba(0, 212, 255, 0.25) !important;
}

@keyframes ctaGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ════════════════════════════════════════
   7. SCROLL FADE-IN — STAGGERED MOTION
   ════════════════════════════════════════ */

/* Enhanced easing for existing fade-in */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays applied by JS via data-stagger */
.fade-in[data-stagger="1"] { transition-delay: 0.08s; }
.fade-in[data-stagger="2"] { transition-delay: 0.16s; }
.fade-in[data-stagger="3"] { transition-delay: 0.24s; }
.fade-in[data-stagger="4"] { transition-delay: 0.32s; }
.fade-in[data-stagger="5"] { transition-delay: 0.40s; }

/* ════════════════════════════════════════
   8. TYPOGRAPHY — WEIGHT CONTRAST
   ════════════════════════════════════════ */

h1 {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

h2 {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

h3 {
  font-weight: 700 !important;
}

/* Numbers and data — tabular monospace feel */
.mockup-metric-value,
.mockup-ad-brand,
.hero-metric-value,
[class*="-metric"] span,
[class*="-number"],
[class*="-count"],
[class*="-score"],
[class*="-stat"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ════════════════════════════════════════
   9. CARD + SECTION GLOW SYSTEM
   ════════════════════════════════════════ */

/* Hover glow overlay on all cards */
.card,
[class*="card"],
.mockup-card {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.card:hover,
[class*="card"]:hover:not(.mockup-card) {
  border-color: rgba(124, 58, 237, 0.25) !important;
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.1) !important;
  transform: translateY(-2px);
}

/* ════════════════════════════════════════
   10. ACCENT COLOR UPDATES
   ════════════════════════════════════════ */

/* Update blue accent elements to Electric Indigo */
.section-label {
  color: #7C3AED !important;
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
}

/* Update mockup header gradient line */
.mockup-card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 58, 237, 0.4),
    rgba(0, 212, 255, 0.3),
    transparent
  ) !important;
}

/* Update mockup winner border */
.mockup-ad.winner {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* ════════════════════════════════════════
   11. SMOOTH SCROLL EASING
   ════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

/* ════════════════════════════════════════
   12. GPU ACCELERATION — PERFORMANCE
   ════════════════════════════════════════ */
.hero-mockup,
.hero-right,
.fade-in,
nav,
.btn-primary,
.btn-secondary {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ════════════════════════════════════════
   13. SECTION DIVIDERS — SUBTLE DEPTH
   ════════════════════════════════════════ */
section + section {
  position: relative;
}
section + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 58, 237, 0.12),
    rgba(0, 212, 255, 0.08),
    rgba(124, 58, 237, 0.12),
    transparent
  );
  pointer-events: none;
}

/* ════════════════════════════════════════
   14. BUTTON SECONDARY UPGRADE
   ════════════════════════════════════════ */
.btn-secondary {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-secondary:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: rgba(124, 58, 237, 0.08) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15) !important;
}

/* ════════════════════════════════════════
   15. PROOF STRIP / LIVE ACTIVITY — NEON ACCENT
   ════════════════════════════════════════ */
.mockup-live,
.mockup-live-dot {
  color: var(--success) !important;
}
.mockup-live-dot {
  background: var(--success) !important;
}

/* ════════════════════════════════════════
   END HEIST PREMIUM v1.0
   ════════════════════════════════════════ */