/* HEADER ANIMATIONS */
/* "Eats" the currently-selected tab */
.mm-selector {
    animation: eat 0.25s, shrink-down 0.25s ease 0.25s;
}
.mm-text {
    animation: centered-position 0.25s, slide-down 0.25s ease 0.25s;
}

/* When hovering over a different tab, creature bounces at the bottom */
.mm-hover .mm-selector-hidden {
    visibility: hidden;
}
.mm-hover:hover .mm-selector-hidden {
    visibility: visible;
    animation: bounce 1s forwards;
}

/* When hovering over a different tab, hide the creature "eating" the current tab */
.mm-selected:has(~ .mm-hover:hover) .mm-selector {
    visibility: hidden;
    animation-name: none;
}
.mm-selected:has(~ .mm-hover:hover) .mm-text {
    translate: 0 -20px;
    animation-name: none;
}
.mm-hover:hover ~ .mm-selected .mm-selector {
    visibility: hidden;
    animation-name: none;
}
.mm-hover:hover ~ .mm-selected .mm-text {
    translate: 0 -20px;
    animation-name: none;
}

/* Keyframes for header animations */
@keyframes bounce {
    0% {
      transform: translateY(100px);
      animation-timing-function: ease-out;
    }
    50%, 85% {
        transform: translateY(40px) scaleY(0.9);
        animation-timing-function: ease-in;
    }
    70% {
        transform: translateY(30px) scaleY(1.1);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translateY(50px) scaleY(0.9);
    }
}

@keyframes eat {
    0% {
        transform: scale(10) translateY(-20px) scaleY(1.5);
    }
    100% {
        transform: translateY(-20px) scaleY(1.5);
    }
}

@keyframes shrink-down {
    from {
        transform: translateY(-20px) scaleY(1.5);
    }
    to {
        transform: 0 0;
    }
}

@keyframes centered-position {
    from {
        translate: 0 -20px;
    }
    to {
        translate: 0 -20px;
    }
}

@keyframes slide-down {
    from {
        translate: 0 -20px;
    }
    to {
        translate: 0 0;
    }
}

/* LANDING PAGE ANIMATIONS */
/* fang pops out when hovering over the room code */
#roomId:placeholder-shown ~ #fang, #fang-darker {
    top: -100%;
}
#roomId:hover ~ #fang {
    transition: top 0.25s ease-in-out;
    top: 0;
}
/* swap to darker fang when typing to match the change in input box color */
#roomId:focus ~ #fang-darker {
    top: 0;
}

/* Eat the room code */
.fang-animation {
    top: 0;
    transform-origin: top;
    animation: fang-eat 0.5s forwards;
}
.mouth-animation {
    transform-origin: bottom;
    animation: mouth-close 0.5s forwards;
}

/* Keyframes for eating room code */
@keyframes fang-eat {
    0% {
        top: 0;
    }
    70% {
        top: 0;
        translate: 0 45px;
        transform: scaleY(0.5);
    }
    100% {
        top: 0;
    }
}
@keyframes mouth-close {
    70% {
        transform: scaleY(0.01);
    }
}

/* OTHER ANIMATIONS -- TODO */

/* FOOTER */
/* for the "text box" */
.triangle {
    translate: 0 6px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 8px 35px 8px;
    border-color: transparent transparent #E5D0CC transparent;
    transform: rotate(250deg);
 }