/* Animated Grid with Fixed Sunset */
#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* Centered sunset gradient */
#app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 200, 10, 1) 0%,
    rgba(255, 180, 20, 0.9) 5%,
    rgba(255, 160, 30, 0.8) 10%,
    rgba(255, 140, 60, 0.7) 15%,
    rgba(255, 120, 80, 0.6) 20%,
    rgba(255, 100, 100, 0.5) 25%,
    rgba(220, 80, 120, 0.4) 30%,
    rgba(200, 60, 140, 0.3) 40%,
    rgba(150, 30, 100, 0.2) 50%,
    rgba(100, 10, 60, 0.1) 65%,
    transparent 85%
  );
  z-index: -1;
  pointer-events: none;
}

/* Moving grid */
#app::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  background-image: 
    linear-gradient(rgba(0, 255, 170, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 170, 0.2) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: moveGrid 30s linear infinite;
  z-index: -2;
  pointer-events: none;
  opacity: 0.9;
}

@keyframes moveGrid {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Ensure content stays above the grid */
#app > * {
  position: relative;
  z-index: 2;
}