#home-container {
  transition: background 800ms ease;
}

#home-container .gradient {
  background: transparent;
}

#home-container.theme-purple {
  background: radial-gradient(circle at 25% 18%, rgba(124, 58, 237, 0.18), transparent 26%),
    radial-gradient(circle at 78% 12%, rgba(139, 92, 246, 0.15), transparent 30%),
    linear-gradient(135deg, #7c3aed 0%, #6d28d9 35%, #4c1d95 100%);
}

#home-container.theme-blue {
  background: radial-gradient(circle at 18% 14%, rgba(56, 189, 248, 0.18), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(96, 165, 250, 0.2), transparent 32%),
    linear-gradient(135deg, #0ea5e9 0%, #2563eb 38%, #1e3a8a 100%);
}

.hero-visual {
  animation: heroFloat 14s ease-in-out infinite;
  will-change: transform;
  display: grid;
  position: relative;
}

.hero-frame {
  grid-area: 1 / 1;
  transition: opacity 600ms ease, transform 600ms ease;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

.hero-frame.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  z-index: 1;
}

.hero-frame:not(.active) {
  pointer-events: none;
}

#home-container.theme-purple nav#header a {
  color: #f5f3ff !important;
}
#home-container.theme-purple nav#header a:hover {
  color: #e0e7ff !important;
}

#home-container.theme-blue nav#header a {
  color: #e0f2fe !important;
}
#home-container.theme-blue nav#header a:hover {
  color: #bfdbfe !important;
}

@keyframes heroFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}