/*
 * Reference-led global motion.
 *
 * Everything is visible by default. JavaScript adds `motion-ready` only after
 * the targets and observers exist, so delayed or blocked scripts never leave
 * content hidden.
 */

html.has-smooth-scroll {
    scroll-behavior: auto;
}

.site-motion-word {
    display: inline-block;
    white-space: nowrap;
}

.site-motion-character {
    display: inline-block;
}

html.motion-ready .site-motion-heading .site-motion-character {
    opacity: 0;
    transform: translateX(20px);
    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(100ms + (var(--motion-character-index, 0) * 30ms));
}

html.motion-ready .site-motion-heading.is-motion-visible .site-motion-character {
    opacity: 1;
    transform: translateX(0);
}

.site-motion-label__inner {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
}

html.motion-ready .site-motion-label .site-motion-label__inner {
    width: 1px;
    overflow: hidden;
    opacity: 0;
    transition:
        width 1.2s cubic-bezier(.22, 1, .36, 1),
        opacity .2s ease;
}

html.motion-ready .site-motion-label.is-motion-visible .site-motion-label__inner {
    width: min(var(--motion-label-width, 100%), 100%);
    opacity: 1;
}

html.motion-ready .site-motion-reveal {
    opacity: 0;
    translate: 0 26px;
}

html.motion-ready .site-motion-reveal.is-motion-visible {
    animation: site-motion-rise .9s cubic-bezier(.22, 1, .36, 1) var(--motion-reveal-delay, 0ms) both;
}

@keyframes site-motion-rise {
    from {
        opacity: 0;
        translate: 0 26px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .site-motion-character,
    .site-motion-label__inner,
    .site-motion-reveal {
        animation: none !important;
        transition: none !important;
    }

    html.motion-ready .site-motion-heading .site-motion-character,
    html.motion-ready .site-motion-label .site-motion-label__inner,
    html.motion-ready .site-motion-reveal {
        width: auto;
        overflow: visible;
        opacity: 1;
        translate: 0 0;
        transform: none;
    }
}

@media print {
    .site-motion-character,
    .site-motion-label__inner,
    .site-motion-reveal,
    [class*="motion-character"],
    [class*="motion-kicker"],
    [class*="motion-item"] {
        width: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        translate: 0 0 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}