#app-content { transition: opacity .18s ease; }
html.is-changing #app-content { opacity: .12; }

#swup-overlay{
  position:fixed; inset:0;
  background: rgba(15,15,15,0.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .28s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2147483647;
}
#swup-overlay.active{ opacity:1; pointer-events: all; }

.swup-loader{ display:flex; flex-direction:column; align-items:center; gap:14px; }

.swup-logo{
  width:96px; height:96px;
  border-radius:18px;
  animation: bounce 1.0s ease-in-out infinite;
  will-change: transform;
  image-rendering: auto;
}
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

.swup-progress{
  width:200px; height:4px;
  background: rgba(255,255,255,0.2);
  border-radius:999px;
  overflow:hidden;
}
.swup-progress .bar{
  display:block;
  width:40%; height:100%;
  background: linear-gradient(90deg, #06b6d4, #4f46e5);
  animation: indeterminate 1.1s linear infinite;
  border-radius:999px;
}
@keyframes indeterminate{
  0%{ transform: translateX(-100%); }
  50%{ transform: translateX(20%); }
  100%{ transform: translateX(220%); }
}
/* ...keep everything you already have... */

/* Progress bar container (unchanged) */
.swup-progress{
  width:200px; height:4px;
  background: rgba(255,255,255,0.2);
  border-radius:999px;
  overflow:hidden;
}

/* Bar defaults to 0% width; JS updates width live */
.swup-progress .bar{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #06b6d4, #4f46e5);
  border-radius:999px;
  transition: width .15s linear; /* smooth increments */
}

/* When we don’t know real size, we add .indeterminate for looped animation */
.swup-progress .bar.indeterminate{
  width:40%;
  animation: indeterminate 1.1s linear infinite;
}
@keyframes indeterminate{
  0%{ transform: translateX(-100%); }
  50%{ transform: translateX(20%); }
  100%{ transform: translateX(220%); }
}