/**
 * Section Backgrounds & Visual Hierarchy
 * Each theme has ONE consistent visual pattern that flows throughout
 * Works in both light and dark mode
 */

/* ============================================================================
   MODERN THEME - Clean Radial Ambience
   Soft radial gradients that create subtle depth without distraction
   ============================================================================ */

.theme-modern {
  background:
    radial-gradient(
      ellipse 150% 100% at 20% 10%,
      rgba(var(--color-primary-rgb), 0.04),
      transparent 60%
    ),
    radial-gradient(
      ellipse 150% 100% at 80% 90%,
      rgba(var(--color-secondary-rgb), 0.03),
      transparent 60%
    ),
    var(--color-background);
}

.theme-modern .hero {
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 30%,
      rgba(var(--color-primary-rgb), 0.06),
      transparent 70%
    ),
    var(--color-background);
}

.theme-modern .section:nth-child(even) {
  background:
    radial-gradient(
      ellipse 140% 90% at 50% 50%,
      rgba(var(--color-surface-rgb), 0.08),
      transparent 60%
    ),
    var(--color-background);
}

.theme-modern .section:nth-child(odd) {
  background:
    radial-gradient(
      ellipse 140% 90% at 50% 50%,
      rgba(var(--color-surface-rgb), 0.04),
      transparent 60%
    ),
    var(--color-background);
}


/* ============================================================================
   CREATIVE THEME - Flowing Diagonal Gradients
   Smooth diagonal color transitions that create dynamic flow
   ============================================================================ */

.theme-creative {
  background: linear-gradient(
    135deg,
    var(--color-background) 0%,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-background) 92%) 25%,
    color-mix(in srgb, var(--color-surface) 10%, var(--color-background) 90%) 50%,
    color-mix(in srgb, var(--color-secondary) 6%, var(--color-background) 94%) 75%,
    var(--color-background) 100%
  );
}

.theme-creative .hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 12%, var(--color-background) 88%) 0%,
    color-mix(in srgb, var(--color-accent) 10%, var(--color-background) 90%) 50%,
    var(--color-background) 100%
  );
}

.theme-creative .section:nth-child(even) {
  background: linear-gradient(
    135deg,
    var(--color-background) 0%,
    color-mix(in srgb, var(--color-secondary) 10%, var(--color-background) 90%) 50%,
    color-mix(in srgb, var(--color-accent) 6%, var(--color-background) 94%) 100%
  );
}

.theme-creative .section:nth-child(odd) {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-background) 92%) 0%,
    var(--color-background) 50%,
    color-mix(in srgb, var(--color-surface) 8%, var(--color-background) 92%) 100%
  );
}


/* ============================================================================
   3D THEME - Atmospheric Cyber Layers
   Multi-layer atmospheric effects with subtle grid patterns
   ============================================================================ */

.theme-threed {
  background:
    radial-gradient(
      ellipse 100% 60% at 50% 0%,
      rgba(var(--color-accent-rgb), 0.12),
      transparent 50%
    ),
    radial-gradient(
      ellipse 80% 50% at 0% 50%,
      rgba(var(--color-primary-rgb), 0.08),
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 50% at 100% 50%,
      rgba(var(--color-secondary-rgb), 0.08),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-surface) 15%, var(--color-background) 85%) 0%,
      var(--color-background) 50%,
      color-mix(in srgb, var(--color-primary) 8%, var(--color-background) 92%) 100%
    );
}

.theme-threed .hero {
  background:
    radial-gradient(
      ellipse 90% 70% at 50% 40%,
      rgba(var(--color-accent-rgb), 0.18),
      rgba(var(--color-primary-rgb), 0.10) 50%,
      transparent 80%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-surface) 15%, var(--color-background) 85%) 0%,
      var(--color-background) 100%
    );
}

.theme-threed .section:nth-child(even) {
  background:
    radial-gradient(
      ellipse 90% 70% at 60% 50%,
      rgba(var(--color-secondary-rgb), 0.10),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-surface) 15%, var(--color-background) 85%) 0%,
      var(--color-background) 50%,
      color-mix(in srgb, var(--color-accent) 8%, var(--color-background) 92%) 100%
    );
}

.theme-threed .section:nth-child(odd) {
  background:
    radial-gradient(
      ellipse 80% 60% at 30% 40%,
      rgba(var(--color-primary-rgb), 0.12),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-surface) 18%, var(--color-background) 82%) 0%,
      var(--color-background) 50%,
      color-mix(in srgb, var(--color-surface) 12%, var(--color-background) 88%) 100%
    );
}

/* 3D: Subtle grid overlay for cyber aesthetic */
.theme-threed .section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(var(--color-primary-rgb), 0.02) 2px,
      rgba(var(--color-primary-rgb), 0.02) 4px
    );
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.theme-threed .section > * {
  position: relative;
  z-index: 1;
}


/* ============================================================================
   COMPONENT ELEVATION - Cards stand out from backgrounds
   ============================================================================ */

/* Ensure cards have proper elevation */
.service-card,
.portfolio-card,
.testimonial-card,
.contact-form-wrapper,
.project-card,
.card {
  position: relative;
  z-index: 2;
}

/* Modern: Clean subtle shadows */
.theme-modern .service-card,
.theme-modern .portfolio-card,
.theme-modern .testimonial-card {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--color-border);
}

.theme-modern .service-card:hover,
.theme-modern .portfolio-card:hover,
.theme-modern .testimonial-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px var(--color-primary-light);
}

/* Creative: Colorful lift with glow */
.theme-creative .service-card,
.theme-creative .portfolio-card,
.theme-creative .testimonial-card {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 0 0 1px var(--color-border);
}

.theme-creative .service-card:hover,
.theme-creative .portfolio-card:hover,
.theme-creative .testimonial-card:hover {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.16),
    0 0 16px var(--color-primary-glow),
    0 0 0 1px var(--color-primary);
}

/* 3D: Glass depth with inner glow */
.theme-threed .service-card,
.theme-threed .portfolio-card,
.theme-threed .testimonial-card {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.theme-threed .service-card:hover,
.theme-threed .portfolio-card:hover,
.theme-threed .testimonial-card:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.25),
    0 0 24px var(--color-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Simplify gradients on mobile for performance */
  .theme-modern,
  .theme-creative,
  .theme-threed {
    background: var(--color-background);
  }

  .theme-modern .hero {
    background: radial-gradient(
      ellipse 120% 80% at 50% 30%,
      rgba(var(--color-primary-rgb), 0.04),
      transparent 70%
    ),
    var(--color-background);
  }

  .theme-creative .hero {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-primary) 8%, var(--color-background) 92%) 0%,
      var(--color-background) 100%
    );
  }

  .theme-threed .hero {
    background:
      radial-gradient(
        ellipse 90% 70% at 50% 40%,
        rgba(var(--color-accent-rgb), 0.12),
        transparent 80%
      ),
      var(--color-background);
  }

  /* Simplify section backgrounds on mobile */
  .section:nth-child(even),
  .section:nth-child(odd) {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Respect user preference for reduced motion */
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}