.story-finale {
    position: relative;
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
    font-size: 1.3rem;
    color: #f3eacb;
    background: radial-gradient(ellipse at center, #3b2a1a 0%, #1a120b 80%);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
    animation: fadeInScroll 2s ease-out;
    font-family: "Cinzel Decorative", "Georgia", serif;
}

.story-finale::before {
    display: block;
    font-size: 1rem;
    color: #d4af37;
    opacity: 0.8;
    margin-bottom: 0.5rem;
    animation: rollText 1.8s ease-in;
}

.story-finale strong {
    display: block;
    font-size: 1.8rem;
    color: #ffd86b;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
    animation: glowText 2.2s ease-in-out 1.8s forwards;
    opacity: 0;
}

.story-finale em {
    display: inline-block;
    font-style: normal;
    color: #fff6d5;
    opacity: 0;
    animation: fadeUp 1.6s ease-out 3.4s forwards;
}

/* --- Animations --- */

@keyframes fadeInScroll {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes rollText {
    0% {
        opacity: 0;
        transform: translateX(-15px);
    }

    50% {
        opacity: 0.6;
        transform: translateX(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glowText {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    60% {
        opacity: 1;
        transform: scale(1.1);
        text-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

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

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