/* Frame 2: 15-years badge slides to bottom right */
@keyframes badge-to-corner {
    from {
        left: 216px;
        top: 90px;
    }
    to {
        left: 216px;
        top: 159px;
    }
}

@keyframes badge-slide-up {
    from {
        left: 216px;
        top: 159px;
    }
    to {
        left: 216px;
        top: 45px;
    }
}

#fifteen-years.frame-2 {
    animation: badge-to-corner 1s forwards;
}

#logo.fade-out {
    opacity: 0;
}

/* Boxing idle - smooth circular bobbing motion */
@keyframes boxing-left {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(8px, -6px) rotate(1.5deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes boxing-right {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-8px, 6px) rotate(-1.5deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Right hand punch */
@keyframes punch {
    0% {
        left: -284px;
        top: -19px;
        transform: rotate(0deg);
    }
    50% {
        left: -73px;
        top: -77px;
        transform: rotate(6deg);
    }
    100% {
        left: -284px;
        top: -19px;
        transform: rotate(0deg);
    }
}

/* Hands hidden by default */
#left-hand,
#right-hand {
    opacity: 0;
}

/* Hands enter from sides */
@keyframes enter-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes enter-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-left {
    0% {
        left: -300px;
    }
    100% {
        left: 69px;
    }
}

@keyframes slide-right {
    0% {
        left: 69px;
    }
    100% {
        left: 300px;
    }
}

@keyframes logo-slide-in-right {
    0% {
        opacity: 1;
        left: 300px;
        top: 35px;
    }
    100% {
        opacity: 1;
        left: 16px;
        top: 35px;
    }
}

@keyframes cta-slide-in-right {
    0% {
        left: 300px;
        top: 139px;
        opacity: 1;
    }
    100% {
        left: 78px;
        top: 139px;
        opacity: 1;
    }
}

@keyframes hand-leave {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes footer-enter {
    0% {
        bottom: -86px;
    }
    100% {
        bottom: 0;
    }
}

#left-hand.enter {
    animation: enter-left 0.5s ease-out forwards;
}

#right-hand.enter {
    animation: enter-right 0.5s ease-out forwards;
}

#left-hand.boxing {
    opacity: 1;
    animation: boxing-left 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

#right-hand.boxing {
    opacity: 1;
    animation: boxing-right 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

#right-hand.punch {
    opacity: 1;
    animation: punch 0.5s ease-out forwards;
}

#right-hand.leave,
#left-hand.leave {
    animation: hand-leave 0.1s ease-out forwards;
}

#text1.slide-in {
    animation: slide-left 0.5s ease-out forwards;
}

#text1.slide-out {
    animation: slide-right 0.5s ease-out forwards;
}

#logo.slide-in-right {
    animation: logo-slide-in-right 0.5s ease-out forwards;
}

#click_overlay.slide-in-right {
    animation: cta-slide-in-right 0.5s ease-out forwards;
}

#fifteen-years.slide-up {
    animation: badge-slide-up 0.5s ease-out forwards;
}

#footer.enter {
    animation: footer-enter 0.5s ease-out forwards;
}