/*
=====================================================
AETHER SURFACE MOTION
=====================================================

One lifecycle grammar for every Aether material and
its content. Structural styles own geometry only.
=====================================================
*/


.aether-surface > .aether-surface-material {
    opacity: 0;
    filter: var(
        --aether-surface-enter-filter,
        contrast(1.12)
    );
    transition:
        opacity var(--aether-motion-surface-settle-duration) ease,
        filter var(--aether-motion-surface-background-filter-duration) ease;
}

.aether-surface.is-aether-surface-material-visible
> .aether-surface-material {
    opacity: 1;
    filter: var(--aether-surface-filter, none);
}

.aether-surface > .aether-surface-content-layer {
    opacity: 0;
    filter: blur(1px);
    transition:
        opacity var(--aether-motion-surface-settle-duration) ease,
        filter var(--aether-motion-surface-settle-duration) ease;
}

.aether-surface.is-aether-surface-content-visible
> .aether-surface-content-layer {
    opacity: 1;
    filter: none;
}

.aether-surface.aether-surface-self-material {
    opacity: 0;
}

.aether-surface.aether-surface-self-material.is-aether-surface-material-visible {
    opacity: 1;
}

.aether-surface.aether-surface-self-material.is-aether-surface-entering {
    animation:
        aether-surface-self-enter
        var(--aether-surface-entry-duration, var(--aether-motion-surface-settle-duration))
        var(--aether-surface-entry-easing, ease) both;
}

.aether-surface.has-aether-surface-positional-entry.is-aether-surface-entering > .aether-surface-material {
    transition-duration:
        var(--aether-surface-entry-duration),
        var(--aether-surface-entry-duration);
    transition-timing-function:
        var(--aether-surface-entry-easing),
        var(--aether-surface-entry-easing);
}

.aether-surface.has-aether-surface-positional-entry.is-aether-surface-entering > .aether-surface-content-layer {
    transition-duration:
        var(--aether-surface-entry-duration),
        var(--aether-surface-entry-duration);
    transition-timing-function:
        var(--aether-surface-entry-easing),
        var(--aether-surface-entry-easing);
}

.aether-surface.aether-surface-self-material.is-aether-surface-exiting {
    animation:
        aether-surface-self-exit
        var(--aether-motion-layer-exit-duration)
        ease both;
}

.aether-surface.has-aether-surface-positional-exit.aether-surface-self-material.is-aether-surface-exiting {
    animation-duration:
        var(--aether-surface-entry-duration);
    animation-timing-function:
        var(--aether-surface-entry-easing);
}

@keyframes aether-surface-self-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes aether-surface-self-exit {
    from { opacity: 1; }
    to { opacity: 0; }
}

.aether-surface.is-aether-surface-enter-prepared {
    pointer-events: none;
}


/*
Shared positional entry is opt-in. Modes configure the direction on a
surface; this primitive owns the transform and uses the existing surface
material/content fade for opacity.
*/
.aether-surface.has-aether-surface-positional-entry:is(
    .is-aether-surface-enter-prepared,
    .is-aether-surface-entering
),
.aether-surface.has-aether-surface-positional-exit:is(
    .is-aether-surface-exit-prepared,
    .is-aether-surface-exiting
) {
    transition:
        transform var(--aether-surface-entry-duration) var(--aether-surface-entry-easing);
}

.aether-surface.has-aether-surface-positional-entry.is-aether-surface-enter-prepared[data-aether-surface-enter-from="left"] {
    transform: translate3d(
        calc(-1 * var(--aether-surface-entry-distance, var(--aether-motion-interface-distance))),
        0,
        0
    );
}

.aether-surface.has-aether-surface-positional-entry.is-aether-surface-enter-prepared[data-aether-surface-enter-from="right"] {
    transform: translate3d(
        var(--aether-surface-entry-distance, var(--aether-motion-interface-distance)),
        0,
        0
    );
}

.aether-surface.has-aether-surface-positional-entry.is-aether-surface-enter-prepared[data-aether-surface-enter-from="up"] {
    transform: translate3d(
        0,
        calc(-1 * var(--aether-surface-entry-distance, var(--aether-motion-interface-distance))),
        0
    );
}

.aether-surface.has-aether-surface-positional-entry.is-aether-surface-enter-prepared[data-aether-surface-enter-from="down"] {
    transform: translate3d(
        0,
        var(--aether-surface-entry-distance, var(--aether-motion-interface-distance)),
        0
    );
}

.aether-surface.has-aether-surface-positional-entry.is-aether-surface-entering {
    transform: translate3d(0, 0, 0);
}

.aether-surface.has-aether-surface-positional-exit.is-aether-surface-exit-prepared {
    transform: translate3d(0, 0, 0);
}

.aether-surface.has-aether-surface-positional-exit.is-aether-surface-exiting[data-aether-surface-enter-from="left"] {
    transform: translate3d(
        calc(-1 * var(--aether-surface-entry-distance, var(--aether-motion-interface-distance))),
        0,
        0
    );
}

.aether-surface.has-aether-surface-positional-exit.is-aether-surface-exiting[data-aether-surface-enter-from="right"] {
    transform: translate3d(
        var(--aether-surface-entry-distance, var(--aether-motion-interface-distance)),
        0,
        0
    );
}

.aether-surface.has-aether-surface-positional-exit.is-aether-surface-exiting[data-aether-surface-enter-from="up"] {
    transform: translate3d(
        0,
        calc(-1 * var(--aether-surface-entry-distance, var(--aether-motion-interface-distance))),
        0
    );
}

.aether-surface.has-aether-surface-positional-exit.is-aether-surface-exiting[data-aether-surface-enter-from="down"] {
    transform: translate3d(
        0,
        var(--aether-surface-entry-distance, var(--aether-motion-interface-distance)),
        0
    );
}

.aether-info-surface.is-shifting
> .aether-surface-content-layer {
    transform: translate3d(14px, 0, 0);
    opacity: 0.14;
    filter: blur(1px);
}

@media (prefers-reduced-motion: reduce) {
    .aether-surface,
    .aether-surface > .aether-surface-material,
    .aether-surface > .aether-surface-content-layer {
        transition-duration: 1ms !important;
    }
}