@layer transition {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.35s;
        animation-timing-function: steps(4);
    }

    #stage {
        view-transition-name: stage;
    }

    ::view-transition-old(stage) {
        animation: glitch-out 0.35s steps(4) both;
    }

    ::view-transition-new(stage) {
        animation: glitch-in 0.35s steps(4) both;
    }

    @keyframes glitch-out {
        0%   { opacity: 1; transform: translate(0); filter: none; }
        25%  { opacity: 1; transform: translate(-3px, 2px); filter: hue-rotate(90deg) saturate(3); }
        50%  { opacity: 0.7; transform: translate(2px, -1px); filter: hue-rotate(180deg) brightness(1.5); }
        75%  { opacity: 0.3; transform: translate(-1px, 3px) scaleY(0.98); }
        100% { opacity: 0; transform: translate(0) scaleY(0.02); }
    }

    @keyframes glitch-in {
        0%   { opacity: 0; transform: scaleY(0.02); filter: brightness(3); }
        25%  { opacity: 0.3; transform: translate(2px, -2px) scaleY(1); filter: hue-rotate(180deg) saturate(3); }
        50%  { opacity: 0.7; transform: translate(-3px, 1px); filter: hue-rotate(90deg) brightness(1.3); }
        75%  { opacity: 1; transform: translate(1px, -1px); filter: hue-rotate(45deg); }
        100% { opacity: 1; transform: translate(0); filter: none; }
    }
}