/*
 * PHASE Step 4B.6 global motion runtime.
 *
 * This layer only supplies registered global primitives. Content is visible,
 * readable, and operable before JavaScript. Page timelines, route transitions,
 * scroll-linked motion, and third-party motion libraries are not authorized.
 */

/* =========================================================
 * MOTION FAMILY PARAMETERS
 * ====================================================== */

:where(
    .motion-system,
    .phase-motion-system
) {
    --motion-duration: var(--motion-system-standard);
    --motion-ease: var(--ease-system-out);
}

:where(
    .motion-system-fast,
    .phase-motion-system--fast
) {
    --motion-duration: var(--motion-system-fast);
}

:where(
    .motion-system-instant,
    .phase-motion-system--instant
) {
    --motion-duration: var(--motion-system-instant);
}

:where(
    .motion-system-slow,
    .phase-motion-system--deliberate
) {
    --motion-duration: var(--motion-system-slow);
}

:where(
    .motion-mutation,
    .phase-motion-mutation,
    [data-phase-motion="mutation"]
) {
    --motion-duration: var(--motion-mutation-standard);
    --motion-ease: var(--ease-mutation-out);
}

:where(
    .motion-mutation-fast,
    .phase-motion-mutation--fast
) {
    --motion-duration: var(--motion-mutation-fast);
}

:where(
    .motion-mutation-slow,
    .phase-motion-mutation--deliberate
) {
    --motion-duration: var(--motion-mutation-slow);
}

/*
 * Parameter classes intentionally do not assign a transition property.
 * Registered consumers below must name every property explicitly.
 */

/* =========================================================
 * REGISTERED SYSTEM MOTION
 * ====================================================== */

.prose a,
.link {
    transition:
        text-decoration-thickness
            var(--motion-system-fast)
            var(--ease-system-out),
        text-underline-offset
            var(--motion-system-fast)
            var(--ease-system-out);
}

.button,
.control {
    transition:
        color
            var(--motion-button-duration)
            var(--ease-system-out),
        background-color
            var(--motion-button-duration)
            var(--ease-system-out),
        border-color
            var(--motion-button-duration)
            var(--ease-system-out),
        text-decoration-color
            var(--motion-button-duration)
            var(--ease-system-out),
        translate
            var(--motion-system-instant)
            var(--ease-system-out);
}

.primary-navigation a {
    transition:
        color
            var(--motion-system-fast)
            var(--ease-system-out),
        text-decoration-thickness
            var(--motion-system-fast)
            var(--ease-system-out),
        text-underline-offset
            var(--motion-system-fast)
            var(--ease-system-out);
}

.navigation-toggle__indicator {
    transition:
        transform
            var(--motion-nav-duration)
            var(--ease-system-out);
}

.native-disclosure > summary::after,
.motion-disclosure > summary::after {
    inline-size: var(--space-2);
    block-size: var(--space-2);
    margin-inline-start: auto;
    border: solid currentColor;
    border-width:
        0
        var(--border-width-1)
        var(--border-width-1)
        0;
    content: "";
    transform: rotate(45deg);
    transform-origin: center;
    transition:
        transform
            var(--motion-disclosure-duration)
            var(--ease-system-out);
}

:where(
    .native-disclosure,
    .motion-disclosure
)[open] > summary::after {
    transform: rotate(-135deg);
}

.motion-mobile-panel__content {
    opacity: 1;
    transform: none;
    transition:
        opacity
            var(--motion-mobile-panel-duration)
            var(--ease-system-out),
        transform
            var(--motion-mobile-panel-duration)
            var(--ease-system-out);
}

/* =========================================================
 * REGISTERED MUTATION MOTION
 * ====================================================== */

.media-mutation {
    transform: none;
    transform-origin: center;
    transition:
        transform
            var(--motion-media-duration)
            var(--ease-mutation-out),
        border-radius
            var(--motion-media-duration)
            var(--ease-mutation-return);
}

.card {
    transition:
        border-color
            var(--motion-system-fast)
            var(--ease-system-out);
}

.card--media[data-phase-media-mutation]
.card__media > img {
    transform: none;
    transform-origin: center;
    transition:
        transform
            var(--motion-media-duration)
            var(--ease-mutation-out);
}

@media (hover: hover) and (pointer: fine) {
    .primary-navigation a:hover {
        text-decoration-thickness: 0.12em;
        text-underline-offset: 0.24em;
    }

    .media-mutation:hover {
        transform: scale(0.98);
    }

    .card:has(a:hover) {
        border-color: var(--border-strong);
    }

    .card--media[data-phase-media-mutation]:has(a:hover)
    .card__media > img {
        transform: scale(0.98);
    }
}

/*
 * Optional Observer enhancement: content never starts hidden. JavaScript may
 * apply the prepared state only to an explicitly registered element.
 */
.motion-reveal {
    opacity: 1;
    transform: none;
}

html.has-motion-enhancement
.motion-reveal[data-phase-observe].is-motion-ready {
    transition:
        transform
            var(--motion-observer-duration)
            var(--ease-mutation-out);
}

html.has-motion-enhancement
.motion-reveal[data-phase-observe].is-motion-ready:not(
    .is-motion-active
) {
    transform: translateY(var(--space-2));
}

html.has-motion-enhancement
.motion-reveal[data-phase-observe].is-motion-active {
    opacity: 1;
    transform: none;
}

/* =========================================================
 * ACCESSIBILITY AND USER-PREFERENCE OVERRIDES
 * ====================================================== */

html[data-phase-motion-preference="reduce"]
:where(
    .motion-system,
    .motion-mutation,
    .motion-reveal,
    .media-mutation,
    .motion-mobile-panel__content,
    .card,
    .card__media > img,
    .button
) {
    transition-property: none !important;
    transition-duration:
        var(--phase-motion-reduced-duration) !important;
    transition-delay:
        var(--phase-motion-reduced-delay) !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
}

html[data-phase-motion-preference="reduce"]
.motion-reveal {
    opacity: 1 !important;
    visibility: visible !important;
}

html[data-phase-motion-preference="reduce"]
.button:active,
html[data-phase-motion-preference="reduce"]
.control:active {
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    :where(
        .motion-system,
        .motion-mutation,
        .motion-reveal,
        .media-mutation,
        .card,
        .card__media > img,
        .motion-mobile-panel__content
    ) {
        transition-property: none !important;
        transition-duration:
            var(--phase-motion-reduced-duration) !important;
        transition-delay:
            var(--phase-motion-reduced-delay) !important;
        transform: none !important;
        translate: none !important;
        scale: none !important;
    }

    .motion-reveal {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .button:active,
    .control:active {
        translate: none;
    }
}