/* Consolidated Background Styles for EarthAngelJazz
   This file eliminates ~200 lines of duplicate CSS across all pages */

/* Base container styles */
.moon-stars-bg, .animated-bg {
  position: relative;
  overflow: hidden;
}

/* First set of stars (pink) */
.moon-stars-bg::before, .animated-bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%23e83e8c' opacity='0.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%23e83e8c' opacity='0.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%23e83e8c' opacity='0.2'/%3E%3C/svg%3E");
  background-position: 
    10% 15%,
    85% 30%,
    25% 60%;
  background-size: 
    15px,
    10px,
    12px;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

/* Second set of stars (purple) */
.moon-stars-bg::after, .animated-bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%239c27b0' opacity='0.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%239c27b0' opacity='0.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%239c27b0' opacity='0.2'/%3E%3C/svg%3E");
  background-position: 
    75% 20%,
    15% 45%,
    65% 75%;
  background-size: 
    12px,
    18px,
    10px;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  animation: float 8s ease-in-out infinite reverse;
}

/* Pink moon */
.moon-stars-bg .moon-1, .animated-bg .moon-1 {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 10%;
  right: 10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.25A9.75 9.75 0 1021.75 12 9.76 9.76 0 0012 2.25zm0 18A8.25 8.25 0 1120.25 12 8.25 8.25 0 0112 20.25z' fill='%23e83e8c' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: float 5s ease-in-out infinite, pulse-glow 3s ease-in-out infinite;
}

/* Purple moon */
.moon-stars-bg .moon-2, .animated-bg .moon-2 {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 15%;
  left: 10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.25A9.75 9.75 0 0 0 2.25 12c0 5.384 4.365 9.75 9.75 9.75 5.384 0 9.75-4.366 9.75-9.75 0-1.35-.276-2.636-.775-3.804-.276-.654-1.156-.47-1.222.211-.407 4.19-3.96 7.473-8.273 7.473-4.622 0-8.377-3.764-8.377-8.404 0-3.097 1.675-5.814 4.144-7.276.652-.384.347-1.426-.389-1.346A9.76 9.76 0 0 0 12 2.25z' fill='%239c27b0' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: float 7s ease-in-out infinite 1s, pulse-glow 4s ease-in-out infinite 0.5s;
}

/* Pink stars */
.moon-stars-bg .star-1, .animated-bg .star-1 {
  position: absolute;
  width: 15px;
  height: 15px;
  top: 15%;
  left: 20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%23e83e8c'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: sparkle 3s ease-in-out infinite;
  opacity: 0;
}

.moon-stars-bg .star-2, .animated-bg .star-2 {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 35%;
  right: 15%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%239c27b0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: sparkle 4s ease-in-out infinite 0.5s;
  opacity: 0;
}

.moon-stars-bg .star-3, .animated-bg .star-3 {
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 25%;
  left: 30%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%23e83e8c'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: sparkle 3.5s ease-in-out infinite 1s;
  opacity: 0;
}

/* Purple stars */
.moon-stars-bg .star-4, .animated-bg .star-4 {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 60%;
  right: 25%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%239c27b0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: sparkle 4.5s ease-in-out infinite 1.5s;
  opacity: 0;
}

.moon-stars-bg .star-5, .animated-bg .star-5 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 75%;
  left: 15%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%23e83e8c'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: sparkle 3s ease-in-out infinite 2s;
  opacity: 0;
}

.moon-stars-bg .star-6, .animated-bg .star-6 {
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 15%;
  right: 10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41L12 0Z' fill='%239c27b0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  animation: sparkle 4s ease-in-out infinite 2.5s;
  opacity: 0;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes sparkle {
  0%, 100% { 
    opacity: 0; 
    transform: scale(0) rotate(0deg); 
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1) rotate(180deg); 
  }
}

@keyframes pulse-glow {
  0%, 100% { 
    opacity: 0.4; 
    filter: brightness(1); 
  }
  50% { 
    opacity: 0.8; 
    filter: brightness(1.3); 
  }
}

/* Enhanced loading animation */
.loading-spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(232, 62, 140, 0.3);
  border-radius: 50%;
  border-top-color: #e83e8c;
  animation: spin 1s ease-in-out infinite;
}

.loading-text {
  color: #e83e8c;
  font-weight: 500;
  margin-top: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}