/* ==========================================================================
   Shared scenes and the site-wide type system
   The homepage was redesigned first; these are its pieces made available to
   every page, so the whole site speaks with one voice:
     - one label style, one headline colour and size;
     - the drawn map (MapScene.razor): glows, contour rings, a road with a
       light driving it;
     - the page hero (PageHero.razor): the map on teal, with the page title;
     - the closing section (ClosingCta.razor): a desert evening with the trip
       form, the same ending as the homepage.
   Global rather than scoped so a page, a shared component and the homepage
   can all use the same markup.
   ========================================================================== */

:root {
    --page-y: clamp(64px, 7vw, 104px);
    --page-h2: clamp(2rem, 1.9vw + 1.35rem, 3.25rem);
    --page-label-dark: #E3B98A;
}

/* ---------- One label, everywhere ---------- */
.label.waypoint {
    display: flex;
    width: fit-content;
    margin: 0 0 14px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-terracotta);
}

.on-dark .label.waypoint,
.map-band .label.waypoint,
.page-hero .label.waypoint,
.closing-cta .label.waypoint {
    color: var(--page-label-dark);
}

/* ---------- One headline ---------- */
h1,
h2 {
    color: var(--color-teal);
    text-wrap: balance;
}

.section-heading h2 {
    margin: 0;
    font-size: var(--page-h2);
    line-height: 1.06;
    letter-spacing: -0.015em;
}

.section-heading p {
    margin-top: 14px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.section-heading {
    margin-bottom: clamp(28px, 3.2vw, 48px);
}

/* ---------- WhatsApp buttons: the real WhatsApp green and logo ----------
   Every button that opens WhatsApp looks like WhatsApp, on any background,
   so it reads at a glance. The logo is drawn by the stylesheet (::after,
   moved in front of the label), so no button needs its own icon markup;
   ::before is already taken by the light sweep in motion.css. */
.btn--whatsapp {
    gap: 10px;
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(37, 211, 102, 0.75);
}

    .btn--whatsapp:hover {
        background: #1EBE5A;
        border-color: #1EBE5A;
        color: #fff;
    }

    .btn--whatsapp::after,
    .wa-logo {
        content: "";
        order: -1;
        flex-shrink: 0;
        width: 1.25em;
        height: 1.25em;
        background: currentColor;
        -webkit-mask: var(--wa-logo) center / contain no-repeat;
        mask: var(--wa-logo) center / contain no-repeat;
    }

.wa-logo {
    display: inline-block;
}

:root {
    --wa-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.02 3C9.4 3 4 8.4 4 15.02c0 2.35.64 4.55 1.76 6.44L3 29l7.72-2.66a12.9 12.9 0 0 0 5.3 1.13h.01c6.62 0 12.02-5.4 12.02-12.02C28.05 8.4 22.65 3 16.02 3zm0 21.94h-.01a9.9 9.9 0 0 1-5.05-1.38l-.36-.21-4.58 1.58 1.53-4.46-.24-.37a9.9 9.9 0 0 1-1.52-5.28c0-5.47 4.46-9.92 9.94-9.92 2.65 0 5.14 1.04 7.01 2.91a9.83 9.83 0 0 1 2.9 7.01c0 5.47-4.46 9.92-9.62 9.92zm5.44-7.43c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.24-.46-2.37-1.46-.88-.78-1.47-1.75-1.64-2.05-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37s-1.04 1.02-1.04 2.48 1.06 2.87 1.21 3.07c.15.2 2.09 3.19 5.06 4.47.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35z'/%3E%3C/svg%3E");
}

/* ---------- A light button for teal grounds (not WhatsApp) ---------- */
.btn--light {
    background: var(--color-off-white);
    color: var(--color-teal);
}

    .btn--light:hover {
        background: #fff;
        color: var(--color-teal);
    }

/* ==========================================================================
   The drawn map (MapScene.razor)
   ========================================================================== */
.map-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.map-scene__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    aspect-ratio: 1;
}

.map-scene__glow--warm {
    top: -22%;
    right: -12%;
    width: 60vw;
    max-width: 880px;
    background: radial-gradient(circle, rgba(209, 129, 96, 0.32) 0%, rgba(209, 129, 96, 0.1) 40%, transparent 68%);
    animation: map-drift 22s ease-in-out infinite alternate;
}

.map-scene__glow--cool {
    bottom: -30%;
    left: -15%;
    width: 55vw;
    max-width: 800px;
    background: radial-gradient(circle, rgba(126, 196, 196, 0.2) 0%, rgba(126, 196, 196, 0.06) 42%, transparent 68%);
    animation: map-drift 26s ease-in-out infinite alternate-reverse;
}

.map-scene--flip .map-scene__glow--warm {
    top: auto;
    right: auto;
    bottom: -30%;
    left: -14%;
}

.map-scene--flip .map-scene__glow--cool {
    bottom: auto;
    left: auto;
    top: -22%;
    right: -10%;
}

@keyframes map-drift {
    from { translate: 0 0; }
    to { translate: -6% 5%; }
}

