/* Animated Background for WordPress */
.animated-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  background: #070F1A;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}

.animated-background-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: block;
  min-width: 100%;
  min-height: 100%;
}

/* Make the background rect fill the entire container */
.animated-background-svg rect {
  width: 100%;
  height: 100%;
}

/* Scale all animated elements to be responsive */
.animated-background-svg circle,
.animated-background-svg path {
  transform-origin: center;
}

/* Make the foreignObject responsive */
.animated-background-svg foreignObject {
  width: 100%;
  height: 100%;
  x: 0;
  y: 0;
}

/* Animated Elements */
.ellipse-6 {
  animation: float 8000ms linear infinite 1ms;
}

.ellipse-7 {
  animation: drift 10000ms linear infinite 1ms;
}

.ellipse-8 {
  animation: pulse 6000ms linear infinite 1ms;
}

.ellipse-5 {
  animation: slowMove 12000ms linear infinite 1ms;
}

.ellipse-11 {
  animation: rotate-move 15000ms linear infinite 1ms;
}

.ellipse-9 {
  animation: wave 9000ms linear infinite 1ms;
}

.ellipse-12 {
  animation: spiral 11000ms linear infinite 1ms;
}

.ellipse-10 {
  animation: bounce 7000ms linear infinite 1ms;
}

/* Keyframe Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-30px) scale(1.1); }
}

@keyframes drift {
  0% { transform: translateX(725.61px) translateY(0px) rotate(-29.6deg); }
  25% { transform: translateX(648.5px) translateY(-151px) rotate(-29.6deg); }
  50% { transform: translateX(579.5px) translateY(-151px) rotate(-29.6deg); }
  75% { transform: translateX(528.5px) translateY(366px) rotate(-29.6deg); }
  100% { transform: translateX(725.61px) translateY(0px) rotate(-29.6deg); }
}

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

@keyframes slowMove {
  0% { transform: translateX(0px) translateY(0px); }
  25% { transform: translateX(32px) translateY(-242.5px); }
  50% { transform: translateX(145px) translateY(-521.5px); }
  75% { transform: translateX(-105px) translateY(-195.5px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes rotate-move {
  0% { transform: translateX(0px) translateY(0px) rotate(49.77deg); }
  25% { transform: translateX(242px) translateY(0px) rotate(49.77deg); }
  50% { transform: translateX(290px) translateY(0px) rotate(12.11deg); }
  75% { transform: translateX(142px) translateY(0px) rotate(12.11deg); }
  100% { transform: translateX(0px) translateY(0px) rotate(49.77deg); }
}

@keyframes wave {
  0% { transform: translateX(0px) translateY(0px); }
  25% { transform: translateX(-219px) translateY(-28px); }
  50% { transform: translateX(-13px) translateY(350px); }
  75% { transform: translateX(96px) translateY(472px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes spiral {
  0% { transform: translateX(0px) translateY(0px) rotate(-29.6deg); }
  25% { transform: translateX(30px) translateY(-353px) rotate(-29.6deg); }
  50% { transform: translateX(354px) translateY(-424px) rotate(-29.6deg); }
  75% { transform: translateX(349px) translateY(-553px) rotate(-29.6deg); }
  100% { transform: translateX(0px) translateY(0px) rotate(-29.6deg); }
}

@keyframes bounce {
  0% { transform: translateX(0px) translateY(0px); }
  25% { transform: translateX(142px) translateY(543px); }
  50% { transform: translateX(290px) translateY(537px); }
  75% { transform: translateX(242px) translateY(537px); }
  100% { transform: translateX(0px) translateY(0px); }
}

/* Background blur effect */
.bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(225px);
  pointer-events: none;
}

/* Ensure content appears above background */
body {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

/* Ensure no overflow issues */
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Make sure background covers everything */
* {
  box-sizing: border-box;
}

/* Mobile optimizations - animations only, no scaling */
@media (max-width: 768px) {
  .ellipse-6 { animation: float 10000ms linear infinite 1ms; }
  .ellipse-7 { animation: drift 12000ms linear infinite 1ms; }
  .ellipse-8 { animation: pulse 8000ms linear infinite 1ms; }
  .ellipse-5 { animation: slowMove 15000ms linear infinite 1ms; }
  .ellipse-11 { animation: rotate-move 18000ms linear infinite 1ms; }
  .ellipse-9 { animation: wave 11000ms linear infinite 1ms; }
  .ellipse-12 { animation: spiral 13000ms linear infinite 1ms; }
  .ellipse-10 { animation: bounce 9000ms linear infinite 1ms; }
}


/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .ellipse-6, .ellipse-7, .ellipse-8, .ellipse-5, 
  .ellipse-11, .ellipse-9, .ellipse-12, .ellipse-10 {
    animation: none;
  }
}