/**
 * 2025 Gradient Mesh Backgrounds
 * Subtle, animated gradient meshes for modern visual appeal
 *
 * To remove: Delete this CSS file link from layout.html
 */

/* Animated gradient mesh for "Other Problems" section */
.gradient-mesh-bg {
  position: relative;
  overflow: hidden;
}

.gradient-mesh-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 30%, rgba(55, 125, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(74, 144, 226, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(100, 170, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(33, 50, 91, 0.06) 0%, transparent 50%);
  animation: gradient-shift 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above gradient */
.gradient-mesh-bg > * {
  position: relative;
  z-index: 1;
}

@keyframes gradient-shift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(-5%, 5%) rotate(1deg);
  }
  66% {
    transform: translate(5%, -5%) rotate(-1deg);
  }
}

/* Subtle gradient for stats section */
.gradient-mesh-subtle {
  position: relative;
  overflow: hidden;
}

.gradient-mesh-subtle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 10% 20%, rgba(74, 144, 226, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(53, 122, 189, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.gradient-mesh-subtle > * {
  position: relative;
  z-index: 1;
}

/* Hero gradient enhancement - Dark blues from hero palette */
.gradient-mesh-hero {
  position: relative;
  overflow: hidden;
}

.gradient-mesh-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 30%, rgba(47, 73, 121, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(33, 50, 91, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(74, 144, 226, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(53, 122, 189, 0.3) 0%, transparent 50%);
  animation: gradient-shift 30s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero content stays on top */
.gradient-mesh-hero > * {
  position: relative;
  z-index: 2;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .gradient-mesh-bg::before,
  .gradient-mesh-hero::after {
    animation: none;
  }
}

/* Frosted Glass Card for Hero Text */
.hero-frosted-card {
  background: rgba(33, 50, 91, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3rem 2.5rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-frosted-card {
    padding: 2rem 1.5rem;
    border-radius: 1rem;
  }
}

/* Asymmetric Split Hero Enhancements */
.hero-visual-container {
  position: relative;
  animation: heroFloatIn 1s ease-out;
}

@keyframes heroFloatIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating Stat Cards */
.hero-floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  animation: floatUpDown 3s ease-in-out infinite;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.hero-stat-1 {
  top: 10%;
  right: -5%;
  animation-delay: 0s;
}

.hero-stat-2 {
  bottom: 15%;
  left: -8%;
  animation-delay: 1.5s;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Device browser enhancements for hero */
.hero-visual-container .device-browser {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.hero-visual-container .device-browser:hover {
  transform: translateY(-5px);
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
  .hero-floating-card {
    display: none; /* Hide floating cards on mobile for clarity */
  }

  .hero-visual-container {
    margin-top: 2rem;
  }
}

