/* Decorative sky only: shared by all pages, independent of procurement clocks. */
.mt-cosmic-bg__image,
.mt-cosmic-bg::before {
    animation-delay: var(--mt-sky-phase, 0s);
}

.mt-cosmic-bg::after {
    animation: mt-star-drift 78s linear infinite alternate-reverse,
        mt-star-breathe 9s ease-in-out infinite alternate;
    animation-delay: var(--mt-sky-phase, 0s), var(--mt-sky-phase, 0s);
}

@keyframes mt-star-breathe {
    from { opacity: 0.24; }
    to { opacity: 0.44; }
}

.mt-cosmic-bg.is-paused .mt-cosmic-bg__image,
.mt-cosmic-bg.is-paused::before,
.mt-cosmic-bg.is-paused::after {
    animation-play-state: paused;
}

/* Individual translate composes with the existing slow drift transforms. */
.mt-cosmic-bg__media,
.mt-cosmic-bg::before,
.mt-cosmic-bg::after {
    transition: translate 0.65s cubic-bezier(0.2, 0.65, 0.25, 1);
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .mt-cosmic-bg.is-pointer-reactive .mt-cosmic-bg__media {
        translate: calc(var(--mt-sky-pointer-x, 0) * 8px) calc(var(--mt-sky-pointer-y, 0) * 6px);
    }

    .mt-cosmic-bg.is-pointer-reactive::before {
        translate: calc(var(--mt-sky-pointer-x, 0) * 18px) calc(var(--mt-sky-pointer-y, 0) * 12px);
    }

    .mt-cosmic-bg.is-pointer-reactive::after {
        translate: calc(var(--mt-sky-pointer-x, 0) * 28px) calc(var(--mt-sky-pointer-y, 0) * 20px);
    }
}

/* Progressive enhancement: normal links/forms remain untouched in all browsers. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    :root {
        view-transition-name: none;
    }

    .mt-cosmic-bg {
        view-transition-name: mt-cosmic-backdrop;
    }

    ::view-transition {
        pointer-events: none;
    }

    ::view-transition-group(mt-cosmic-backdrop),
    ::view-transition-old(mt-cosmic-backdrop),
    ::view-transition-new(mt-cosmic-backdrop) {
        animation-duration: 0.25s;
        animation-timing-function: ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .mt-cosmic-bg::after {
        animation: none;
        transform: none;
    }

    .mt-cosmic-bg__media,
    .mt-cosmic-bg::before,
    .mt-cosmic-bg::after {
        translate: none;
        transition: none;
    }
}