.transition-glitch-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #111;
  animation: screen-glitch-shake-custom 1.4s forwards ease-in-out;
}
@keyframes screen-glitch-shake-custom {
  0%, 100% { transform: translate(0) scale(1); opacity: 1; }
  10% { transform: translate(-4px, 4px) skew(-2deg); opacity: 0.9; }
  20% { transform: translate(4px, -4px) skew(3deg); opacity: 0.8; }
  35% { transform: translate(-3px, -2px) skew(-3deg); opacity: 0.95; }
  50% { transform: translate(3px, 3px) skew(2deg); opacity: 0.7; }
  70% { transform: translate(-5px, 2px) skew(-1deg); opacity: 0.9; }
  90% { transform: translate(0) scale(1.05); opacity: 0.4; }
  100% { transform: translate(0) scale(1); opacity: 0; }
}

.transition-flash-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  animation: flash-burn-custom 1.68s forwards cubic-bezier(0.1, 0.8, 0.3, 1);
}
@keyframes flash-burn-custom {
  0% { opacity: 1; background: #fff; }
  30% { opacity: 1; background: #ffaa44; filter: brightness(1.5); }
  100% { opacity: 0; background: transparent; }
}

.transition-swipe-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.8);
  overflow: hidden;
  animation: fade-out-bg-custom 1.96s forwards;
}
.transition-swipe-custom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: #667eea;
  box-shadow: 0 0 15px #764ba2, 0 0 30px #667eea;
  animation: laser-swipe-custom 1.96s forwards linear;
}
@keyframes laser-swipe-custom {
  0% { top: 0%; opacity: 1; }
  90% { top: 100%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes fade-out-bg-custom {
  0% { background: rgba(0,0,0,0.8); }
  90% { background: rgba(0,0,0,0.8); }
  100% { background: transparent; }
}

.transition-zoom-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  animation: zoom-reveal-custom 1.68s forwards cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes zoom-reveal-custom {
  0% { transform: scale(1.5); opacity: 1; background: #000; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; background: transparent; }
}

.transition-chromatic-radial-split-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}
.transition-chromatic-radial-split-custom::before,
.transition-chromatic-radial-split-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  animation-duration: 2.1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.transition-chromatic-radial-split-custom::before {
  animation-name: radial-split-red-custom;
}
.transition-chromatic-radial-split-custom::after {
  animation-name: radial-split-cyan-custom;
}
@keyframes radial-split-red-custom {
  0% { transform: scale(1); clip-path: circle(0% at 50% 50%); opacity: 1; }
  40% { transform: scale(1.05) translate(-6px, -4px); clip-path: circle(50% at 50% 50%); opacity: 1; }
  100% { transform: scale(1.2) translate(-15px, -10px); clip-path: circle(120% at 50% 50%); opacity: 0; }
}
@keyframes radial-split-cyan-custom {
  0% { transform: scale(1); clip-path: circle(0% at 50% 50%); opacity: 1; }
  40% { transform: scale(1.03) translate(6px, 4px); clip-path: circle(50% at 50% 50%); opacity: 1; }
  100% { transform: scale(1.15) translate(15px, 10px); clip-path: circle(120% at 50% 50%); opacity: 0; }
}

.transition-cube-3d-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  transform-origin: right center;
  animation: cube-flip-custom 2.1s forwards cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@keyframes cube-flip-custom {
  0% { transform: perspective(1000px) rotateY(0deg) translateZ(0); opacity: 1; }
  100% { transform: perspective(1000px) rotateY(-90deg) translateZ(-200px); opacity: 0; }
}

.transition-card-flip-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  animation: card-flip-anim-custom 1.68s forwards ease-in-out;
}
@keyframes card-flip-anim-custom {
  0% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
  50% { transform: perspective(1000px) rotateY(90deg); opacity: 0.5; }
  100% { transform: perspective(1000px) rotateY(180deg); opacity: 0; }
}

.transition-door-3d-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: transparent;
  pointer-events: none;
}
.transition-door-3d-custom::before,
.transition-door-3d-custom::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: 200% 100%;
  animation-duration: 2.1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.transition-door-3d-custom::before {
  left: 0;
  background-position: left center;
  transform-origin: left center;
  animation-name: door-open-left-custom;
}
.transition-door-3d-custom::after {
  right: 0;
  background-position: right center;
  transform-origin: right center;
  animation-name: door-open-right-custom;
}
@keyframes door-open-left-custom {
  0% { transform: perspective(1000px) rotateY(0deg); }
  100% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; }
}
@keyframes door-open-right-custom {
  0% { transform: perspective(1000px) rotateY(0deg); }
  100% { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
}

.transition-fly-3d-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: fly-spin-custom 1.96s forwards cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes fly-spin-custom {
  0% { transform: perspective(1000px) scale(1) rotate(0deg) translateZ(0); opacity: 1; filter: blur(0); }
  30% { transform: perspective(1000px) scale(0.85) rotate(-5deg) translateZ(-50px); opacity: 0.9; filter: blur(2px); }
  100% { transform: perspective(1000px) scale(0.1) rotate(180deg) translateZ(-800px); opacity: 0; filter: blur(8px); }
}

.transition-liquid-distort-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: liquid-warp-custom 2.1s forwards ease-in-out;
}
@keyframes liquid-warp-custom {
  0% { transform: scale(1); border-radius: 0%; opacity: 1; }
  35% { transform: scale(1.1) skewX(8deg) skewY(-4deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; opacity: 0.9; }
  70% { transform: scale(1.25) skewX(-6deg) skewY(6deg); border-radius: 70% 30% 30% 70% / 50% 60% 40% 50%; opacity: 0.6; }
  100% { transform: scale(1.4) skewX(0) skewY(0); border-radius: 50%; opacity: 0; }
}

.transition-tv-static-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: tv-shutdown-custom 1.68s forwards ease-in-out;
}
.transition-tv-static-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, transparent 1px, transparent 2px);
}
@keyframes tv-shutdown-custom {
  0% { transform: scaleY(1) scaleX(1); filter: brightness(1); opacity: 1; }
  50% { transform: scaleY(0.015) scaleX(1); background-color: #fff; filter: brightness(2.5); opacity: 1; }
  80% { transform: scaleY(0.015) scaleX(0.015); background-color: #fff; filter: brightness(5); opacity: 1; }
  100% { transform: scaleY(0) scaleX(0); opacity: 0; }
}

.transition-mosaic-wipe-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: mosaic-reveal-anim-custom 1.96s forwards cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes mosaic-reveal-anim-custom {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
  35% { clip-path: polygon(15% 15%, 85% 5%, 95% 85%, 5% 95%); filter: brightness(1.3); opacity: 0.9; }
  70% { clip-path: polygon(35% 35%, 65% 25%, 75% 75%, 25% 75%); filter: brightness(1.6); opacity: 0.6; }
  100% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); opacity: 0; }
}

