.hero-slide,
.hero-text {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none
}

.hero-slide {
    transition: opacity 1s ease-in-out
}

.hero-slide.active {
    opacity: 1
}

.hero-text {
    transform: translateY(12px);
    transition: opacity .6s, transform .6s
}

.hero-text.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
}

.hero-dot {
    width: 32px;
    height: 4px;
    border-radius: 9999px;
    background: #cbd5e1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background .3s;
    border: none;
    padding: 0
}

.hero-dot.active {
    background: #e2e8f0
}

.hero-dot span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ef4444, #f43f5e);
    border-radius: 9999px;
    transform: scaleX(0);
    transform-origin: left;
    transition: none
}

.hero-dot.active span {
    animation: 8s linear forwards heroDotProgress
}

@keyframes heroDotProgress {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.dark .hero-dot {
    background: #334155
}

.dark .hero-dot.active {
    background: #475569
}