/*
 * MONIA'S EXPRESS SHIPPING — inner-page cargo banners.
 * Loaded automatically for courier abbreviation MES.
 * Scoped to .page-hero to avoid changing the homepage or other sections.
 */

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background-color: #143c8c;
    background-image:
        linear-gradient(
            90deg,
            rgba(10, 24, 58, 0.94) 0%,
            rgba(20, 60, 140, 0.84) 48%,
            rgba(20, 60, 140, 0.56) 100%
        ),
        url('/images/monias-cargo-hero.png');
    background-size: cover;
    background-position: center 48%;
    padding: 36px 0 30px;
}

.page-hero h1 {
    color: #fff;
    text-wrap: balance;
}

.page-hero .lead {
    color: #f0f4ff;
    max-width: 680px;
}

.page-hero .eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.page-hero a:not(.btn) {
    color: #fff;
    text-underline-offset: 3px;
}

@media (min-width: 768px) {
    .page-hero {
        padding: 48px 0 40px;
    }
}

@media (max-width: 767px) {
    .page-hero {
        background-position: 58% center;
        padding: 32px 0 26px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes mes-inner-banner-fade {
        from {
            opacity: 0.65;
            transform: translateY(5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .page-hero {
        animation: mes-inner-banner-fade 650ms ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero {
        animation: none !important;
        transform: none !important;
    }
}

/*
 * MONIA HOMEPAGE ANIMATED CARGO HERO
 * Homepage only. Inner-page banners and other courier sites are unaffected.
 */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #143c8c;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            90deg,
            rgba(8, 24, 58, 0.88) 0%,
            rgba(20, 60, 140, 0.72) 55%,
            rgba(20, 60, 140, 0.46) 100%
        ),
        url('/images/monias-cargo-hero.webp');
    background-size: cover;
    background-position: center 48%;
    transform: scale(1.02);
    transform-origin: center;
}

.hero::before {
    z-index: 1;
}

.hero > .wrap {
    position: relative;
    z-index: 2;
}

.hero h1 {
    color: #fff;
}

.hero .lead {
    color: rgba(255, 255, 255, 0.9);
}

.hero .eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.hero .hero-points {
    color: rgba(255, 255, 255, 0.94);
}

.hero .hero-points .tick {
    color: #143c8c;
}

@media (min-width: 768px) {
    .hero::after {
        background-position: center 48%;
    }
}

@media (max-width: 767px) {
    .hero::after {
        background-position: 63% center;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes mes-home-hero-fade {
        from { opacity: 0.65; }
        to { opacity: 1; }
    }

    @keyframes mes-home-hero-zoom {
        from { transform: scale(1.02); }
        to { transform: scale(1.09); }
    }

    .hero::after {
        animation:
            mes-home-hero-fade 900ms ease-out both,
            mes-home-hero-zoom 28s ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero::after {
        animation: none !important;
        transform: none !important;
    }
}

/*
 * MONIA CONTINUOUS JOURNEY PLANE
 * Loop the Miami-to-Jamaica flight continuously.
 * Fade at the endpoints to soften the loop reset.
 */
@media (prefers-reduced-motion: no-preference) {
    @keyframes mes-plane-loop-visibility {
        0%, 4% {
            opacity: 0;
        }
        10%, 88% {
            opacity: 1;
        }
        97%, 100% {
            opacity: 0;
        }
    }

    .journey .plane {
        animation:
            v2-fly 4.4s 0.9s linear infinite both,
            mes-plane-loop-visibility 4.4s 0.9s linear infinite both !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journey .plane {
        animation: none !important;
        opacity: 1;
        transform: translate(600px, 50px) rotate(0deg);
    }
}

/* MONIA HOMEPAGE HEADLINE CONTRAST */
.hero h1 .hl {
    color: #f0b94d;
}

/* MONIA JOURNEY LOCATION CONTRAST
   Keep Miami/Jamaica labels readable over the animated cargo background. */
.journey .journey-labels,
.journey .journey-labels span,
.journey .journey-labels strong {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(4, 18, 48, 0.95);
}

.journey .journey-labels span {
    opacity: 1;
}

/* MONIA HOMEPAGE MOCKUP CONTRAST REFINEMENTS
   Scoped to Monia's homepage; preserve the existing cargo and plane animations. */

/* High-contrast secondary login button */
.hero .btn-ghost {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(8, 28, 68, 0.28) !important;
}

.hero .btn-ghost:hover,
.hero .btn-ghost:focus-visible {
    color: #10264b !important;
    border-color: #f0b94d !important;
    background: #f0b94d !important;
}

/* Gold feature checks with dark, readable checkmarks */
.hero .hero-points .tick {
    background: #f0b94d !important;
    color: #10264b !important;
}

/* Brighter gold route, retaining the existing SVG flight path */
.hero .journey .arc {
    stroke: #f0b94d !important;
    opacity: 0.95 !important;
}

.hero .journey .arc-glow {
    stroke: #f0b94d !important;
    opacity: 0.24 !important;
}