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);
}

#splash-screen img {
  position: absolute;
}

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

.splash-spinner {
  margin-left: calc(100vw - 100%);
  width: 200px;
  height: 200px;
}

/* Logo Spinner Styles */
.base-path { 
  fill: none; 
  stroke-width: 180; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
  opacity: 0.08; 
}
.base-blue { stroke: #A8D7F5; }
.base-yellow { stroke: #FEF3C7; }
.base-orange { stroke: #FDDFA8; }

.glow-path { 
  fill: none; 
  stroke-width: 380; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
  filter: url(#spinnerGlow); 
}
.glow-blue { stroke: #5CAEE5; }
.glow-yellow { stroke: #FDE67C; }
.glow-orange { stroke: #FBC161; }

.main-path { 
  fill: none; 
  stroke-width: 260; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
}
.main-blue { stroke: #338BC5; }
.main-yellow { stroke: #FCDB36; }
.main-orange { stroke: #FAA931; }

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

@keyframes draw {
  0% { stroke-dashoffset: var(--path-length, 10000); opacity: 0; }
  5% { opacity: 0.8; }
  45% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* removed old outline draw animation */