body {
  margin: 0;
  padding: 0;
}
#splash-screen {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(242, 243, 248, 0.4);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

#splash-screen img {
  position: absolute;
}

#splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

#splash-screen .splash-spinner {
  width: 200px !important;
  height: 200px !important;
  animation: breathe 3s ease-in-out infinite !important;
  will-change: transform;
  min-width: 200px !important;
  max-width: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  position: relative !important;
  right: 10px !important;
}

/* Logo Spinner Styles */
#splash-screen .base-path { 
  fill: none; 
  stroke-width: 180; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
  opacity: 0.08;
  animation: pulsePath 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}
#splash-screen .base-blue { stroke: #A8D7F5; }
#splash-screen .base-yellow { stroke: #FEF3C7; }
#splash-screen .base-orange { stroke: #FDDFA8; }

#splash-screen .glow-path { 
  fill: none; 
  stroke-width: 380; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
  filter: url(#spinnerGlow);
  animation: pulseGlow 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}
#splash-screen .glow-blue { stroke: #5CAEE5; }
#splash-screen .glow-yellow { stroke: #FDE67C; }
#splash-screen .glow-orange { stroke: #FBC161; }

#splash-screen .main-path { 
  fill: none; 
  stroke-width: 260; 
  stroke-linecap: round; 
  stroke-linejoin: round;
  animation: pulseMainPath 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}
#splash-screen .main-blue { stroke: #338BC5; }
#splash-screen .main-yellow { stroke: #FCDB36; }
#splash-screen .main-orange { stroke: #FAA931; }

#splash-screen .animated-path { 
  animation: draw 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  opacity: 0;
}

@keyframes draw {
  0% { stroke-dashoffset: var(--path-length, 10000); opacity: 0; }
  5% { stroke-dashoffset: var(--path-length, 10000); opacity: 0.8; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 0.5; }
  85% { stroke-dashoffset: calc(var(--path-length, 10000) * -0.2); opacity: 0.2; }
  100% { stroke-dashoffset: calc(var(--path-length, 10000) * -0.3); opacity: 0; }
}

@keyframes pulsePath {
  0%, 100% { 
    stroke-width: 180;
    opacity: 0.5;
  }
  50% { 
    stroke-width: 200;
    opacity: 0.5;
  }
}

@keyframes pulseGlow {
  0%, 100% { 
    stroke-width: 380;
    opacity: 0;
  }
  50% { 
    stroke-width: 420;
    opacity: 0.15;
  }
}

@keyframes pulseMainPath {
  0%, 100% { 
    stroke-width: 260;
    opacity: 1;
  }
  50% { 
    stroke-width: 280;
    opacity: 1;
  }
}

@keyframes breathe {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  #splash-screen .splash-spinner {
    animation: none !important;
  }
  
  #splash-screen .animated-path {
    animation: drawPathReduced 2.4s linear infinite !important;
  }
  
  @keyframes drawPathReduced {
    0% { 
      stroke-dashoffset: var(--path-length, 10000); 
      opacity: 0; 
    }
    25% { 
      stroke-dashoffset: 0; 
      opacity: 1; 
    }
    75% { 
      stroke-dashoffset: 0; 
      opacity: 1; 
    }
    100% { 
      stroke-dashoffset: calc(var(--path-length, 10000) * -0.2); 
      opacity: 0; 
    }
  }
}