.hero-title-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.hero-subtitle-animate {
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity;
}

.hero-image-animate-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

@media (max-width: 600px) {
    .hero-image-animate-wrapper {
        position: relative;
        height: auto;
    }
}

.video-playing .hero-title-animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

.video-playing .hero-subtitle-animate {
    opacity: 1;
    transition-delay: 150ms;
}

.video-playing .hero-image-animate-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
}