:root {
    /* Light mode variables */
    --bg-color-light: #FCFCFC;
    --path-color-1-light: rgba(126, 173, 255, 0.5);
    --path-color-2-light: rgba(91, 44, 131, 0.4);
    --path-color-3-light: rgba(68, 187, 164, 0.4);
    --dot-color-light: #fff;
    --dot-shadow-light: 0 0 15px 5px rgba(126, 173, 255, 0.6);
    
    /* Dark mode variables */
    --bg-color-dark: #121215;
    --path-color-1-dark: rgba(139, 98, 179, 0.5);
    --path-color-2-dark: rgba(74, 155, 236, 0.5);
    --path-color-3-dark: rgba(82, 209, 185, 0.5);
    --dot-shadow-dark: 0 0 15px 5px rgba(74, 155, 236, 0.6);
  }
  
  /* Main background overlay */
  .bg-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }
  
  /* Light mode styling */
  body {
    background-color: var(--bg-color-light);
  }
  
  /* Light path elements */
  .light-path {
    position: absolute;
    opacity: 0.6;
    filter: blur(3px);
  }
  
  /* Arc with glowing dot (main large arc) */
  .arc-path {
    width: 80vw;
    height: 80vw;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top: 2px solid var(--path-color-1-light);
    position: absolute;
    bottom: -40vw;
    right: -40vw;
    transform: rotate(-45deg);
    animation: rotate-slow 120s linear infinite;
  }
  
  /* Dot on the arc */
  .arc-path::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--dot-color-light);
    border-radius: 50%;
    top: 5%;
    left: 50%;
    box-shadow: var(--dot-shadow-light);
    animation: pulse 4s ease-in-out infinite;
  }
  
  /* Diagonal line with glowing dot */
  .diagonal-path {
    height: 1px;
    width: 60vw;
    background: linear-gradient(90deg, 
                transparent, 
                var(--path-color-2-light) 20%, 
                white 50%, 
                var(--path-color-2-light) 80%, 
                transparent);
    position: absolute;
    top: 15%;
    left: -10%;
    transform: rotate(20deg);
    box-shadow: 0 0 20px rgba(91, 44, 131, 0.3);
    animation: float 15s ease-in-out infinite alternate;
  }
  
  /* Dot on the diagonal line */
  .diagonal-path::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--dot-color-light);
    border-radius: 50%;
    top: -3px;
    left: 65%;
    box-shadow: var(--dot-shadow-light);
    animation: pulse 3s ease-in-out infinite;
  }
  
  /* Curved path */
  .curved-path {
    position: absolute;
    top: 60%;
    left: 5%;
    width: 40vw;
    height: 20vw;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top: 1px solid var(--path-color-3-light);
    transform: rotate(-20deg);
    animation: float-rotate 20s ease-in-out infinite alternate;
  }
  
  /* Second curved path */
  .curved-path-2 {
    position: absolute;
    top: 20%;
    right: 5%;
    width: 30vw;
    height: 15vw;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top: 1px solid var(--path-color-1-light);
    transform: rotate(30deg);
    animation: float-rotate-reverse 25s ease-in-out infinite alternate;
  }
  
  /* V-shaped element */
  .v-path {
    position: absolute;
    width: 40vw;
    height: 40vw;
    top: 40%;
    left: 30%;
    opacity: 0.5;
  }
  
  .v-path::before,
  .v-path::after {
    content: "";
    position: absolute;
    width: 20vw;
    height: 1px;
    background: linear-gradient(90deg, 
                transparent, 
                var(--path-color-2-light), 
                white, 
                var(--path-color-2-light), 
                transparent);
    box-shadow: 0 0 15px rgba(126, 173, 255, 0.3);
  }
  
  .v-path::before {
    transform: rotate(30deg);
    left: 0;
    top: 0;
  }
  
  .v-path::after {
    transform: rotate(-30deg);
    right: 0;
    top: 0;
  }
  
  /* Full orbit element */
  .orbit-path {
    position: absolute;
    width: 30vw;
    height: 30vw;
    border: 1px solid transparent;
    border-top: 1px solid var(--path-color-1-light);
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid var(--path-color-3-light);
    border-radius: 50%;
    top: 10%;
    left: 30%;
    animation: orbit 60s linear infinite;
  }
  
  /* Dark mode styles */
  body.dark-mode {
    background-color: var(--bg-color-dark);
  }
  
  body.dark-mode .arc-path {
    border-top-color: var(--path-color-1-dark);
  }
  
  body.dark-mode .arc-path::after,
  body.dark-mode .diagonal-path::after {
    box-shadow: var(--dot-shadow-dark);
  }
  
  body.dark-mode .diagonal-path {
    background: linear-gradient(90deg, 
                transparent, 
                var(--path-color-2-dark) 20%, 
                white 50%, 
                var(--path-color-2-dark) 80%, 
                transparent);
    box-shadow: 0 0 20px rgba(74, 155, 236, 0.3);
  }
  
  body.dark-mode .curved-path {
    border-top-color: var(--path-color-3-dark);
  }
  
  body.dark-mode .curved-path-2 {
    border-top-color: var(--path-color-1-dark);
  }
  
  body.dark-mode .v-path::before,
  body.dark-mode .v-path::after {
    background: linear-gradient(90deg, 
                transparent, 
                var(--path-color-2-dark), 
                white, 
                var(--path-color-2-dark), 
                transparent);
    box-shadow: 0 0 15px rgba(74, 155, 236, 0.4);
  }
  
  body.dark-mode .orbit-path {
    border-top-color: var(--path-color-1-dark);
    border-left-color: var(--path-color-3-dark);
  }
  
  /* Animations */
  @keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes rotate-reverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
  }
  
  @keyframes float {
    0% { transform: translate(0, 0); }
    50% { transform: translate(0, -20px); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes float-rotate {
    0% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(-5deg) translate(0, -10px); }
    100% { transform: rotate(0deg) translate(0, 0); }
  }
  
  @keyframes float-rotate-reverse {
    0% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(5deg) translate(0, -15px); }
    100% { transform: rotate(0deg) translate(0, 0); }
  }
  
  @keyframes pulse {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.6; transform: scale(1); }
  }
  
  @keyframes pulse-slow {
    0% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 0.4; transform: scale(1); }
  }
  
  @keyframes orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes move-along-wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(1000px); }
  }
  
  @keyframes shimmer {
    0% { stroke-opacity: 0.2; }
    50% { stroke-opacity: 0.8; }
    100% { stroke-opacity: 0.2; }
  }
  
  @keyframes dash {
    to {
      stroke-dashoffset: 1000;
    }
  }
  
  /* Dark mode adjustments */
  body.dark-mode .light-element.arc-path {
    stroke: rgba(139,98,179,0.4);
  }
  
  body.dark-mode .light-element.arc-path-2 {
    stroke: rgba(74,155,236,0.3);
  }
  
  body.dark-mode .light-element.arc-path-3 {
    stroke: rgba(82,209,185,0.3);
  }
  
  body.dark-mode .light-element.dot {
    filter: drop-shadow(0 0 5px rgba(74,155,236,0.8)) !important;
  }
  
  body.dark-mode .light-element.dot-2 {
    filter: drop-shadow(0 0 5px rgba(139,98,179,0.8)) !important;
  }
  
  body.dark-mode .light-element.dot-3 {
    filter: drop-shadow(0 0 5px rgba(82,209,185,0.8)) !important;
  }
  
  body.dark-mode .light-element.curve:nth-of-type(1) {
    stroke: rgba(82,209,185,0.4);
  }
  
  body.dark-mode .light-element.curve:nth-of-type(2) {
    stroke: rgba(139,98,179,0.4);
  }
  
  body.dark-mode .light-element.curve-s {
    stroke: rgba(74,155,236,0.3);
  }
  
  body.dark-mode .light-element.curve-wave {
    stroke: rgba(82,209,185,0.3);
  }
  
  body.dark-mode .light-element.v-line {
    stroke: rgba(74,155,236,0.3);
  }
  
  body.dark-mode .light-element.v-line-2 {
    stroke: rgba(82,209,185,0.25);
  }
  
  body.dark-mode .light-element.orbit {
    stroke: rgba(139,98,179,0.3);
  }
  
  body.dark-mode .light-element.orbit-2 {
    stroke: rgba(82,209,185,0.3);
  }
  
  body.dark-mode .light-element.orbit-3 {
    stroke: rgba(74,155,236,0.25);
  }
  
  body.dark-mode .light-element.glow-center {
    fill: url(#centerGlow);
    opacity: 0.7;
  }
  
  body.dark-mode .light-element.glow-center-2 {
    fill: url(#purpleGlow);
    opacity: 0.6;
  }
  
  body.dark-mode .light-element.glow-center-3 {
    fill: url(#tealGlow);
    opacity: 0.6;
  }
  
  body.dark-mode .light-element.extra-dot:nth-of-type(1) {
    filter: drop-shadow(0 0 3px rgba(82,209,185,0.6)) !important;
  }
  
  body.dark-mode .light-element.extra-dot:nth-of-type(2) {
    filter: drop-shadow(0 0 3px rgba(74,155,236,0.6)) !important;
  }
  
  body.dark-mode .light-element.extra-dot-3 {
    filter: drop-shadow(0 0 3px rgba(139,98,179,0.6)) !important;
  }
  
  body.dark-mode .light-element.extra-dot-4 {
    filter: drop-shadow(0 0 3px rgba(82,209,185,0.6)) !important;
  }
  
  body.dark-mode .light-element.extra-dot-5 {
    filter: drop-shadow(0 0 3px rgba(74,155,236,0.6)) !important;
  }
  
  body.dark-mode .light-element.connection {
    stroke: rgba(255,255,255,0.15);
  }
  
  /* Enhanced mouse interaction effect */
  .background-svg:hover .light-element {
    transition: all 0.5s ease;
  }
  
  .background-svg:hover .light-element.dot, 
  .background-svg:hover .light-element.dot-2, 
  .background-svg:hover .light-element.dot-3,
  .background-svg:hover .light-element.dot-4,
  .background-svg:hover .light-element.dot-5,
  .background-svg:hover .light-element.extra-dot,
  .background-svg:hover .light-element.extra-dot-3,
  .background-svg:hover .light-element.extra-dot-4,
  .background-svg:hover .light-element.extra-dot-5 {
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)) !important;
    transform: scale(1.3);
  }
  
  .background-svg:hover .light-element.arc-path,
  .background-svg:hover .light-element.arc-path-2,
  .background-svg:hover .light-element.arc-path-3,
  .background-svg:hover .light-element.orbit,
  .background-svg:hover .light-element.orbit-2,
  .background-svg:hover .light-element.orbit-3 {
    stroke-width: 1.5;
    stroke-opacity: 0.8;
  }
  
  .background-svg:hover .light-element.curve,
  .background-svg:hover .light-element.curve-s,
  .background-svg:hover .light-element.curve-wave {
    stroke-width: 1.5;
    stroke-opacity: 0.8;
  }
  
  .background-svg:hover .light-element.line,
  .background-svg:hover .light-element.line-2,
  .background-svg:hover .light-element.line-3,
  .background-svg:hover .light-element.v-line,
  .background-svg:hover .light-element.v-line-2,
  .background-svg:hover .light-element.extra-line,
  .background-svg:hover .light-element.extra-line-2,
  .background-svg:hover .light-element.extra-line-3 {
    stroke-width: 1.5;
    stroke-opacity: 0.8;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .light-element.connection {
      display: none; /* Hide connection web on mobile to improve performance */
    }
    
    .light-element.shooting-star,
    .light-element.shooting-star-2 {
      display: none; /* Hide shooting stars on mobile to improve performance */
    }
    
    .light-element.orbit-3,
    .light-element.extra-line-2,
    .light-element.extra-line-3,
    .light-element.extra-dot-4,
    .light-element.extra-dot-5 {
      display: none; /* Hide some decorative elements on mobile */
    }
  }