.theme-transition-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* Two-bar horizontal wipe: a thin leading line followed by the fill */
.theme-transition-overlay::before,
.theme-transition-overlay::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: translateX(-100%);
  will-change: transform;
}

/* Leading edge — thin bar that cuts across first */
.theme-transition-overlay::before {
  background: var(--wipe-color, #0D0C0B);
  opacity: 0.3;
}

/* Fill — the solid block that follows */
.theme-transition-overlay::after {
  background: var(--wipe-color, #0D0C0B);
}

.theme-transition-overlay.active::before {
  animation: wipe-lead 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.theme-transition-overlay.active::after {
  animation: wipe-fill 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: 0.04s;
}

@keyframes wipe-lead {
  0%   { transform: translateX(-100%); }
  40%  { transform: translateX(0%); }
  60%  { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@keyframes wipe-fill {
  0%   { transform: translateX(-100%); }
  45%  { transform: translateX(0%); }
  65%  { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}