/*
|--------------------------------------------------------------------------
| Lightweight Page & Scroll Motion
|--------------------------------------------------------------------------
|
| Only opacity and transform are animated. These properties are compositor
| friendly and avoid layout recalculation during the animation.
|
*/


/*
|--------------------------------------------------------------------------
| Hero split-title entrance
|--------------------------------------------------------------------------
|
| The first title line enters from the left and the second enters from the
| right. Only opacity and transform are animated, keeping the effect smooth
| without triggering layout work during the motion.
|
*/

@keyframes ott-hero-title-left {
    from {
        opacity: 0;
        transform: translate3d(calc(-1 * clamp(90px, 16vw, 220px)), 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ott-hero-title-right {
    from {
        opacity: 0;
        transform: translate3d(clamp(90px, 16vw, 220px), 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ott-hero-supporting-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

[data-hero-title] {
    contain: paint;
}

.hero-title-line {
    display: block;
    will-change: transform, opacity;
}

.hero-title-line-left {
    animation: ott-hero-title-left 620ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both;
}

.hero-title-line-right {
    animation: ott-hero-title-right 620ms cubic-bezier(0.22, 1, 0.36, 1) 110ms both;
}

[data-hero-content] > :not([data-hero-title]) {
    animation: ott-hero-supporting-enter 320ms ease-out 420ms both;
}

html.motion-lite .hero-title-line-left,
html.motion-lite .hero-title-line-right {
    animation-duration: 380ms;
    animation-delay: 0ms;
}

html.motion-lite [data-hero-content] > :not([data-hero-title]) {
    animation-duration: 220ms;
    animation-delay: 220ms;
}


@keyframes ott-motion-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

[data-load-reveal] {
    animation:
        ott-motion-enter 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--motion-delay, 0ms);
}

[data-scroll-reveal] {
    transition:
        opacity 430ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 430ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--motion-delay, 0ms);
}

[data-scroll-reveal].motion-pending {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    will-change: opacity, transform;
}

[data-scroll-reveal].motion-pending.motion-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/*
 * Use shorter movement and no stagger on lower-resource devices.
 */
html.motion-lite [data-load-reveal] {
    animation-duration: 300ms;
    animation-delay: 0ms;
}

html.motion-lite [data-scroll-reveal] {
    transition-duration: 300ms;
    transition-delay: 0ms;
}

html.motion-lite [data-scroll-reveal].motion-pending {
    transform: translate3d(0, 8px, 0);
}

/*
 * Respect the operating system accessibility preference completely.
 */
@media (prefers-reduced-motion: reduce) {
    [data-load-reveal],
    .hero-title-line-left,
    .hero-title-line-right,
    [data-hero-content] > :not([data-hero-title]),
    [data-scroll-reveal],
    [data-scroll-reveal].motion-pending,
    [data-scroll-reveal].motion-pending.motion-revealed {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}