:root {
  /* Loading screen */
  --loader-background: #000;
  --loader-z-index: 99999;
  --loader-fade-duration: 1s;

  /* Stripe appearance */
  --stripe-height: 132px;
  --stripe-size: 12px;
  --stripe-color: #292929;
  --stripe-gap-color: #050505;
  --stripe-speed: 1.2s;
  --stripe-angle: 45deg;
  --stripe-movement: 34px;

  /* Left gradient */
  --gradient-start: 10%;
  --gradient-mid: 20%;
  --gradient-strong: 50%;
  --gradient-end: 85%;

  /* Loading text */
  --text-color: #fff;
  --text-size: 22px;
  --text-weight: 800;
  --text-spacing: 6px;
  --text-right: 5%;
  --text-offset-y: 38px;
  --text-shadow: 2px 2px 3px #000;
}

/* Loading overlay */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: var(--loader-z-index);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: var(--loader-background);

  opacity: 1;
  visibility: visible;

  transition:
    opacity var(--loader-fade-duration) ease,
    visibility var(--loader-fade-duration) ease;
}

/* Fade-out state */
#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Animated stripe band */
.loading-stripes {
  position: absolute;
  inset-inline: 0;
  height: var(--stripe-height);

  background-color: var(--stripe-gap-color);

  background-image: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color) 0,
    var(--stripe-color) var(--stripe-size),
    var(--stripe-gap-color) var(--stripe-size),
    var(--stripe-gap-color) calc(var(--stripe-size) * 2)
  );

  animation: stripe-movement var(--stripe-speed) linear infinite;

  /* Left-side gradient fade */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent var(--gradient-start),
    rgba(0, 0, 0, 0.15) var(--gradient-mid),
    rgba(0, 0, 0, 0.65) var(--gradient-strong),
    #000 var(--gradient-end)
  );

  mask-image: linear-gradient(
    to right,
    transparent var(--gradient-start),
    rgba(0, 0, 0, 0.15) var(--gradient-mid),
    rgba(0, 0, 0, 0.65) var(--gradient-strong),
    #000 var(--gradient-end)
  );
}

/* Move stripes right */
@keyframes stripe-movement {
  from {
    background-position: 0 0;
  }

  to {
    background-position: var(--stripe-movement) 0;
  }
}

/* Loading text */
.loading-content {
  position: absolute;
  right: var(--text-right);
  z-index: 2;

  transform: translateY(var(--text-offset-y));
}

.loading-content span {
  color: var(--text-color);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  letter-spacing: var(--text-spacing);
  text-shadow: var(--text-shadow);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .loading-stripes {
    animation: none;
  }
}