/*
 * Eriş Motion System
 * Progressive enhancement only: content stays visible until JavaScript marks it.
 * The individual translate/scale properties preserve component hover transforms.
 */
:root {
    --eris-motion-duration: 780ms;
    --eris-motion-ease: cubic-bezier(.22, 1, .36, 1);
}
.motion-enabled .eris-motion-item {
    --eris-motion-x: 0px;
    --eris-motion-y: 26px;
    --eris-motion-scale: 1;
    --eris-motion-delay: 0ms;
    backface-visibility: hidden;
}

.motion-enabled .eris-motion-item[data-motion-variant="left"] {
    --eris-motion-x: -34px;
    --eris-motion-y: 10px;
}

.motion-enabled .eris-motion-item[data-motion-variant="right"] {
    --eris-motion-x: 34px;
    --eris-motion-y: 10px;
}

.motion-enabled .eris-motion-item[data-motion-variant="scale"] {
    --eris-motion-y: 18px;
    --eris-motion-scale: .965;
}

.motion-enabled .eris-motion-item[data-motion-state="pending"] {
    opacity: 0;
    translate: var(--eris-motion-x) var(--eris-motion-y);
    scale: var(--eris-motion-scale);
    will-change: opacity, translate, scale;
}

.motion-enabled .eris-motion-item[data-motion-state="visible"] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition:
        opacity var(--eris-motion-duration) var(--eris-motion-ease) var(--eris-motion-delay),
        translate var(--eris-motion-duration) var(--eris-motion-ease) var(--eris-motion-delay),
        scale var(--eris-motion-duration) var(--eris-motion-ease) var(--eris-motion-delay);
}

/* A small brass rule gives section introductions a deliberate, engineered cadence. */
.motion-enabled .eris-motion-heading {
    position: relative;
}

.motion-enabled .eris-motion-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.55rem;
    width: min(5.5rem, 24%);
    height: 1px;
    background: linear-gradient(90deg, rgba(224, 202, 141, .82), rgba(224, 202, 141, 0));
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    transition:
        transform 920ms var(--eris-motion-ease) calc(var(--eris-motion-delay) + 120ms),
        opacity 520ms ease calc(var(--eris-motion-delay) + 120ms);
    pointer-events: none;
}

.motion-enabled .eris-motion-heading[data-motion-state="visible"]::after {
    transform: scaleX(1);
    opacity: 1;
}

@media (max-width: 767px) {
    :root {
        --eris-motion-duration: 660ms;
    }

    .motion-enabled .eris-motion-item[data-motion-variant="left"],
    .motion-enabled .eris-motion-item[data-motion-variant="right"] {
        --eris-motion-x: 0px;
        --eris-motion-y: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eris-motion-item,
    .motion-enabled .eris-motion-item {
        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
        transition: none !important;
        will-change: auto !important;
    }

    .motion-enabled .eris-motion-heading::after {
        transform: scaleX(1);
        opacity: 1;
        transition: none;
    }
}