#page-transition {
  position: fixed; inset: 0;
  background: #0f0f0f;
  transform: translateX(-100%);
  z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  pointer-events: none;
}
#page-transition::after {
  content: '';
  position: absolute; top: 0; right: -4px; bottom: 0; width: 4px;
  background: #22c55e;
  box-shadow: 0 0 14px #22c55e, 0 0 32px rgba(34,197,94,0.5);
}
#page-transition .t-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 32px; font-weight: 700; letter-spacing: 7px;
  color: #fff; opacity: 0; white-space: nowrap;
}
#page-transition .t-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 4px;
  color: #22c55e; opacity: 0; white-space: nowrap;
}
#page-transition.sweep-in  { animation: sweepIn  0.55s cubic-bezier(0.4,0,0.2,1) forwards; }
#page-transition.sweep-out { animation: sweepOut 0.55s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes sweepIn  { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes sweepOut { from{transform:translateX(0)} to{transform:translateX(100%)} }
#page-transition.sweep-in  .t-logo { animation: tFadeIn 0.3s 0.3s  ease forwards; }
#page-transition.sweep-in  .t-sub  { animation: tFadeIn 0.3s 0.38s ease forwards; }
#page-transition.sweep-out .t-logo,
#page-transition.sweep-out .t-sub  { animation: tFadeOut 0.2s ease forwards; }
@keyframes tFadeIn  { to { opacity: 1; } }
@keyframes tFadeOut { to { opacity: 0; } }