.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url('../img/loading_bg.webp') center/cover no-repeat;
  z-index: 9999;
  transition: background 0.3s ease-out, opacity 0.15s ease-in;
  opacity: 1;
}

.loading.fade-to-white {
  background: var(--bg-white-color) !important;
  background-image: none !important;
  background-color: var(--bg-white-color) !important;
}

.loading.fade-to-white::before {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out !important;
}

.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
  animation: backgroundPulse 4s ease-in-out infinite;
}

/* Canvas star field */
.star-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: transparent;
  transition: background 0.3s ease-out;
}

.loading.fade-to-white .star-canvas {
  background: var(--bg-white-color) !important;
}

.loading.fade-to-white .star-canvas canvas {
  background: var(--bg-white-color) !important;
}

.loading.fade-to-white .star-canvas canvas {
  display: none !important;
}

.loading.fade-to-white .star {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out;
}

.loading.fade-to-white .constellation-line {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out;
}

.loading.fade-to-white .milky-way {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out;
}

.loading.fade-to-white .particle {
  display: none;
  opacity: 0 !important;
  transition: opacity 0.3s ease-out;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle 4s infinite;
}

.star.small {
  width: 0.5px;
  height: 0.5px;
  opacity: 0.6;
}

.star.medium {
  width: .8px;
  height: .8px;
  opacity: 0.8;
}

.star.large {
  width: 1px;
  height: 1px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.star.blue {
  background: var(--bg-white-color);
  box-shadow: 0 0 2px var(--bg-white-color);
}

.star.yellow {
  background: var(--bg-white-color);
  box-shadow: 0 0 2px var(--bg-white-color);
}

.star.red {
  background: var(--bg-white-color);
  box-shadow: 0 0 2px var(--bg-white-color);
}

.star.purple {
  background: var(--bg-white-color);
  box-shadow: 0 0 2px var(--bg-white-color);
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(.9);
  }

  25% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  75% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes backgroundPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

/* Constellation lines */
.constellation-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform-origin: left center;
}

/* Milky Way */
.milky-way {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 20%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.05) 80%,
      transparent 100%);
  transform: rotate(-15deg);
  animation: milkyWayDrift 20s linear infinite;
}

@keyframes milkyWayDrift {
  0% {
    transform: rotate(-15deg) translateX(-100%);
  }

  100% {
    transform: rotate(-15deg) translateX(100%);
  }
}

.loading .text-block {
  overflow: hidden;
  text-align: right;
  opacity: 1;
}

.loading .line {
  font-size: 4rem;
  font-family: var(--fontSM);
  line-height: 1.2;
  white-space: nowrap;
  margin: 0;
  position: relative;
  color: var(--bg-white-color);
  -webkit-mask-image: linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  animation: text-reveal 1s cubic-bezier(.77,0,.18,1) forwards;
}

@keyframes text-reveal{
  to{
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.loading .line:nth-of-type(1) {
  animation-delay: .8s;
}

.loading .line:nth-of-type(2) {
  animation-delay: 1s;
}

.loading .line::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-black-color);
  animation: a-ltr-after 1s cubic-bezier(.77, 0, .18, 1) forwards;
  transform: translateX(-101%);
}

.loading .line:nth-of-type(1)::after {
  animation-delay: .8s;
}

.loading .line:nth-of-type(2)::after {
  animation-delay: 1s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

.loading .pre {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.9s ease;
  color: var(--bg-white-color);
  font-family: var(--fontSM);
}

.loading .keyword {
  display: inline-block;
  font-weight: 700;
  color: var(--bg-white-color);
  transition: transform .8s ease, opacity .8s ease;
  font-family: var(--fontJS);
  font-weight: 300;
  position: relative;
}

.loading .highlight {
  color: #ffd700;
  font-family: var(--fontGothic);
}

/* Particle effects */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--bg-white-color);
  border-radius: 50%;
  pointer-events: none;
  animation: float 3s linear infinite;
  box-shadow: 0 0 5px var(--bg-white-color);
}

.particle.initial {
  animation: floatFromRandom 3s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100px) translateX(100px);
    opacity: 0;
  }
}

@keyframes floatFromRandom {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }
}

.loading .combined {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 5rem;
  color: var(--bg-white-color);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-family: "JTDouro-Sans";
  font-weight: 100;
}

.loading .loading_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none;
}

.loading .loading_logo img {
  width: 25rem;
  height: auto;
}

/* Responsive design */
@media (max-width: 768px) {
  .loading .line {
    font-size: 1.8rem;
  }

  .loading .combined {
    font-size: 2.3rem;
  }

  .loading .loading_logo img {
    width: 12rem;
  }
}

@media (max-width: 450px) {
  .loading .line {
    font-size: 26px;
  }

  .loading .combined {
    font-size: 32px;
  }

  .loading .loading_logo img {
    width: 180px;
  }
}