.map-scene__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-scene__rings ellipse {
    fill: none;
    stroke: rgba(244, 241, 234, 0.075);
    stroke-width: 1;
}

.map-scene__rings--a {
    transform-origin: 1180px 170px;
    animation: map-turn 160s linear infinite;
}

.map-scene__rings--b {
    transform-origin: 140px 900px;
    animation: map-turn 200s linear infinite reverse;
}

@keyframes map-turn {
    to { rotate: 360deg; }
}

.map-scene__road {
    fill: none;
    stroke: rgba(227, 185, 138, 0.42);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 12;
    animation: map-road 2.4s linear infinite;
}

@keyframes map-road {
    to { stroke-dashoffset: -15; }
}

.map-scene__stop {
    fill: #E3B98A;
    transform-box: fill-box;
    transform-origin: center;
    animation: map-pulse 3.6s ease-in-out infinite;
}

@keyframes map-pulse {
    0%, 100% { opacity: 0.55; scale: 1; }
    50% { opacity: 1; scale: 1.5; }
}

.map-scene__traveller {
    fill: #F6D3A2;
    filter: drop-shadow(0 0 6px rgba(246, 211, 162, 0.95)) drop-shadow(0 0 16px rgba(246, 211, 162, 0.6));
}

/* The Yaz, big and see-through, at the heart of the first rings. */
.map-scene__yaz path {
    fill: none;
    stroke: #BF9765;
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.3;
    filter: drop-shadow(0 0 3px rgba(242, 201, 143, 0.45));
}

.map-scene__yaz {
    animation: map-yaz 9s ease-in-out infinite;
}

@keyframes map-yaz {
    0%, 100% { opacity: 0.85; translate: 0 0; }
    50% { opacity: 1; translate: 0 -8px; }
}

/* A band that carries the map: the same teal as the homepage's map sections. */
.map-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 36%, #10454B 72%, #0B3237 100%);
    color: var(--color-off-white);
}

    .map-band > .container {
        position: relative;
        z-index: 1;
    }

    .map-band h2,
    .map-band h3 {
        color: var(--color-off-white);
    }

@media (prefers-reduced-motion: reduce) {
    .map-scene__glow,
    .map-scene__rings--a,
    .map-scene__rings--b,
    .map-scene__road,
    .map-scene__stop,
    .map-scene__yaz {
        animation: none;
    }

    .map-scene__traveller {
        display: none;
    }
}

@media (max-width: 700px) {
    .map-scene__road,
    .map-scene__stop,
    .map-scene__traveller {
        opacity: 0.6;
    }

    .map-scene__yaz path {
        opacity: 0.16;
    }
}

/* ==========================================================================
   Page hero (PageHero.razor)
   ========================================================================== */
.page-hero {
    padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 6vw, 88px);
}

.page-hero__inner {
    max-width: var(--content-max);
}

.page-hero__title {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.4rem, 3.4vw + 1rem, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--color-off-white);
}

.page-hero__lede {
    max-width: 56ch;
    margin: 20px 0 0;
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
    line-height: 1.6;
    color: rgba(244, 241, 234, 0.84);
}

.page-hero__extra {
    margin-top: 28px;
}

    .page-hero__extra .btn--outline {
        border-color: rgba(244, 241, 234, 0.6);
        color: var(--color-off-white);
    }

        .page-hero__extra .btn--outline:hover {
            background: var(--color-off-white);
            color: var(--color-teal);
        }

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* The hero's entrance: label, title and lede rising in turn. */
html.mbs-motion .page-hero__inner > * {
    animation: page-hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    html.mbs-motion .page-hero__inner > *:nth-child(2) { animation-delay: 0.08s; }
    html.mbs-motion .page-hero__inner > *:nth-child(3) { animation-delay: 0.16s; }
    html.mbs-motion .page-hero__inner > *:nth-child(4) { animation-delay: 0.24s; }

@keyframes page-hero-rise {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.mbs-motion .page-hero__inner > * {
        animation: none;
    }
}

/* ==========================================================================
   Closing section (ClosingCta.razor): a desert evening with the trip form
   ========================================================================== */
.closing-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: var(--page-y) 0 calc(var(--space-6) + 70px);
    background: linear-gradient(180deg, #155259 0%, #2f625e 30%, #9a6a52 68%, #C98B5E 100%);
    color: var(--color-off-white);
    text-align: center;
}

.closing-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
}

    .closing-cta__inner .label.waypoint {
        margin-inline: auto;
    }

.closing-cta__title {
    margin: 0;
    font-size: var(--page-h2);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--color-off-white);
}

.closing-cta__lede {
    max-width: 56ch;
    margin: 14px auto var(--space-5);
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(244, 241, 234, 0.9);
}

.closing-cta__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.closing-cta__sun {
    position: absolute;
    left: 76%;
    bottom: 34px;
    width: 170px;
    height: 170px;
    margin-left: -85px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #FFE8C2 0%, #F6C47E 45%, #E59A5B 100%);
    box-shadow: 0 0 60px 20px rgba(246, 196, 126, 0.35), 0 0 140px 60px rgba(229, 154, 91, 0.2);
    transform: translateY(120px);
    opacity: 0.6;
    transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 2s ease 0.2s;
}

