/* Cjamput OBS-style transition overlay */
.cjamput-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at center, rgba(15, 25, 25, 0.96) 0%, rgba(9, 18, 20, 0.98) 55%, rgba(0, 0, 0, 1) 100%);
  overflow: hidden;
}

.cjamput-transition-overlay::before,
.cjamput-transition-overlay::after {
  content: '';
  position: absolute;
  width: 150vw;
  height: 42vh;
  left: -25vw;
  transform: rotate(-14deg) translateX(-120%);
  background: linear-gradient(90deg, rgba(7,152,139,0), rgba(7,152,139,0.98), rgba(95,230,210,0.92), rgba(7,152,139,0));
  filter: blur(0.2px);
}

.cjamput-transition-overlay::before { top: 15vh; }
.cjamput-transition-overlay::after { bottom: 12vh; animation-delay: 0.05s; opacity: 0.75; }

.cjamput-transition-logo {
  width: min(42vw, 260px);
  max-height: 52vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.72) rotate(-4deg);
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.45));
}

.cjamput-transition-overlay.is-active { visibility: visible; animation: cjamputOverlay 620ms ease-in-out forwards; }
.cjamput-transition-overlay.is-active::before,
.cjamput-transition-overlay.is-active::after { animation: cjamputSlash 620ms cubic-bezier(.2,.9,.2,1) forwards; }
.cjamput-transition-overlay.is-active .cjamput-transition-logo { animation: cjamputLogoPop 620ms cubic-bezier(.2,.9,.2,1) forwards; }

@keyframes cjamputOverlay { 0% { opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cjamputSlash { 0% { transform: rotate(-14deg) translateX(-120%); } 42% { transform: rotate(-14deg) translateX(0%); } 100% { transform: rotate(-14deg) translateX(120%); } }
@keyframes cjamputLogoPop { 0% { opacity: 0; transform: scale(0.72) rotate(-4deg); } 22% { opacity: 1; transform: scale(1.08) rotate(1deg); } 58% { opacity: 1; transform: scale(1) rotate(0deg); } 100% { opacity: 0; transform: scale(1.18) rotate(3deg); } }

@media (max-width: 640px) { .cjamput-transition-logo { width: min(58vw, 230px); } }