/* Explain: Styles for the dynamic hero section, including slideshow, animations, and interactive elements. */
.hero-slides {
    position: relative;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 900ms ease, transform 1400ms ease;
    will-change: opacity, transform;
}

.hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.15rem;
    border-radius: var(--radius-oval);
    border: 1px solid rgba(220, 199, 161, 0.65);
    background: rgba(220, 199, 161, 0.18);
    color: var(--espresso-color);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.hero-reveal {
    opacity: 0;
    transform: translateY(22px);
    animation: heroRise 900ms cubic-bezier(0.22, 0.68, 0.32, 1) forwards;
}

.hero-reveal:nth-child(1) { animation-delay: 0.10s; }
.hero-reveal:nth-child(2) { animation-delay: 0.22s; }
.hero-reveal:nth-child(3) { animation-delay: 0.34s; }
.hero-reveal:nth-child(4) { animation-delay: 0.46s; }

@keyframes heroRise {
    to { opacity: 1; transform: translateY(0); }
}

.hero-counter {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--text-muted);
    white-space: nowrap;
}

.hero-counter-sep {
    opacity: 0.5;
    margin-inline: 0.12rem;
}

.hero-progress {
    position: relative;
    display: block;
    width: clamp(4rem, 22vw, 9rem);
    height: 2px;
    border-radius: 999px;
    background: rgba(201, 199, 194, 0.5);
    overflow: hidden;
}

.hero-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 999px;
    background: var(--espresso-color);
    transition: width 600ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide.is-active,
    .hero-reveal {
        animation: none !important;
        transition: none !important;
    }

    .hero-reveal {
        opacity: 1;
        transform: none;
    }

    .hero-slide {
        transform: none;
    }
}