.transition-page-curl-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  transform-origin: left center;
  animation: page-curl-anim-custom 2.1s forwards cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes page-curl-anim-custom {
  0% { transform: perspective(1200px) rotateY(0deg) skewY(0deg); opacity: 1; }
  100% { transform: perspective(1200px) rotateY(-110deg) skewY(-10deg) translateX(-100px); opacity: 0; }
}

.transition-star-wipe-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: star-wipe-anim-custom 1.82s forwards ease-in-out;
}
@keyframes star-wipe-anim-custom {
  0% { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 1; transform: scale(5); }
  100% { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0; transform: scale(0); }
}

.transition-diamond-wipe-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: diamond-wipe-anim-custom 1.68s forwards ease-in-out;
}
@keyframes diamond-wipe-anim-custom {
  0% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: 1; transform: scale(3); }
  100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: 0; transform: scale(0); }
}

.transition-cinematic-zoom-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: cinematic-zoom-anim 2.1s forwards cubic-bezier(0.7, 0, 0.24, 1);
}
@keyframes cinematic-zoom-anim {
  0% { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; }
  50% { transform: scale(1.4); filter: blur(12px) brightness(1.5); opacity: 0.8; }
  100% { transform: scale(2.2); filter: blur(30px) brightness(3); opacity: 0; }
}

