/* Shared motion for the landing pages. Everything here is opt-in: motion.js adds the
   html.motion class and the per-element classes, so without the script nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
    html.motion .reveal {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
        transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: var(--reveal-delay, 0ms);
    }
    html.motion .reveal.reveal--pop { transform: scale(0.88); }
    html.motion .reveal.is-in { opacity: 1; transform: none; }

    /* Diagram connectors draw outward from the hub once their block is in. */
    html.motion .reveal .tk-arrow { stroke-dasharray: 1; stroke-dashoffset: 1; }
    html.motion .reveal.is-in .tk-arrow {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0ms) + 350ms);
    }

    /* Screenshots grow into place as they scroll into view, where scroll-driven animation exists. */
    @supports (animation-timeline: view()) {
        html.motion .zoom-in {
            animation: motion-zoom linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 35%;
        }
        @keyframes motion-zoom {
            from { transform: scale(0.92); opacity: 0.5; }
            to { transform: none; opacity: 1; }
        }
    }
}