@keyframes theme-cycle {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 1;
    }

    45% {
        transform: translate(20px, 20px) rotate(45deg);
        opacity: 0;
    }

    55% {
        transform: translate(-20px, 10px) rotate(-45deg);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) rotate(0);
        opacity: 1;
    }
}

.theme-anim {
    animation: theme-cycle 0.5s ease-in-out;
}

/* 語言切換動畫 */
/* 上翻 (預設) */
.lang-anim-out-up {
    animation: langOutUp 0.2s ease-in forwards;
}

.lang-anim-in-up {
    animation: langInUp 0.3s ease-out forwards;
}

@keyframes langOutUp {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes langInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 下翻 (中文切英文/日文用) */
.lang-anim-out-down {
    animation: langOutDown 0.2s ease-in forwards;
}

.lang-anim-in-down {
    animation: langInDown 0.3s ease-out forwards;
}

@keyframes langOutDown {
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes langInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}