/* Get the app: a 1390 × 660 black band 65px under the cards: the shop photo (1761 × 1019, its right part) under
   a 78% gradient from the left and a 50% one from the bottom; the head 118px in and 88 down, the QR card and the
   promo card 32px under it, the note 40px above the bottom */
.ltb-app {
    padding-top: 65px;
}

.ltb-app__box {
    position: relative;
    width: min(1390px, 100% - 48px);
    min-height: 660px;
    margin: 0 auto;
    padding: 88px 118px 40px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
    background: #000;
}

/* the window over the photo: the card itself (it clips), or with config 'mask' its clip-path; a size container,
   so the photo layer knows the card's size (cq units) */
.ltb-app__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #000;
    pointer-events: none;
    container-type: size;
}

/* the photo layer (1761 × 1019) with its shades: its right edge --ltb-app-r past the card's, 184px above the card */
.ltb-app__layer {
    --ltb-app-r: 264px;
    position: absolute;
    top: -184px;
    right: calc(var(--ltb-app-r) * -1);
    width: 1761px;
    aspect-ratio: 1761 / 1019;
}

.ltb-app__photo {
    position: absolute;
    inset: 0;
}

.ltb-app__photo img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.ltb-app__shade {
    position: absolute;
    pointer-events: none;
}

/* the shades belong to the photo (they cover all of it and move with it in the mask's window), placed in card px:
   the card's left edge is at 1761 - r - 100cqw in the layer, its bottom at 184 + 100cqh.
   78% from the left: solid up to 202px into the card, gone at 768 */
.ltb-app__shade--left {
    inset: 0;
    background: linear-gradient(90deg,
        #020402 calc(1963px - var(--ltb-app-r) - 100cqw),
        rgba(2, 4, 2, 0) calc(2529px - var(--ltb-app-r) - 100cqw));
    opacity: .78;
}

/* 50% from the bottom: from 212px above the card's bottom to full at its bottom, and full below it */
.ltb-app__shade--bottom {
    top: calc(184px + 100cqh - 212px);
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(2, 4, 2, 0), #020402 212px);
    opacity: .5;
}

/* config 'mask', desktop: the card is a window over the whole photo; at rest the window is the card */
@media (min-width: 1024px) {
    .ltb-app--mask .ltb-app__box {
        overflow: visible;
        border-radius: 0;
        background: none;
    }

    .ltb-app--mask .ltb-app__media {
        clip-path: inset(0 round 24px);
    }
}

/* ... with motion: the card holds in the middle of the screen over a 600px runway while the window closes from the
   full screen width to the card (pay-mask.js); the band's top padding is the photo's room above the card. The runway
   is in the band's content (a sticky card only moves inside its parent's content box, not its padding) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .ltb-app--mask .ltb-app__band {
        padding-top: 184px;
    }

    .ltb-app--mask .ltb-app__band::after {
        content: '';
        display: block;
        height: 600px;
    }

    .ltb-app--mask .ltb-app__box {
        position: sticky;
        top: max(0px, 50vh - 330px);
    }

    .ltb-app--mask .ltb-app__layer {
        transform-origin: 0 0;
        will-change: transform;
    }

    .ltb-anim .ltb-app--mask [data-ltb-reveal="photo"] {
        transform: none;
        transition: none;
    }
}

.ltb-app__shade--promo,
.ltb-app__btn,
.ltb-app__promo-gift {
    display: none;
}

.ltb-app__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 461px;
    max-width: 100%;
}

.ltb-page .ltb-app__head .ltb-overline {
    color: #fff;
}

.ltb-page .ltb-app__title {
    color: #fff;
    font-size: 48px;
    font-style: italic;
    font-weight: 900;
    line-height: 48px;
    text-transform: uppercase;
    text-wrap: balance;
}

.ltb-page .ltb-app__title .green {
    color: var(--ltb-green);
}

.ltb-page .ltb-app__desc {
    margin-top: 8px;
    color: #FAFAFA;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.ltb-app__row {
    display: flex;
    margin-top: 32px;
}

/* the white QR card (196 × 230): "POBIERZ" 12px over the 163px code */
.ltb-app__qr {
    display: flex;
    flex: 0 0 196px;
    flex-direction: column;
    gap: 12px;
    padding: 19.5px 15px 18.5px 16px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
}

.ltb-page .ltb-app__qr-label {
    color: #000;
    font-size: 24px;
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.48px;
    text-align: center;
    text-transform: uppercase;
}

