.hero-slide-content .hero-animate {
    opacity: 0;
    transform: translateY(56px);
    filter: blur(6px);
    will-change: opacity, transform, filter;
}

.hero-slide-content .hero-animate-buttons {
    filter: none;
    will-change: opacity, transform;
}

.hero-slide-content.is-active .hero-animate {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.hero-slide-content.is-active .hero-animate-eyebrow {
    transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s ease;
    transition-delay: 0.08s;
}

.hero-slide-content.is-active .hero-animate-title {
    transition: opacity 0.8s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1), filter 0.95s ease;
    transition-delay: 0.18s;
}

.hero-slide-content.is-active .hero-animate-buttons {
    filter: none;
    transition: opacity 0.85s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.32s;
}

.hero-slide-content:not(.is-active) .hero-animate-eyebrow,
.hero-slide-content:not(.is-active) .hero-animate-title,
.hero-slide-content:not(.is-active) .hero-animate-buttons {
    transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}

.hero-slider__progress {
    display: grid;
    grid-template-columns: repeat(var(--hero-dots-count, 1), minmax(0, 1fr));
}

.hero-slider__dot {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    cursor: pointer;
}

.hero-slider__dot-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: rgba(255, 255, 255, 0.96);
    will-change: transform;
}

@media (max-width: 767px) {
    .hero-slide-content .hero-animate {
        transform: translateY(42px);
    }
}