/* ==========================================================================
   Hanh trinh Minh Anh (trang chu) - thay block "Gia Tri Nguyen Ban".
   Font dong bo toan site: iCielProza (heading) + iCielIdealSans (body).
   Nen kem, 4 buoc 01-04 xep zigzag, anh blob to chuc, duong cong vang noi anh.
   Animation: scroll-reveal qua class .is-in (them boi ma-journey.script.js).
   ========================================================================== */

.ma-journey {
    --mj-bg: #fbf8f0;
    --mj-ink: var(--main-text-color, #2b1f18);
    --mj-muted: #6b5a4c;
    --mj-accent: var(--main-site-bakground, #a13a27);
    --mj-gold: #c9a56b;
    --mj-display: iCielProza, var(--main-font-coffee), sans-serif;
    --mj-body: var(--main-font-coffee), sans-serif;

    position: relative;
    overflow: hidden;
    font-family: var(--mj-body);
    background-color: var(--mj-bg);
    color: var(--mj-ink);
    padding: 70px 20px 40px
}

.ma-journey__inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto
}

/* ---------- Doan mo dau ---------- */
.ma-journey__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 22px;
    font-size: 12px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--mj-muted)
}

.ma-journey__eyebrow:after {
    content: "";
    width: 70px;
    height: 1px;
    background: var(--mj-gold)
}

.ma-journey__title {
    margin: 0 0 22px;
    font-family: var(--mj-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--mj-ink)
}

.ma-journey__lead {
    max-width: 330px;
    margin: 0 0 34px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mj-muted)
}

.ma-journey__tagline {
    position: relative;
    margin: 0;
    padding-top: 18px;
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--mj-muted)
}

.ma-journey__tagline:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: var(--mj-gold)
}

/* ---------- Tung buoc 01-04 ---------- */
.ma-journey__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 56px
}

.ma-journey__text {
    max-width: 380px
}

/* So thu tu: chu display do + cham va vach ngang */
.ma-journey__num {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--mj-display);
    font-weight: 600;
    font-size: 48px;
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--mj-accent)
}

.ma-journey__num:after {
    content: "";
    width: 110px;
    height: 7px;
    background:
        radial-gradient(circle at 3.5px 50%, var(--mj-accent) 3px, transparent 3.5px),
        linear-gradient(var(--mj-accent), var(--mj-accent)) 10px 50% / calc(100% - 10px) 1px no-repeat;
    opacity: .75
}

.ma-journey__heading {
    margin: 14px 0 14px;
    font-family: var(--mj-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.32;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--mj-ink)
}

.ma-journey__text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--mj-muted)
}

.ma-journey__media {
    position: relative;
    margin: 0;
    max-width: 480px
}

.ma-journey__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1)
}

.ma-journey__media:hover img {
    transform: scale(1.03)
}

/* Chu trang tri canh anh - cung font site, dang nghieng nhe */
.ma-journey__script {
    position: absolute;
    z-index: 2;
    font-family: var(--mj-body);
    /* theme khong co file font weight 300 -> dung 400 de tranh request 404 */
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a6b4f;
    white-space: nowrap;
    transform: rotate(-6deg);
    pointer-events: none
}

.ma-journey__script:after {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: 8px 0 0 30px;
    background: var(--mj-gold)
}

.ma-journey__line {
    display: none
}

/* ---------- Chan section ---------- */
.ma-journey__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 30px;
    max-width: 1180px;
    margin: 60px auto 0;
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--mj-muted)
}

.ma-journey__foot span {
    display: flex;
    align-items: center;
    gap: 14px
}

.ma-journey__foot span:first-child:before,
.ma-journey__foot span:last-child:after {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--mj-gold)
}

/* ==========================================================================
   Animation: trang thai ban dau + .is-in khi cuon toi
   ========================================================================== */
.ma-journey__eyebrow,
.ma-journey__title,
.ma-journey__lead,
.ma-journey__tagline,
.ma-journey__num,
.ma-journey__heading,
.ma-journey__text p,
.ma-journey__media,
.ma-journey__script,
.ma-journey__foot span {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--mj-delay, 0s)
}

.ma-journey__media {
    transform: translateY(34px) scale(.96)
}

.ma-journey__script {
    transform: translateY(14px) rotate(-6deg)
}

.ma-journey__eyebrow:after,
.ma-journey__tagline:before,
.ma-journey__foot span:first-child:before,
.ma-journey__foot span:last-child:after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.22, .61, .36, 1) .25s
}

.ma-journey__num:after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.22, .61, .36, 1) .2s
}

.is-in .ma-journey__eyebrow,
.is-in .ma-journey__title,
.is-in .ma-journey__lead,
.is-in .ma-journey__tagline,
.is-in .ma-journey__num,
.is-in .ma-journey__heading,
.is-in .ma-journey__text p,
.is-in .ma-journey__media,
.is-in .ma-journey__foot span,
.ma-journey__foot.is-in span {
    opacity: 1;
    transform: none
}

.is-in .ma-journey__media {
    transform: translateY(0) scale(1)
}

.is-in .ma-journey__script {
    opacity: 1;
    transform: translateY(0) rotate(-6deg)
}

