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

/* ─── Scroll snap ────────────────────────── */
.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* ─── Hide scrollbar ─────────────────────── */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─── Hero ───────────────────────────────── */
/* The source photo is very tall (1560×3376), so the crop is biased downwards
   via `object-[center_55%]` on the <img> — boat mid-frame, reef at the bottom.

   Brand wash over the sky for headline contrast (dark-blue #06223B into
   light-blue #3670A3), clear water through the middle, then a soft darkening
   again behind the copy and CTAs. */
.hero-gradient {
    background: linear-gradient(to bottom,
            rgba(6, 34, 59, 0.66) 0%,
            rgba(6, 34, 59, 0.42) 18%,
            rgba(54, 112, 163, 0.28) 34%,
            transparent 50%,
            rgba(6, 34, 59, 0.34) 74%,
            rgba(6, 34, 59, 0.62) 100%);
}

/* Legibility wash for the full-bleed photo panels — dark-blue at the top and
   bottom edges, photo untouched through the middle. */
.panel-gradient {
    background: linear-gradient(to bottom,
            rgba(6, 34, 59, 0.62) 0%,
            rgba(6, 34, 59, 0.18) 26%,
            transparent 45%,
            rgba(6, 34, 59, 0.30) 72%,
            rgba(6, 34, 59, 0.66) 100%);
}

/* ─── Slider ─────────────────────────────── */
.slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-out;
}

.slide {
    flex: 0 0 100%;
    height: 100%;
}

.slider-dot {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-dot.is-active {
    background-color: #fff;
}

/* ─── CTA ────────────────────────────────── */
.cta-primary .cta-arrow {
    transition: transform 0.3s ease;
}

.cta-primary:hover .cta-arrow {
    transform: translateX(4px);
}

/* ─── 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;
}

@media (prefers-reduced-motion: reduce) {

    .hero-rise,
    .cta-primary .cta-arrow {
        animation: none;
        transition: none;
    }
}