/* ==========================================================================
   Scroll progress bar + preloader
   ========================================================================== */
.progress-bar{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(255,59,78,.6);
  z-index: 10001;
  transition: width .1s linear;
}

.preloader{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s var(--ease-out), visibility .6s var(--ease-out);
}

body.is-loaded .preloader{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.preloader__icon{
  width: 56px; height: 56px;
  color: var(--red-500);
  filter: drop-shadow(0 0 18px rgba(255,59,78,.6));
  animation: pulseIcon 1.6s var(--ease-in-out) infinite;
}

@keyframes pulseIcon{
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .75; }
}

.preloader__bar{
  width: 160px;
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}

.preloader__bar::after{
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--grad-brand);
  animation: barSlide 1.1s var(--ease-in-out) infinite;
}

@keyframes barSlide{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(350%); }
}