.closing-cta:has(.closing-cta__inner.is-visible) .closing-cta__sun,
html:not(.mbs-motion) .closing-cta__sun {
    transform: translateY(0);
    opacity: 1;
}

.closing-cta__ridge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110px;
}

.closing-cta__ridge--far {
    fill: #7a4f3f;
    opacity: 0.55;
}

.closing-cta__ridge--near {
    fill: #1a2527;
    height: 80px;
}

@media (max-width: 700px) {
    .closing-cta__sun {
        left: 80%;
        width: 120px;
        height: 120px;
        margin-left: -60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .closing-cta__sun {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

/* A page that ends on the evening: the footer closes up under the ridges, the
   same seam the homepage uses. */
main:has(> .closing-cta:last-child) + .site-footer {
    margin-top: 0;
}

    main:has(> .closing-cta:last-child) + .site-footer .mbs-dunes,
    main:has(> .closing-cta:last-child) + .site-footer .site-footer__rule {
        display: none;
    }

/* ---------- Inner-page rhythm ---------- */
.page-section {
    padding: var(--page-y) 0;
}

.page-section--sand {
    background: linear-gradient(to bottom, var(--color-off-white) 0, #EFEAE0 16%, #EFEAE0 84%, var(--color-off-white) 100%);
}

/* A hero with a card pulled up over its foot (the routes filters). */
.page-hero--overlap {
    padding-bottom: calc(clamp(56px, 6vw, 88px) + 48px);
}

/* Hero bands are on screen from the start, so their label dashes are drawn. */
.page-hero .waypoint::after,
.route-hero .waypoint::after,
.dest-hero .waypoint::after {
    transform: scaleX(1);
}

/* The 404 page, on the map. */
.not-found.map-band {
    padding: clamp(80px, 10vw, 140px) 0;
}

    .not-found.map-band h1 {
        font-size: clamp(2.4rem, 3.4vw + 1rem, 4.4rem);
        line-height: 1.02;
        color: var(--color-off-white);
    }

    .not-found.map-band p {
        max-width: 56ch;
        color: rgba(244, 241, 234, 0.86);
    }

    .not-found.map-band .label:not(.waypoint) {
        color: #E3B98A;
    }

    .not-found.map-band a:not(.btn) {
        color: var(--color-off-white);
    }

    .not-found.map-band .btn--primary {
        background: var(--color-off-white);
        color: var(--color-teal);
    }

    .not-found.map-band .label.waypoint {
        margin-inline: auto;
    }

/* ==========================================================================
   Homepage header: floats clear over the hero photograph, then turns solid
   once the page moves (site.js sets html.header-solid). Other pages keep the
   ordinary sticky cream header.
   ========================================================================== */
.site-header {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body:has(.hero) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

html.header-solid .site-header {
    box-shadow: 0 12px 30px -22px rgba(11, 50, 55, 0.45);
}

html:not(.header-solid) body:has(.hero) .site-header {
    background: transparent;
    border-bottom-color: transparent;
}

    html:not(.header-solid) body:has(.hero) .site-header .site-header__brand-name {
        color: #fff;
    }

    html:not(.header-solid) body:has(.hero) .site-header .site-header__brand-tag {
        color: #E9B86A;
    }

    html:not(.header-solid) body:has(.hero) .site-header .site-header__toggle-bar {
        background: #fff;
    }

@media (min-width: 1341px) {
    html:not(.header-solid) body:has(.hero) .site-header .site-header__drop-btn,
    html:not(.header-solid) body:has(.hero) .site-header .site-header__nav a:not(.site-header__nav-cta) {
        color: rgba(255, 255, 255, 0.9);
    }

        html:not(.header-solid) body:has(.hero) .site-header .site-header__nav a:not(.site-header__nav-cta):hover {
            color: #E9B86A;
        }
}

/* Narrower side margins for the header and the homepage hero: they run
   wider than the reading column, like the footer. */
.site-header .container,
.hero .container {
    max-width: 1600px;
    padding-left: clamp(20px, 5.5vw, 104px);
    padding-right: clamp(20px, 5.5vw, 104px);
}

    html:not(.header-solid) body:has(.hero) .site-header .site-header__nav .site-header__drop-menu a {
        color: var(--color-ink);
    }

/* ==========================================================================
   The first-load handoff (handoff.js): while Blazor swaps the server-drawn
   page for the live one, the fresh copies appear in their finished state
   instead of replaying their entrance effects.
   ========================================================================== */
html.mbs-handoff *,
html.mbs-handoff *::before,
html.mbs-handoff *::after {
    transition: none !important;
}

html.mbs-handoff .reveal,
html.mbs-handoff .reveal * {
    animation: none !important;
}

/* One-time entrance animations on the swapped-in copies: kept finished for
   good (marked per element, so pages opened later still animate in). */
.mbs-settled {
    animation: none !important;
    opacity: 1 !important;
}