.is-in .ma-journey__eyebrow:after,
.is-in .ma-journey__tagline:before,
.is-in .ma-journey__num:after,
.ma-journey__foot.is-in span:first-child:before,
.ma-journey__foot.is-in span:last-child:after {
    transform: scaleX(1)
}

/* ---------- Text animation ----------
   Chu chay theo tung tu do module dung chung lo (assets/scripts/motion-text.js
   + assets/css/motion-text.style.css). O day chi tat hieu ung fade-up cua khoi
   de hai animation khong chong nhau. */
.ma-journey__title.mt-motion,
.ma-journey__heading.mt-motion {
    opacity: 1;
    transform: none;
    transition: none
}

/* Do tre lan luot trong tung khoi */
.ma-journey__intro .ma-journey__title { --mj-delay: .1s }
.ma-journey__intro .ma-journey__lead { --mj-delay: .2s }
.ma-journey__intro .ma-journey__tagline { --mj-delay: .3s }
.ma-journey__item .ma-journey__heading { --mj-delay: .1s }
.ma-journey__item .ma-journey__text p { --mj-delay: .2s }
.ma-journey__item .ma-journey__media { --mj-delay: .15s }
.ma-journey__item .ma-journey__script { --mj-delay: .45s }
.ma-journey__foot span:last-child { --mj-delay: .12s }

@media (prefers-reduced-motion: reduce) {
    .ma-journey *,
    .ma-journey *:before,
    .ma-journey *:after {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important
    }

    .ma-journey__script {
        transform: rotate(-6deg) !important
    }
}

/* ---------- Mobile: anh truoc, chu sau; chu trang tri dat goc tren anh ---------- */
@media screen and (max-width:1023px) {
    .ma-journey__media {
        order: -1;
        width: 100%;
        margin: 0 auto
    }
    .ma-journey__script {
        top: -6px;
        right: 4px
    }
}

/* ---------- Desktop: bo cuc zigzag nhu thiet ke ---------- */
@media screen and (min-width:1024px) {
    .ma-journey {
        /* le phai rong hon de chua cot do cao (2100m...) co dinh o mep phai man hinh */
        padding: 110px 120px 50px 40px
    }

    .ma-journey__inner {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 24px
    }

    .ma-journey__title {
        font-size: 36px
    }

    .ma-journey__intro {
        grid-column: 1 / 6;
        grid-row: 1;
        padding-top: 10px
    }

    .ma-journey__item {
        flex-direction: row;
        align-items: center;
        gap: 44px;
        margin-top: 0
    }

    .ma-journey__item--01 {
        grid-column: 6 / 13;
        grid-row: 1
    }

    .ma-journey__item--01 .ma-journey__text {
        flex: 0 0 44%
    }

    .ma-journey__item--02 {
        grid-column: 1 / 12;
        grid-row: 2;
        margin-top: 70px
    }

    .ma-journey__item--03 {
        grid-column: 2 / 13;
        grid-row: 3;
        flex-direction: row-reverse;
        margin-top: 40px
    }

    .ma-journey__item--04 {
        grid-column: 1 / 12;
        grid-row: 4;
        margin-top: 40px
    }

    .ma-journey__item--02 .ma-journey__text,
    .ma-journey__item--03 .ma-journey__text,
    .ma-journey__item--04 .ma-journey__text {
        flex: 0 0 34%
    }

    .ma-journey__media {
        flex: 1 1 auto
    }

    .ma-journey__num {
        font-size: 56px
    }

    .ma-journey__heading {
        font-size: 21px
    }

    /* Anh truot vao tu huong nguoc lai voi cot chu */
    .ma-journey__item--01 .ma-journey__media,
    .ma-journey__item--02 .ma-journey__media,
    .ma-journey__item--04 .ma-journey__media {
        transform: translateX(46px) translateY(20px) scale(.97)
    }

    .ma-journey__item--03 .ma-journey__media {
        transform: translateX(-46px) translateY(20px) scale(.97)
    }

    .is-in .ma-journey__media {
        transform: translateX(0) translateY(0) scale(1)
    }

    /* Vi tri chu trang tri theo tung anh, bam sat thiet ke */
    .ma-journey__item--01 .ma-journey__script { top: -56px; right: -10px }
    .ma-journey__item--02 .ma-journey__script { top: 36%; right: -60px }
    .ma-journey__item--03 .ma-journey__script { top: 8%; left: -60px }
    .ma-journey__item--04 .ma-journey__script { top: 2%; right: -120px }

    .ma-journey__line {
        display: block;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        /* ve dan duong cong tu tren xuong khi cuon */
        -webkit-mask-image: linear-gradient(to bottom, #000 0 100%);
        mask-image: linear-gradient(to bottom, #000 0 100%);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 0%;
        mask-size: 100% 0%;
        transition: -webkit-mask-size 1.8s ease, mask-size 1.8s ease
    }

    .ma-journey__line.is-in {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%
    }

    .ma-journey__line path {
        fill: none;
        stroke: var(--mj-gold);
        stroke-width: 1.2;
        stroke-dasharray: 2 5;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
        opacity: .8
    }
}