/* ============================================================================
   TRANSITION - Der Zerfall
   ============================================================================ */

@keyframes zerfall {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    30% {
        transform: translateY(-20px) scale(1.02);
    }
    60% {
        opacity: 0.7;
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
        filter: blur(10px);
    }
}

@keyframes buchstaben-zerfall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-50px) rotate(10deg);
        opacity: 0.5;
    }
    100% {
        transform: translateY(200px) rotate(45deg);
        opacity: 0;
    }
}

/* Wenn Zerfall aktiviert */
body.zerfall {
    background: linear-gradient(to bottom, var(--papyrus), #000);
    transition: background 2s ease;
}

body.zerfall .container {
    animation: zerfall 2s ease-out forwards;
}

body.zerfall h1,
body.zerfall .werk-titel,
body.zerfall .werk-item {
    animation: buchstaben-zerfall 1.5s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

/* Pferd bei Zerfall */
body.zerfall .pferd {
    animation: pferd-flucht 2s ease-out forwards;
}

@keyframes pferd-flucht {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.5) rotate(-15deg) translateY(-30px);
    }
    100% {
        transform: scale(0) rotate(-90deg) translateY(-100px);
        opacity: 0;
    }
}