.transition-cross-warp-morph-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: cross-warp-anim 2.1s forwards ease-in-out;
}
@keyframes cross-warp-anim {
  0% { transform: scale(1) skew(0deg, 0deg); opacity: 1; filter: contrast(1); }
  40% { transform: scale(1.15) skew(15deg, -8deg) rotate(3deg); opacity: 0.8; filter: contrast(2) hue-rotate(90deg); }
  70% { transform: scale(1.3) skew(-12deg, 10deg) rotate(-4deg); opacity: 0.4; filter: contrast(3) hue-rotate(180deg); }
  100% { transform: scale(1.5) skew(0deg, 0deg) rotate(0deg); opacity: 0; filter: contrast(1) hue-rotate(360deg); }
}

.transition-domain-warp-dissolve-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: domain-warp-anim 2.1s forwards cubic-bezier(0.55, 0, 0.1, 1);
}
@keyframes domain-warp-anim {
  0% { clip-path: circle(100% at 50% 50%); filter: saturate(1); opacity: 1; }
  40% { clip-path: polygon(0 0, 100% 10%, 85% 100%, 15% 90%); filter: saturate(2) invert(0.2); opacity: 0.9; }
  75% { clip-path: polygon(20% 20%, 80% 15%, 70% 80%, 30% 85%); filter: saturate(4) invert(0.6); opacity: 0.5; }
  100% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); opacity: 0; }
}

.transition-flash-through-white-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  animation: flash-white-anim 1.68s forwards cubic-bezier(0.1, 0.9, 0.2, 1);
}
@keyframes flash-white-anim {
  0% { opacity: 0; }
  35% { opacity: 1; background: #ffffff; filter: brightness(2); }
  70% { opacity: 0.9; background: #ffffff; }
  100% { opacity: 0; }
}

.transition-gravitational-lens-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  border-radius: 0%;
  animation: gravity-lens-anim 2.1s forwards cubic-bezier(0.6, 0, 0.07, 1);
}
@keyframes gravity-lens-anim {
  0% { transform: scale(1) rotate(0deg); border-radius: 0%; opacity: 1; filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(0.6) rotate(180deg); border-radius: 50%; opacity: 0.9; filter: drop-shadow(0 0 40px #764ba2); }
  100% { transform: scale(0) rotate(360deg); border-radius: 50%; opacity: 0; filter: drop-shadow(0 0 100px #000); }
}

.transition-light-leak-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: light-leak-fade 1.96s forwards;
}
.transition-light-leak-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 160, 50, 0.95), rgba(255, 50, 120, 0.8) 40%, rgba(120, 0, 255, 0) 70%);
  mix-blend-mode: screen;
  animation: light-leak-sweep 1.96s forwards ease-in-out;
}
@keyframes light-leak-sweep {
  0% { opacity: 0; transform: scale(0.8) translate(-20%, -20%); }
  50% { opacity: 1; transform: scale(1.4) translate(10%, 10%); }
  100% { opacity: 0; transform: scale(2) translate(30%, 30%); }
}
@keyframes light-leak-fade {
  0% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; }
}

.transition-ridged-burn-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: ridged-burn-anim 2.1s forwards cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ridged-burn-anim {
  0% { filter: brightness(1) contrast(1) sepia(0); opacity: 1; }
  40% { filter: brightness(2) contrast(3) sepia(1) hue-rotate(-50deg); opacity: 0.9; transform: scale(1.05); }
  80% { filter: brightness(4) contrast(5) sepia(1) hue-rotate(40deg); opacity: 0.4; transform: scale(1.15); }
  100% { filter: brightness(10) contrast(10) sepia(1); opacity: 0; transform: scale(1.3); }
}

