/* Content stays visible unless the local motion controller prepares an element. */
.regal { --r-reveal-distance: 32px; }
.regal .r-home-hero { --r-reveal-distance: 40px; }
.regal .r-reveal-pending,
.regal .r-reveal-active {
    --r-reveal-x: 0px;
    --r-reveal-y: var(--r-reveal-distance);
}
.regal .r-reveal-left { --r-reveal-x: -24px; --r-reveal-y: 0px; }
.regal .r-reveal-right { --r-reveal-x: 24px; --r-reveal-y: 0px; }
.regal .r-reveal-down { --r-reveal-y: calc(-1 * var(--r-reveal-distance)); }

@media (prefers-reduced-motion: no-preference) {
    .regal .r-reveal-pending {
        opacity: 0;
        translate: var(--r-reveal-x) var(--r-reveal-y);
    }
    .regal .r-reveal-active {
        animation: r-enter 700ms cubic-bezier(.22, 1, .36, 1) var(--r-reveal-delay, 0ms) both;
        will-change: opacity, translate;
    }
}

@keyframes r-enter {
    from { opacity: 0; translate: var(--r-reveal-x) var(--r-reveal-y); }
    to { opacity: 1; translate: 0 0; }
}

@media (max-width: 767px) {
    .regal { --r-reveal-distance: 22px; }
    .regal .r-home-hero { --r-reveal-distance: 26px; }
    /* Vertical motion keeps narrow screens within their horizontal bounds. */
    .regal .r-reveal-left,
    .regal .r-reveal-right { --r-reveal-x: 0px; --r-reveal-y: var(--r-reveal-distance); }
}

@media (prefers-reduced-motion: reduce), print {
    .regal .r-reveal-pending,
    .regal .r-reveal-active {
        opacity: 1 !important;
        translate: none !important;
        animation: none !important;
        will-change: auto;
    }
}