/* ─── Base ───────────────────────────────── */
html,
body {
    height: 100%;
}

/* ─── Background carousel ────────────────────
   Six panels (five photos + a clone of the first) laid out in a row and
   moved with translate3d, so the pan runs on the compositor rather than
   repainting the photo every frame.

   The 1.2s glide is deliberately slower than a tap-driven slider — this
   scrolls on its own behind the copy and shouldn't pull focus. The JS
   snap-back timeout is 1.3s: keep the two in step if you retime it. */
.hero-track {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    width: 600%;
    /* 6 slides */
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.hero-slide {
    flex: 0 0 16.6667%;
    /* 1 / 6 of the track */
    height: 100%;
}

/* ─── Photo wash ─────────────────────────────
   Brand dark blue over the photograph: dark at the top for the logo and
   headline, clear through the middle so the picture is actually visible,
   dark again at the bottom behind the copy and the two CTAs.

   The end stops use the deeper shade (#062F36) — #0D5F6B alone is too light
   at these alphas to hold white text over a bright sky or sand. */
.hero-wash {
    background: linear-gradient(to bottom,
            rgba(6, 47, 54, 0.74) 0%,
            rgba(6, 47, 54, 0.54) 20%,
            rgba(13, 95, 107, 0.26) 36%,
            transparent 50%,
            rgba(6, 47, 54, 0.32) 64%,
            rgba(6, 47, 54, 0.64) 82%,
            rgba(6, 47, 54, 0.82) 100%);
}

/* ─── Headline lockup ────────────────────────
   The script line hangs off the uppercase line: pulled up so its ascenders
   tuck under the cap-height above, and nudged right so it reads as a second
   voice rather than a second line.

   Caveat carries a lot of empty space inside its em box, so the pull-up is
   larger than a normal leading tweak — retune it if the face ever changes. */
.script-accent {
    display: inline-block;
    margin-top: -0.34em;
    margin-left: 0.1em;
    padding-bottom: 0.06em;
    /* Caveat's descenders overflow the line box. */
}

/* ─── Entrance ───────────────────────────── */
@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-rise {
    animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-rise-delay-1 {
    animation-delay: 0.12s;
}

.hero-rise-delay-2 {
    animation-delay: 0.24s;
}

/* The carousel also stops advancing under this preference — see index.html. */
@media (prefers-reduced-motion: reduce) {

    .hero-rise,
    .hero-track {
        animation: none;
        transition: none;
    }
}