.transition-ripple-waves-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: ripple-wave-anim 2.1s forwards ease-out;
}
@keyframes ripple-wave-anim {
  0% { transform: scale(1); clip-path: circle(100% at 50% 50%); opacity: 1; }
  30% { transform: scale(1.04); clip-path: circle(75% at 50% 50%); filter: contrast(1.3); }
  60% { transform: scale(1.08); clip-path: circle(45% at 50% 50%); filter: contrast(1.6); }
  100% { transform: scale(1.15); clip-path: circle(0% at 50% 50%); opacity: 0; }
}

.transition-sdf-iris-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: sdf-iris-anim 1.96s forwards cubic-bezier(0.77, 0, 0.175, 1);
}
@keyframes sdf-iris-anim {
  0% { clip-path: circle(150% at 50% 50%); opacity: 1; }
  100% { clip-path: circle(0% at 50% 50%); opacity: 0; }
}

.transition-swirl-vortex-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: swirl-vortex-anim 2.1s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
@keyframes swirl-vortex-anim {
  0% { transform: rotate(0deg) scale(1); opacity: 1; filter: blur(0); }
  50% { transform: rotate(180deg) scale(0.6); opacity: 0.8; filter: blur(3px); }
  100% { transform: rotate(720deg) scale(0); opacity: 0; filter: blur(15px); }
}

.transition-thermal-distortion-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: thermal-anim 2.1s forwards ease-in-out;
}
@keyframes thermal-anim {
  0% { filter: invert(0) hue-rotate(0deg) saturate(1); opacity: 1; }
  50% { filter: invert(1) hue-rotate(180deg) saturate(5) contrast(2); opacity: 0.8; transform: scale(1.05); }
  100% { filter: invert(0) hue-rotate(360deg) saturate(10) brightness(3); opacity: 0; transform: scale(1.15); }
}

.transition-whip-pan-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: whip-pan-anim 1.68s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
@keyframes whip-pan-anim {
  0% { transform: translateX(0) skewX(0deg); filter: blur(0); opacity: 1; }
  50% { transform: translateX(-50%) skewX(-30deg); filter: blur(15px); opacity: 0.8; }
  100% { transform: translateX(-100%) skewX(-60deg); filter: blur(30px); opacity: 0; }
}

.transition-blur-transition-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: gaussian-blur-anim 1.96s forwards ease-in-out;
}
@keyframes gaussian-blur-anim {
  0% { filter: blur(0px) brightness(1); opacity: 1; }
  60% { filter: blur(20px) brightness(1.3); opacity: 0.9; }
  100% { filter: blur(40px) brightness(2); opacity: 0; }
}

.transition-cover-transition-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: cover-slide-anim 1.96s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
@keyframes cover-slide-anim {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

.transition-destruction-transition-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: shatter-explode-anim 1.96s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
@keyframes shatter-explode-anim {
  0% { transform: scale(1) rotate(0deg); filter: contrast(1); opacity: 1; }
  40% { transform: scale(1.1) rotate(5deg); clip-path: polygon(0 0, 100% 0, 80% 100%, 0 80%); filter: contrast(2) brightness(1.5); }
  100% { transform: scale(0.2) rotate(-35deg) translateY(200px); clip-path: polygon(20% 20%, 80% 0, 100% 80%, 0 100%); filter: contrast(5) brightness(3); opacity: 0; }
}

.transition-mechanical-transitions-custom {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-image: var(--transition-before-img, url('/img/placeholder_before.jpg'));
  background-size: cover;
  background-position: center;
  animation: mechanical-iris-anim 2.1s forwards cubic-bezier(0.87, 0, 0.13, 1);
}
@keyframes mechanical-iris-anim {
  0% { clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(90deg) scale(0.8); }
  100% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); transform: rotate(180deg) scale(0.2); opacity: 0; }
}