.ltb-page .ltb-app__qr-img {
    display: block;
    width: 163px;
    max-width: none;
    height: 163px;
    opacity: 0;
    transition: opacity .3s ease;
}

.ltb-page .ltb-app__qr-img.is-ready {
    opacity: 1;
}

/* the promo card (230 × 230): the gift artwork on black, "3 months free" 20px down, the code 124px down */
.ltb-app__promo {
    position: relative;
    display: flex;
    flex: 0 0 230px;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 18px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
    background: #000;
}

.ltb-app__promo-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.ltb-page .ltb-app__promo-title {
    width: 166px;
    color: #fff;
    font-size: 24px;
    font-style: italic;
    font-weight: 900;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
}

.ltb-app__code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 197px;
    margin-top: auto;
    padding-top: 16px;
}

.ltb-page .ltb-app__code-label {
    color: #fff;
    font-size: 24px;
    font-style: italic;
    font-weight: 900;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
}

/* the code pill (the Pinbank download button / the /promo-code/ cards): the code on white, the green 56px dot
   with the copy icon 6px from the right; on hover (and once copied) the dot spreads over the pill, the code fades
   and [icon + label] meet in the middle (--ltb-code-hw: the label's width, measured by the section's script) */
.ltb-code {
    --ltb-code-dot: 56px;
    --ltb-code-y: 4.5px;
    --ltb-code-r: 6px;
    --ltb-code-hw: 110px;
    --ltb-code-ease: cubic-bezier(.4, 0, .2, 1);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 65px;
    margin: 0;
    padding: var(--ltb-code-y) calc(var(--ltb-code-dot) + var(--ltb-code-r) + 8px) var(--ltb-code-y) 35px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 64px;
    background: #fff;
    font-family: Nunito, sans-serif;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ltb-code__value {
    position: relative;
    z-index: 0;
    color: #000;
    font-size: 20px;
    font-weight: 800;
    line-height: 32px;
    letter-spacing: 3px;
    white-space: nowrap;
    transition: opacity .45s var(--ltb-code-ease);
}

.ltb-code__pill {
    position: absolute;
    top: var(--ltb-code-y);
    right: var(--ltb-code-r);
    bottom: var(--ltb-code-y);
    z-index: 1;
    width: var(--ltb-code-dot);
    border-radius: 64px;
    background: var(--ltb-green);
    pointer-events: none;
    transition: width .45s var(--ltb-code-ease);
}

.ltb-code__icon {
    position: absolute;
    top: 50%;
    right: var(--ltb-code-r);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ltb-code-dot);
    aspect-ratio: 1;
    color: #000;
    pointer-events: none;
    transform: translateY(-50%);
    transition: right .45s var(--ltb-code-ease);
}

.ltb-code__icon svg {
    display: block;
    flex: none;
    transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.ltb-code__icon-check {
    position: absolute;
    opacity: 0;
    transform: scale(.6);
}

.ltb-code__hover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-left: calc(50% + (32px - var(--ltb-code-hw)) / 2);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateX(60%);
    transition: opacity .3s ease, transform .45s var(--ltb-code-ease);
}

