.landing-hero {
    --hero-shape-duration: 1.5s;
    --hero-zoom-start: 1.18;
    position: relative;
    width: 100%;
    aspect-ratio: 1511 / 900;
    max-height: 900px;
    overflow: clip;
    background: #214329;
    color: white;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.hero-track {
    position: absolute;
    inset: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1s ease-in-out,
        visibility 0s 1s;
}
.hero-slide.is-active,
.hero-slide.is-outgoing {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.hero-slide.is-active {
    z-index: 2;
}
.hero-slide.is-outgoing {
    z-index: 1;
}
.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hero-caption {
    position: absolute;
}
.hero-caption-biodome,
.hero-caption-insectarium {
    top: 30.65%;
    left: 5.76%;
}
.hero-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--green);
    font-size: clamp(16px, 1.59vw, 30px);
    font-weight: 600;
    line-height: 1.2;
}
.map-pin {
    width: 16px;
    height: 23px;
    margin-left: 2px;
}
.hero-caption h1,
.hero-caption h2 {
    display: flex;
    flex-direction: column;
    font:
        500 clamp(28px, 3.18vw, 61px)/1.25 "Gotham Rounded",
        Figtree,
        sans-serif;
    letter-spacing: -0.02em;
}
.hero-display {
    font:
        500 1.3125em/1 Sloke,
        serif;
    letter-spacing: 0.01em;
    margin-top: 0.6vw;
}
.hero-caption-biodome .hero-display {
    margin-left: 8vw;
}
.hero-caption-biodome h1 > :last-child {
    margin-left: 2.7vw;
}
.hero-caption-insectarium .hero-display {
    font-size: 1.3541667em;
    margin-left: 6.75vw;
}
.hero-caption-insectarium h2 > :last-child {
    margin-left: 11.72vw;
}
.landing-hero.is-dragging {
    cursor: grabbing;
}
.landing-hero:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: -3px;
}
.hero-slide.is-animated .hero-photo {
    animation: hero-zoom 5s linear both;
}
.hero-slide.is-animated .hero-shape path {
    stroke-dasharray: 1;
    animation: hero-shape-draw var(--hero-shape-duration) ease-in-out 1s both;
}
.hero-slide.is-animated .hero-shape-insectarium {
    animation: hero-shape-wipe var(--hero-shape-duration) ease-in-out 1s both;
}
.hero-slide.is-animated .hero-shape-insectarium path {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}
.hero-slide.is-animated .hero-location,
.hero-slide.is-animated .hero-caption :is(h1, h2) > span {
    animation: hero-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-slide.is-animated .hero-caption :is(h1, h2) > span:nth-child(1) {
    animation-delay: 0.2s;
}
.hero-slide.is-animated .hero-caption :is(h1, h2) > span:nth-child(2) {
    animation-delay: 0.35s;
}
.hero-slide.is-animated .hero-caption :is(h1, h2) > span:nth-child(3) {
    animation-delay: 0.5s;
}
.landing-hero.is-paused .hero-slide * {
    animation-play-state: paused;
}
@keyframes hero-zoom {
    from {
        transform: scale(var(--hero-zoom-start));
    }
    to {
        transform: scale(1);
    }
}
@keyframes hero-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes hero-shape-draw {
    from {
        stroke-dashoffset: var(--shape-draw-from, 1);
    }
    to {
        stroke-dashoffset: var(--shape-draw-to, 0);
    }
}
@keyframes hero-shape-wipe {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }
    .hero-slide.is-animated .hero-photo,
    .hero-slide.is-animated .hero-shape,
    .hero-slide.is-animated .hero-shape path,
    .hero-slide.is-animated .hero-location,
    .hero-slide.is-animated .hero-caption :is(h1, h2) > span {
        animation: none;
    }
}
@media (max-width: 767px) {
    .landing-hero {
        --hero-zoom-start: 1.06;
        aspect-ratio: auto;
        height: min(660px, 85svh);
        min-height: 560px;
    }
    .hero-photo-biodome {
        object-position: 70% center;
    }
    .hero-photo-insectarium {
        object-position: 80% center;
    }
    .hero-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent 40%, rgb(0 0 0 / 0.4));
    }
    .hero-shape-biodome .hero-shape-artwork {
        transform: translate(-105px, -860px);
    }
    .hero-caption {
        z-index: 1;
        top: auto;
        bottom: 64px;
        left: 20px;
        right: 16px;
    }
    .hero-caption h1,
    .hero-caption h2 {
        font-size: clamp(28px, 8.25vw, 48px);
    }
    .hero-location {
        font-size: 22px;
    }
    .hero-caption-biodome .hero-display {
        margin-left: 40px;
    }
    .hero-caption-biodome h1 > :last-child {
        margin-left: 10px;
    }
    .hero-caption-insectarium .hero-display {
        margin-left: 70px;
    }
    .hero-caption-insectarium h2 > :last-child {
        margin-left: 90px;
    }
}