/* Creative Background for Front Page */

/* Main body background with subtle gradient */
body {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 25%, #1a1a1a 50%, #0a0a0a 75%, #000000 100%) !important;
  background-attachment: fixed !important;
  position: relative;
  overflow-x: hidden;
}

/* Animated geometric shapes background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 179, 71, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
  animation: subtleShift 20s ease-in-out infinite alternate;
}

@keyframes subtleShift {
  0% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(10px) translateY(-5px) scale(1.02); }
  100% { transform: translateX(-5px) translateY(10px) scale(0.98); }
}

/* Floating geometric elements */
.creative-bg-element {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  animation: float 15s ease-in-out infinite;
}

.creative-bg-element:nth-child(1) {
  top: 10%;
  left: 10%;
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #d4af37, transparent);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation-delay: 0s;
}

.creative-bg-element:nth-child(2) {
  top: 20%;
  right: 15%;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ffb347, transparent);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation-delay: -3s;
}

.creative-bg-element:nth-child(3) {
  bottom: 25%;
  left: 20%;
  width: 100px;
  height: 100px;
  background: linear-gradient(225deg, #d4af37, transparent);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation-delay: -6s;
}

.creative-bg-element:nth-child(4) {
  top: 60%;
  right: 25%;
  width: 90px;
  height: 90px;
  background: linear-gradient(315deg, #ffb347, transparent);
  clip-path: polygon(30% 0%, 70% 0%, 100% 70%, 70% 100%, 30% 100%, 0% 30%);
  animation-delay: -9s;
}

.creative-bg-element:nth-child(5) {
  bottom: 15%;
  right: 10%;
  width: 70px;
  height: 70px;
  background: linear-gradient(90deg, #d4af37, transparent);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation-delay: -12s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-20px) rotate(5deg) scale(1.05);
  }
  50% {
    transform: translateY(-10px) rotate(-3deg) scale(0.95);
  }
  75% {
    transform: translateY(-25px) rotate(2deg) scale(1.02);
  }
}

/* Subtle animated grid overlay */
.creative-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.08; }
}

/* Additional creative elements - subtle animated lines */
.creative-line-element {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background: linear-gradient(45deg, #d4af37, transparent);
  animation: lineFlow 12s ease-in-out infinite;
}

.creative-line-element.line-1 {
  top: 30%;
  left: -10%;
  width: 200px;
  height: 2px;
  animation-delay: 0s;
}

.creative-line-element.line-2 {
  top: 70%;
  right: -10%;
  width: 180px;
  height: 2px;
  animation-delay: -4s;
}

.creative-line-element.line-3 {
  bottom: 40%;
  left: -5%;
  width: 150px;
  height: 2px;
  animation-delay: -8s;
}

@keyframes lineFlow {
  0% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.04;
  }
  90% {
    opacity: 0.04;
  }
  100% {
    transform: translateX(100vw) scaleX(1);
    opacity: 0;
  }
}

/* Subtle particle-like dots */
.creative-dot-element {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #d4af37, transparent);
  animation: dotTwinkle 6s ease-in-out infinite;
}

.creative-dot-element.dot-1 {
  top: 15%;
  left: 25%;
  width: 4px;
  height: 4px;
  animation-delay: 0s;
}

.creative-dot-element.dot-2 {
  top: 45%;
  right: 30%;
  width: 6px;
  height: 6px;
  animation-delay: -2s;
}

.creative-dot-element.dot-3 {
  bottom: 35%;
  left: 35%;
  width: 3px;
  height: 3px;
  animation-delay: -4s;
}

.creative-dot-element.dot-4 {
  top: 65%;
  right: 15%;
  width: 5px;
  height: 5px;
  animation-delay: -6s;
}

@keyframes dotTwinkle {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.5);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .creative-bg-element {
    opacity: 0.05;
  }

  .creative-bg-element:nth-child(1),
  .creative-bg-element:nth-child(3),
  .creative-bg-element:nth-child(5) {
    display: none;
  }

  .creative-bg-element:nth-child(2),
  .creative-bg-element:nth-child(4) {
    width: 60px;
    height: 60px;
  }

  .creative-line-element {
    opacity: 0.02;
  }

  .creative-line-element.line-2,
  .creative-line-element.line-3 {
    display: none;
  }

  .creative-dot-element {
    opacity: 0.05;
  }
}

@media (max-width: 480px) {
  .creative-bg-element {
    opacity: 0.03;
  }

  .creative-bg-element:nth-child(2),
  .creative-bg-element:nth-child(4) {
    width: 40px;
    height: 40px;
  }

  .creative-line-element {
    display: none;
  }

  .creative-dot-element {
    opacity: 0.03;
  }

  .creative-dot-element.dot-2,
  .creative-dot-element.dot-4 {
    display: none;
  }
}