.ltb-code__hover-text {
    color: #000;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* hovered, focused from the keyboard or just copied: the filled pill with [icon + label] in the middle */
.ltb-code.is-copied .ltb-code__value,
.ltb-code:focus-visible .ltb-code__value {
    opacity: 0;
}

.ltb-code.is-copied .ltb-code__pill,
.ltb-code:focus-visible .ltb-code__pill {
    width: calc(100% - var(--ltb-code-r) - var(--ltb-code-y));
}

.ltb-code.is-copied .ltb-code__icon,
.ltb-code:focus-visible .ltb-code__icon {
    right: calc(50% + (8px + var(--ltb-code-hw) - var(--ltb-code-dot)) / 2);
}

.ltb-code.is-copied .ltb-code__hover,
.ltb-code:focus-visible .ltb-code__hover {
    opacity: 1;
    transform: none;
}

.ltb-code.is-copied {
    animation: ltb-code-jump .45s var(--ltb-code-ease);
}

.ltb-code.is-copied .ltb-code__icon-copy {
    opacity: 0;
    transform: scale(.6);
}

.ltb-code.is-copied .ltb-code__icon-check {
    opacity: 1;
    transform: none;
}

.ltb-code:focus-visible {
    outline: 2px solid var(--ltb-green);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .ltb-code:hover .ltb-code__value {
        opacity: 0;
    }

    .ltb-code:hover .ltb-code__pill {
        width: calc(100% - var(--ltb-code-r) - var(--ltb-code-y));
    }

    .ltb-code:hover .ltb-code__icon {
        right: calc(50% + (8px + var(--ltb-code-hw) - var(--ltb-code-dot)) / 2);
        animation: ltb-code-icon-in .4s var(--ltb-code-ease);
    }

    .ltb-code:hover .ltb-code__hover {
        opacity: 1;
        transform: none;
        transition-delay: .2s;
        animation: ltb-code-text-in .4s var(--ltb-code-ease) .05s both;
    }
}

@keyframes ltb-code-icon-in {
    0% { transform: translateY(-50%) scale(.9); }
    40% { transform: translateY(-50%) scale(1.18); }
    70% { transform: translateY(-50%) scale(.97); }
    100% { transform: translateY(-50%) scale(1); }
}

@keyframes ltb-code-text-in {
    0% { opacity: 0; transform: translateX(15px) scale(.92); }
    60% { opacity: 1; transform: translateX(0) scale(1.05); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes ltb-code-jump {
    0%, 100% { transform: none; }
    40% { transform: translateY(-4px); }
}

.ltb-page .ltb-app__note {
    position: relative;
    margin-top: 91px;
    color: var(--ltb-light-grey);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

/* tablets: the desktop band 48px in, the photo further left so the till stays beside the copy */
@media (min-width: 768px) and (max-width: 1023px) {
    .ltb-app {
        padding-top: 48px;
    }

    .ltb-app__box {
        padding: 56px 48px 40px;
    }

    .ltb-app__layer {
        --ltb-app-r: 560px;
    }

    .ltb-page .ltb-app__title {
        font-size: 40px;
        line-height: 40px;
    }

    .ltb-page .ltb-app__note {
        margin-top: 56px;
    }
}

/* phones (408 band): the shop photo with its shades baked in, the head with the download button instead of the QR,
   "3 months free" 151px under the button over the gift (blended in), the code 140px lower, the note centred */
@media (max-width: 767px) {
    .ltb-app {
        padding-top: 24px;
    }

    .ltb-app__box {
        width: auto;
        min-height: 0;
        margin: 0 16px;
        padding: 24px 24px 24px;
    }

    .ltb-app__layer {
        inset: 0;
        width: auto;
        aspect-ratio: auto;
    }

    .ltb-app__photo img {
        object-position: 50% 0;
    }

    .ltb-app__shade--left,
    .ltb-app__shade--bottom,
    .ltb-app__qr,
    .ltb-app__promo-bg {
        display: none;
    }

    .ltb-app__head {
        width: auto;
    }

    .ltb-page .ltb-app__title {
        font-size: 30px;
        line-height: 32px;
    }

    .ltb-app__btn {
        display: flex;
        width: 100%;
        margin-top: 16px;
    }

    .ltb-app__row {
        display: block;
        margin-top: 0;
    }

    /* not isolated: the gift blends with the band's photo */
    .ltb-app__promo {
        display: block;
        margin-top: 151px;
        padding: 0;
        overflow: visible;
        isolation: auto;
        border-radius: 0;
        background: none;
    }

    /* "plus lighter" over the photo: the gift's black drops out */
    .ltb-page .ltb-app__promo-gift {
        position: absolute;
        top: 54px;
        left: 50%;
        display: block;
        width: 593px;
        max-width: none;
        height: auto;
        transform: translateX(-50%);
        mix-blend-mode: plus-lighter;
        pointer-events: none;
    }

    .ltb-page .ltb-app__promo-title {
        position: relative;
        top: auto;
        left: auto;
        z-index: 1;
        width: 232px;
        margin: 0 auto;
        font-size: 33.5422px;
        line-height: 33.5422px;
    }

    .ltb-app__code {
        position: relative;
        top: auto;
        left: auto;
        z-index: 1;
        gap: 16px;
        margin: 140px auto 0;
        padding-top: 0;
    }

    .ltb-app__shade--promo {
        right: 0;
        bottom: 0;
        left: 0;
        z-index: auto;
        display: block;
        height: 317px;
        background: linear-gradient(0deg, #020402 11.672%, rgba(2, 4, 2, 0) 67.296%);
    }

    .ltb-page .ltb-app__note {
        z-index: 1;
        max-width: 360px;
        margin: 26px auto 0;
        text-align: center;
    }
}