.hero-rotator {
    position: relative;
    overflow: hidden;
    background:#000;
}

.hero-viewport {
    position: relative;
    height: clamp(320px, 55vw, 720px);
}

.hero-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Animation: 1 full cycle = number of slides × delay */
    --cycle: calc(var(--count) * var(--delay));
    animation: heroFade var(--cycle) linear infinite both;
    animation-delay: calc(var(--i) * var(--delay));
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optional soft gradient */
.hero-frame::after {
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 10%, rgba(0,0,0,.35) 90%);
    pointer-events:none;
}

/* Crossfade: each slide is visible for the first 20% of its own phase */
@keyframes heroFade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    20%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Reduce Motion users still see a gentle change, not disabled */
@media (prefers-reduced-motion: reduce) {
    .hero-frame {
        animation-duration: calc(var(--cycle) * 1.5);
    }
}

/* --- Logo Overlay --- */
.logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10; /* ensures it stays above slides */
    pointer-events: none; /* so clicks go through to links if needed */
}

.logo-overlay img {
    max-width: 500px;   /* adjust as needed */
    width: 100%;
    height: auto;
}