/*********************
v6 motion: "depth"
Words of each heading flip up from the baseline, cards tilt back and settle flat,
photos ease out of a slow zoom and the hero keeps a little depth while you scroll.
Everything is gated by html.js-motion (set in <head>, skipped for reduced motion).
*********************/

/* headings: word flip */
.js-motion .dm-words .dm-w {
    display: inline-block;
    perspective: 640px;
    vertical-align: top;
}

.js-motion .dm-words .dm-wi {
    display: inline-block;
    opacity: 0;
    transform: rotateX(-82deg) translateY(0.3em);
    transform-origin: 50% 100%;
    transition:
        transform 1s cubic-bezier(0.2, 0.75, 0.15, 1) calc(var(--i, 0) * 60ms),
        opacity 0.6s ease calc(var(--i, 0) * 60ms);
    will-change: transform;
}

.js-motion .dm-words.is-in .dm-wi {
    opacity: 1;
    transform: none;
}

/* cards: tilt back, then settle flat */
.js-motion .dm-tilt {
    opacity: 0;
    transform: perspective(1400px) rotateX(9deg) translateY(56px) scale(0.965);
    transform-origin: 50% 0;
    transition:
        transform 1.2s cubic-bezier(0.2, 0.75, 0.15, 1) calc(var(--d, 0) * 90ms),
        opacity 0.8s ease calc(var(--d, 0) * 90ms);
}

.js-motion .dm-tilt.is-in {
    opacity: 1;
    transform: none;
}

/* photos inside cards ease out of a slow zoom */
.js-motion .dm-tilt picture img,
.js-motion .dm-tilt > img,
.js-motion .dm-tilt .neighborhood--item__img {
    transform: scale(1.12);
    transition: transform 1.8s cubic-bezier(0.2, 0.75, 0.15, 1) calc(var(--d, 0) * 90ms);
}

.js-motion .dm-tilt.is-in picture img,
.js-motion .dm-tilt.is-in > img,
.js-motion .dm-tilt.is-in .neighborhood--item__img {
    transform: none;
}

/* text and buttons: soft rise */
.js-motion .dm-rise {
    opacity: 0;
    transform: translateY(22px);
    transition:
        transform 0.9s cubic-bezier(0.2, 0.75, 0.15, 1) calc(var(--d, 0) * 80ms + 120ms),
        opacity 0.9s ease calc(var(--d, 0) * 80ms + 120ms);
}

.js-motion .dm-rise.is-in {
    opacity: 1;
    transform: none;
}

/* home hero: the content box swings in from the right */
.js-motion .hero--content__box.dm-swing {
    opacity: 0;
    transform: perspective(1600px) rotateY(-16deg) translateX(48px);
    transform-origin: 100% 50%;
    transition:
        transform 1.4s cubic-bezier(0.2, 0.75, 0.15, 1) 0.35s,
        opacity 1s ease 0.35s;
}

.js-motion .hero--content__box.dm-swing.is-in {
    opacity: 1;
    transform: none;
}

.js-motion .hero--card__content > ul li {
    opacity: 0;
    transform: translateY(16px);
    transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.15, 1), opacity 0.8s ease;
}

.js-motion .hero--card__content > ul li:nth-child(1) { transition-delay: 0.9s; }
.js-motion .hero--card__content > ul li:nth-child(2) { transition-delay: 1s; }
.js-motion .hero--card__content > ul li:nth-child(3) { transition-delay: 1.1s; }

.js-motion .hero--content__box.is-in .hero--card__content > ul li {
    opacity: 1;
    transform: none;
}

/* scroll depth: hero text drifts and fades, the background moves slower than the page */
.js-motion .dm-depth {
    transform: translate3d(0, calc(var(--dp, 0) * 90px), 0);
    opacity: calc(1 - var(--dp, 0) * 0.85);
}

.js-motion .dm-depth-bg {
    background-position: center calc(50% + var(--dp, 0) * 120px);
}

.js-motion .dm-depth-video {
    transform: scale(calc(1 + var(--dp, 0) * 0.08));
}

/* legacy helper kept for old markup */
.active.fadeIn-top {
    animation: fadeIn-top 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes fadeIn-top {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}