/*VIDEO*/

.scene2-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/*MASCOT ALL*/


.mascot-card {
    width: 220px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 20px;
    border-radius: 20px;
    /* wichtig für bestehende Animationen */
    position: relative;
}

/* Hover nur visuell, keine Animation zerstören */
.mascot-card:hover {
    transform: translateY(-10px) scale(1.03);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
}

.mascot {
    width: 180px;
    height: auto;
    /* schützt deine bestehenden Animationssysteme */
    will-change: transform;
    transition: transform 0.3s ease;
}




.scene2-title,
.mascots,
.story-overlay {
    position: absolute;
    z-index: 2;
}


.story-img {
  width: 180px;
  margin-bottom: 10px;
}


.story-inner h2 {
    margin-top: 5px;
    font-size: 2.0rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #c0a07d;
}

.story-inner h3 {
    margin-top: -20px;
    margin-bottom: 30px;
    font-size: 1.3rem;
    color: rgb(244,61,62);
    letter-spacing: 4px;
}

.story-inner p {
    max-width: 740px;
    margin-top: -20px;
    font-family: "Caveat", cursive;
    font-size: 1.5rem;
    line-height: 1.3;
    color: #1d313c;
    text-align: center;
}


/* =========================
   STORYBOX ANIMATIONEN
========================= */

.story-float {
    animation: storyFloat 6s ease-in-out infinite;
}

.story-sway {
    animation: storySway 7s ease-in-out infinite;
    transform-origin: center bottom;
}

.story-breathe {
    animation: storyBreathe 5s ease-in-out infinite;
}

/* YAMU */
@keyframes storyFloat {

    0% {
        transform: translateY(0px) rotate(-1deg);
    }

    25% {
        transform: translateY(-4px) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(1deg);
    }

    75% {
        transform: translateY(-4px) rotate(0deg);
    }

    100% {
        transform: translateY(0px) rotate(-1deg);
    }
}

/* MAGURO */
@keyframes storySway {

    0% {
        transform: rotate(-3deg) translateY(0px);
    }

    25% {
        transform: rotate(0deg) translateY(-2px);
    }

    50% {
        transform: rotate(3deg) translateY(0px);
    }

    75% {
        transform: rotate(0deg) translateY(-2px);
    }

    100% {
        transform: rotate(-3deg) translateY(0px);
    }
}

/* YUNA */
@keyframes storyBreathe {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05) translateY(-2px);
    }

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