#l-loading-screen {
  position: fixed;
  inset: 0;
  background-color: var(--color-main-background); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

.c-loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.c-loader-text {
  color: var(--color-standard-white);
  font-family: var(--font-computer);
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.c-loader-timeline {
  position: relative;
  width: 13rem;
  height: 1.2rem;
  display: flex;
  justify-content: center;
}

.c-loader-line {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-standard-white);
  transform: scaleX(0);
  animation: loaderLineGrow 2s infinite ease-in-out;
}

.c-loader-triangle {
  position: absolute;
  top: 1rem;
  width: 0;
  height: 0;
  margin-left: 1rem;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-bottom: 0.5rem solid var(--color-charging-triangle);
  opacity: 0;
  transform: translateX(-50%) scale(0);
  animation: loaderTriangleBlink 2s infinite ease-in-out;
}

@keyframes loaderLineGrow {
  0%        { transform: scaleX(0); }
  15%       { transform: scaleX(0); }
  45%, 85%  { transform: scaleX(1); }
  100%      { transform: scaleX(0); }
}

@keyframes loaderTriangleBlink {
  0%   { opacity: 0;   transform: translateX(-50%) scale(0);   }
  10%  { opacity: 1;   transform: translateX(-50%) scale(1.3); }
  15%  { opacity: 0.3; transform: translateX(-50%) scale(0.8); }
  20%  { opacity: 1;   transform: translateX(-50%) scale(1);   }
  85%  { opacity: 1;   transform: translateX(-50%) scale(1);   }
  100% { opacity: 0;   transform: translateX(-50%) scale(0);   }
}

.loader-hidden {
  opacity: 0;
  pointer-events: none;
}