/* Entry animations only run when .ltb-anim is set (JS on, motion allowed);
   every end state is the untouched layout. */
.ltb-anim [data-ltb-reveal] {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity .8s cubic-bezier(.22, .61, .36, 1) var(--ltb-delay, 0ms),
        transform 1s cubic-bezier(.16, 1, .3, 1) var(--ltb-delay, 0ms),
        background-color .35s ease,
        border-color .35s ease,
        color .3s ease,
        padding .45s cubic-bezier(.33, 1, .68, 1);
}

.ltb-anim [data-ltb-reveal="left"] {
    transform: translate3d(-40px, 0, 0);
}

.ltb-anim [data-ltb-reveal="zoom"] {
    transform: scale(.94);
}

.ltb-anim [data-ltb-reveal="fade"] {
    transform: none;
}

.ltb-anim [data-ltb-reveal="photo"] {
    opacity: 1;
    transform: scale(1.08);
    transition: transform 2.4s cubic-bezier(.16, 1, .3, 1) var(--ltb-delay, 0ms);
}

.ltb-anim [data-ltb-reveal].is-inview {
    opacity: 1;
    transform: none;
}

.ltb-anim .ltb-reset,
.ltb-anim .ltb-reset * {
    transition: none !important;
}

/* accent bars draw in from the left */
.ltb-anim .ltb-line {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .9s cubic-bezier(.16, 1, .3, 1) calc(var(--ltb-delay, 0ms) + .35s);
}

.ltb-anim [data-ltb-reveal].ltb-line {
    opacity: 1;
    transform: scaleX(0);
}

.ltb-anim .is-inview .ltb-line,
.ltb-anim .ltb-line.is-inview {
    transform: none;
}

/* hero photo settles on load */
.ltb-anim .ltb-hero__img {
    transform-origin: 43.3% 53.8%;
    animation: ltb-settle 2.6s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes ltb-settle {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    40% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ltb-anim .ltb-pay__media {
    transform-origin: 44% 45%;
}

/* 3D renders pop in after their card */
.ltb-anim .ltb-pay__item-img {
    opacity: 0;
    transform: scale(.82) rotate(-4deg);
    transition:
        opacity .7s ease calc(var(--ltb-delay, 0ms) + .15s),
        transform 1.1s cubic-bezier(.34, 1.4, .64, 1) calc(var(--ltb-delay, 0ms) + .15s);
}

.ltb-anim .is-inview .ltb-pay__item-img {
    opacity: 1;
    transform: none;
}

/* table ticks and crosses pop row by row */
.ltb-anim .ltb-tbl__mark {
    transform: scale(0);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--ltb-delay, 0ms) + .25s);
}

.ltb-anim .is-inview .ltb-tbl__mark {
    transform: none;
}

/* card rules draw in from the left */
.ltb-anim .ltb-card__rule {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .9s cubic-bezier(.16, 1, .3, 1) calc(var(--ltb-delay, 0ms) + .2s), background-color .35s ease;
}

.ltb-anim .is-inview .ltb-card__rule {
    transform: none;
}

/* hover details (pointer devices only) */
.ltb-btn__icon {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .2s ease;
}

.ltb-card__rule {
    transition: background-color .35s ease;
}

.ltb-card__title .green {
    transition: color .35s ease;
}

/* the render lifts inside its own box (which clips it), so it never slides over the copy above */
.ltb-pay__item-media picture {
    display: block;
    height: 100%;
    transition: transform .6s cubic-bezier(.34, 1.4, .64, 1);
}

.ltb-tbl__row {
    transition: background-color .25s ease;
}

.ltb-ben__photo-img,
.ltb-faq__photo-img {
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

/* the suitcase handle sits at the very top of the frame: the hover zoom grows down, not up */
.ltb-faq__photo-img {
    transform-origin: 50% 0;
}

@media (hover: hover) and (pointer: fine) {
    /* the ↗ arrow turns to → */
    .ltb-btn:hover .ltb-btn__icon {
        transform: rotate(45deg);
    }

    .ltb-btn:hover .ltb-btn__icon--down {
        transform: none;
        animation: ltb-bounce .8s ease-in-out infinite;
    }

    .ltb-card:hover .ltb-card__rule {
        background-color: var(--ltb-green);
    }

    .ltb-card:hover .ltb-card__title .green {
        color: var(--ltb-green);
    }

    .ltb-pay__item:hover .ltb-pay__item-media picture {
        transform: translateY(-8px);
    }

    .ltb-ben__side:hover .ltb-ben__photo-img,
    .ltb-faq__side:hover .ltb-faq__photo-img {
        transform: scale(1.03);
    }
}

@keyframes ltb-bounce {
    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ltb-page *,
    .ltb-page *::before,
    .ltb-page *::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
}

/* slides sit in a clipped scroller on mobile: fade them in without the rise */
@media (max-width: 1023px) {
    .ltb-anim [data-ltb-track] [data-ltb-reveal] {
        transform: none;
    }
}
