/* Hero. Desktop = the 1720×800 frame of the design, pushed down by --znh-shift; the photo box scales and rounds
   its bottom corners on scroll (hero.js). Values are the design's px inside the frame. */
.znh-hero {
    position: relative;
    height: calc(800px + var(--znh-shift));
}

/* at most the width the photo composition reaches at its largest scale (1720 × 1.25), centred: wider screens show
   the page background beside it */
.znh-hero__box {
    position: absolute;
    inset: 0;
    max-width: 2150px;
    margin: 0 auto;
    overflow: hidden;
    background: #141015;
    transform-origin: 50% 0;
    will-change: transform;
}

.znh-hero__frame {
    position: absolute;
    top: var(--znh-shift);
    left: 50%;
    width: 1720px;
    height: 800px;
    margin-left: -860px;
}

/* wider than the design: the whole photo composition (photo + shades) scales with the viewport (stage.js) */
.znh-hero__box .znh-hero__frame {
    transform-origin: 50% 0;
    scale: var(--znh-bg-scale, 1);
}

.znh .znh-hero__photo {
    position: absolute;
    top: -123.23px;
    left: -31.01px;
    width: 2256.292px;
    height: 1259.326px;
    max-width: none;
    will-change: transform;
}

/* shade gradients of the design (flex box = rotated bounding box, inner element rotated about its centre) */
.znh-hero__shade {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.znh-hero__shade-tf {
    display: block;
    flex: none;
}

.znh-hero__shade-fill {
    display: block;
    opacity: .73;
}

.znh-hero__shade--left {
    top: calc(50% - 46.31px);
    left: calc(50% - 646.34px);
    width: 1636.096px;
    height: 1558.88px;
    transform: translate(-50%, -50%);
}

.znh-hero__shade--left .znh-hero__shade-tf {
    transform: rotate(9.91deg) skewX(.34deg);
}

.znh-hero__shade--left .znh-hero__shade-fill {
    width: 1436.465px;
    height: 1330.21px;
    background: linear-gradient(to left, rgba(47, 44, 42, 0) 0%, rgba(23, 18, 27, .9) 49.687%, #291E34 95.694%);
}

/* top band of the design (136px from the top of the page, #202020 fading down): it starts at the page top,
   above the shifted frame, and is longer by the shift, so it still ends 73px below the header like below the
   design's nav, and the photo beside the header has no hard edge */
.znh-hero__shade--top {
    top: calc(-1 * var(--znh-shift));
    left: calc(50% - .6px);
    width: 1721.194px;
    height: calc(136.196px + var(--znh-shift));
    background: linear-gradient(180deg, #202020 4.306%, rgba(47, 44, 42, 0) 94.643%);
    opacity: .73;
    transform: translateX(-50%);
}

.znh-hero__shade--right {
    top: calc(50% + 4.81px);
    left: calc(50% + 599.56px);
    width: 1524.004px;
    height: 1590.585px;
    transform: translate(-50%, -50%);
}

.znh-hero__shade--right .znh-hero__shade-tf {
    transform: rotate(-167.33deg) scaleY(-1) skewX(.43deg);
}

.znh-hero__shade--right .znh-hero__shade-fill {
    width: 1270.388px;
    height: 1342.46px;
    background: linear-gradient(to left, rgba(47, 44, 42, 0) 50%, #2F2C2A 95.694%);
}

/* ---------- copy column ---------- */
.znh .znh-hero__bg-m {
    display: none;
}

.znh-hero__layer {
    z-index: 1;
}

.znh-hero__content {
    position: absolute;
    top: 122px;
    left: 257.69px;
    display: flex;
    flex-direction: column;
    width: 451px;
    color: #fff;
    will-change: transform, opacity;
}

.znh-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* wraps by itself at the design's 527px (4 lines in English) */
.znh .znh-hero__title {
    width: 527px;
    margin: 0;
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 48px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* ratings pill: 25px under the lead, the QR 50px under it; 1px inside stroke white 30% → 15% top to bottom */
.znh-hero__pill {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    margin: 25px 0 50px;
    padding-left: 46.414px;
    border-radius: 87px;
    background: rgba(0, 0, 0, .03);
    -webkit-backdrop-filter: blur(5.15px);
    backdrop-filter: blur(5.15px);
}

.znh-hero__pill::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .15));
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.znh-hero__ratings {
    gap: 20px;
}

.znh .znh-hero__title .green,
.znh .znh-hero__scan .green {
    color: var(--znh-green);
}

.znh-hero__lead {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 40px;
}

.znh .znh-hero__sub {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    height: 39px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.znh .znh-hero__tagline {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 30px;
    text-transform: uppercase;
}

/* QR tile + curved arrow + "scan and join" */
.znh-hero__qr {
    position: relative;
    width: 307px;
    height: 120px;
}

.znh-hero__qr-tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 9px;
    /* background: var(--znh-green); */
    background:#fff;
}

.znh .znh-hero__qr-img {
    position: absolute;
    top: 7.5px;
    left: 7.5px;
    width: 105px;
    height: 105px;
}

.znh-hero__qr-arrow {
    position: absolute;
    top: 34.91px;
    left: 131px;
    width: 25px;
    height: 8.254px;
}

.znh-hero__qr-arrow svg {
    position: absolute;
    top: -5.8224px;
    left: -1px;
    display: block;
    width: 27.0005px;
    height: 15.0768px;
    overflow: visible;
}

.znh .znh-hero__scan {
    position: absolute;
    top: 50.68px;
    left: 144px;
    width: 163px;
    color: #fff;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    line-height: 20px;
    letter-spacing: -.2px;
    text-transform: uppercase;
    height: 34px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* ---------- notifications (one at a time, the next after each loop; follow the pointer, hero.js) ---------- */
.znh-hero__toasts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}

/* the design's card is 187px wide; longer copy widens it instead of wrapping. Wider than 1720px the photo grows
   (--znh-bg-scale, from the frame's top centre, at most 1.25×), so the card's place grows with it: it stays by
   the phone */
.znh-hero__notif {
    position: absolute;
    top: calc(485.7px * var(--znh-bg-scale, 1));
    left: calc(860px + 253px * var(--znh-bg-scale, 1));
    display: none;
    align-items: center;
    gap: 6.187px;
    box-sizing: border-box;
    width: max-content;
    min-width: 187px;
    padding: 8.249px 9.28px;
    overflow: hidden;
    border-radius: 11.858px;
    background: rgba(255, 255, 255, .8);
    /* 25% larger than the design, from its centre; `scale` leaves the animated translate / rotate alone */
    scale: 1.25;
    animation: znh-notif-fade 4.492062s linear infinite, znh-notif-rotate 4.492062s linear infinite, znh-notif-move 4.492062s linear infinite;
}

.znh-hero__notif.is-active {
    display: flex;
}

/* 1px inside stroke of the design: #22E243 at 53% from the top-left, fading out toward the bottom-right */
.znh-hero__notif::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(161.06deg, rgba(34, 226, 67, .53) 26.23%, rgba(34, 226, 67, 0) 96.57%);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* app-tile icons (they carry their own background) */
.znh-hero__notif-icon {
    display: block;
    flex: none;
    width: 28.872px;
    height: 28.872px;
    overflow: hidden;
    border-radius: 7.218px;
}

.znh .znh-hero__notif-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.znh-hero__notif-text {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: center;
    gap: .516px;
    min-width: 1px;
}

.znh-hero__notif-title {
    display: block;
    height: 13px;
    color: #222;
    font-size: 10.31px;
    font-weight: 800;
    line-height: 12.374px;
    letter-spacing: -.1547px;
    text-transform: uppercase;
    white-space: nowrap;
}

.znh-hero__notif-sub {
    display: block;
    color: #3F3F3F;
    font-size: 10.31px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.3093px;
    white-space: nowrap;
}

/* motion of the design: rises 44px with a 5° turn, holds, fades out (4.49s loop) */
@keyframes znh-notif-fade {
    0% {
        opacity: 0;
        animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    }

    20.172% {
        opacity: 1;
    }

    45.728% {
        opacity: 1;
        animation-timing-function: cubic-bezier(.5, 0, .5, 1);
    }

    56.054% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes znh-notif-rotate {
    0% {
        rotate: .087rad;
        animation-timing-function: ease-out;
    }

    15.992% {
        rotate: 0rad;
    }

    100% {
        rotate: 0rad;
    }
}

@keyframes znh-notif-move {
    0% {
        translate: 0 44.315px;
        animation-timing-function: cubic-bezier(.45, 1.45, .8, 1);
    }

    20.172% {
        translate: 0 0;
    }

    100% {
        translate: 0 0;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 899px) {
    /* the first screen: copy, badges and CTA at the bottom, the first card's 71px overlap showing under them.
       Screens too short for that (landscape): it grows with the copy, kept clear of the site header. */
    .znh-hero {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        margin: 0;
        padding: 110px 17px 96px;
        overflow: hidden;
        background: #120D10;
        color: #fff;
        transform-origin: 50% 0;
        will-change: transform;
    }

    .znh-hero__box,
    .znh-hero__toasts,
    .znh-hero__pill,
    .znh-hero__qr {
        display: none !important;
    }

    /* short screens: the photo moves up so the face stays above the copy (1.5px per px of screen below 780px,
       at most --znh-m-lift-max so the head stays under the site header, and never past the photo's bottom) */
    .znh .znh-hero__bg-m {
        --znh-m-lift: max(0px, min(var(--znh-m-lift-max, 115px), (780px - 100svh) * 1.5, 100vw * 1656 / 780 - 100svh));
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% calc(-1 * var(--znh-m-lift));
        will-change: transform;
    }

    .znh-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .5) 56%, rgba(0, 0, 0, .35) 80%, rgba(0, 0, 0, .15) 100%);
    }

    .znh-hero > *:not(.znh-hero__bg-m) {
        position: relative;
        z-index: 2;
    }

    .znh-hero__frame.znh-hero__layer {
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        margin: auto 0 0;
    }

    .znh-hero__content {
        position: static;
        display: block;
        width: auto;
    }

    .znh-hero__copy,
    .znh-hero__lead {
        display: block;
    }

    .znh .znh-hero__title {
        width: auto;
        height: auto;
        max-width: 356px;
        font-size: 28px;
        line-height: 1.1;
        white-space: normal;
        text-box-trim: none;
    }

    .znh-hero__lead {
        max-width: 266px;
        margin-top: 16px;
        padding: 0;
    }

    .znh .znh-hero__sub,
    .znh .znh-hero__tagline {
        height: auto;
        font-size: 14px;
        line-height: 1.4;
        text-box-trim: none;
    }

    .znh .znh-hero__tagline {
        margin-top: 8px;
    }

    .znh-hero__rates {
        align-items: center;
        gap: 25px;
        margin-top: 23px;
    }

    .znh .znh-hero__rate-m {
        display: block;
        width: auto;
        height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .znh-hero__notif {
        opacity: 1;
        animation: none;
    }
}