/* ===========================================================================
   HERO — FULL-BLEED VIDEO
   =========================================================================== */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    background: var(--navy-d);
    color: var(--white);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Media
   --------------------------------------------------------------------------- */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Stands in before the video paints, and behind it if it never loads */
    background: linear-gradient(165deg, var(--blue-d) 0%, var(--navy) 48%, var(--navy-d) 100%);
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Natural ocean colour — only the lightest lift, no blue grade */
    filter: saturate(1.04) contrast(1.02);
}

/* Legibility scrim only: a soft darkening at the foot of the frame so the
   headline and booking card hold up. The ocean keeps its own colour above. */
.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(5, 38, 61, 0.88) 0%,
        rgba(5, 38, 61, 0.45) 28%,
        rgba(5, 38, 61, 0.06) 58%,
        rgba(5, 38, 61, 0) 78%);
}

/* ---------------------------------------------------------------------------
   Content
   --------------------------------------------------------------------------- */
.hero__inner { position: relative; z-index: 4; width: 100%; }

/* Everything rises in on load */
.hero__title,
.hero__lead,
.book-trigger,
.hero__trust {
    opacity: 0;
    animation: hero-rise 1s var(--ease) forwards;
}

.hero__title   { animation-delay: 0.20s; }
.hero__lead    { animation-delay: 0.34s; }
.book-trigger  { animation-delay: 0.48s; }
.hero__trust   { animation-delay: 0.62s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

/* Title — stacked hierarchy from the brief. WHALES. is the 100% line in bold;
   the two lines under it sit at ~76% in medium-bold, and the seals line takes
   a subtle tonal shift. Sized in em off one base so the ratio always holds. */
.hero__title {
    --hero-base: clamp(3rem, 1.2rem + 7.2vw, 7rem);
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: var(--hero-base);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 4px 40px rgba(5, 38, 61, 0.5);
}

.hero__title-line { display: block; }

.hero__title-line--lead { font-weight: 800; }

.hero__title-line--sub {
    font-size: 0.76em;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 0.06em;
}

.hero__title-line--tone { color: var(--turq-l); }

/* Lines rise in one after another once fonts are ready (main.js adds
   .is-revealed), each unmasking from below its own baseline. */
.js .hero__title-line {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.35em);
    transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .hero__title.is-revealed .hero__title-line { clip-path: inset(-0.2em -0.2em -0.3em -0.2em); transform: none; }
.js .hero__title.is-revealed .hero__title-line:nth-child(2) { transition-delay: 0.14s; }
.js .hero__title.is-revealed .hero__title-line:nth-child(3) { transition-delay: 0.28s; }

.hero__lead {
    max-width: 42ch;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 20px rgba(5, 38, 61, 0.6);
}

/* ---------------------------------------------------------------------------
   Booking trigger — opens the popup, keeps the video clear
   --------------------------------------------------------------------------- */
.book-trigger {
    padding: 1.125rem 2rem;
    font-size: 1.0625rem;
    box-shadow: 0 18px 46px rgba(5, 38, 61, 0.4);
}

/* ---------------------------------------------------------------------------
   Trust badges
   --------------------------------------------------------------------------- */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.5rem;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.trust {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 2px 14px rgba(5, 38, 61, 0.6);
}

.trust svg { width: 20px; height: 20px; color: var(--turq); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Scroll indicator — a small label over a hairline. A light travels down the
   line on a loop, and the line itself fills as the visitor scrolls (--p is
   set from hero-video.js), so it reads as part of the film, not a UI arrow.
   --------------------------------------------------------------------------- */
.scroll-cue {
    --p: 0;
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 4vw, 2.75rem);
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    opacity: calc(1 - var(--p) * 1.6);
    transition: color 0.3s var(--ease);
}

.scroll-cue:hover { color: var(--turq); }

.scroll-cue__label {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding-left: 0.32em; /* optically centre the tracked word */
}

.scroll-cue__track {
    position: relative;
    width: 1px;
    height: 64px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
}

/* Scroll-linked fill */
.scroll-cue__track::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    transform-origin: top;
    transform: scaleY(var(--p));
}

.scroll-cue__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 22px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--turq));
    animation: cue-travel 2.2s var(--ease-io) infinite;
}

@keyframes cue-travel {
    0%   { transform: translateY(-22px); }
    100% { transform: translateY(64px); }
}

/* Wherever the cue shows (responsive.css hides it on small / short screens),
   the hero reserves its full height at the foot, so the trust badges and
   "5-Star Reviews" can never run into it at any width. 92px = label + gap +
   track. */
@media (min-width: 760px) and (min-height: 721px) {
    .hero { padding-bottom: calc(clamp(1.5rem, 4vw, 2.75rem) + 92px + 1.75rem); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__title, .hero__lead, .book-trigger, .hero__trust { opacity: 1; animation: none; }
    .js .hero__title-line { clip-path: none; transform: none; }
    .scroll-cue__dot { animation: none; }
}