/*
  ----------------------------------------
  Transitions
  ----------------------------------------
*/

@layer styles {
    /* Crossfade main content (different IDs prevent cross-layout transitions) */
    #user-main {
        view-transition-name: user-main;
    }
    #admin-main {
        view-transition-name: admin-main;
    }
    ::view-transition-old(user-main),
    ::view-transition-new(user-main),
    ::view-transition-old(admin-main),
    ::view-transition-new(admin-main) {
        animation-duration: 300ms;
        animation-timing-function: ease-in-out;
    }

    /* Active nav underline animation */
    .nav-link.active::after {
        view-transition-name: active-nav;
    }

    .ui-pwa-tab.active::after {
        view-transition-name: active-pwa-tab;
    }

    .ui-project-desktop-tab.is-active::after,
    .ui-inventory-desktop-tab.is-active::after {
        view-transition-name: active-pwa-tab;
    }

    ::view-transition-group(active-nav),
    ::view-transition-group(active-pwa-tab) {
        /* Sweet easing function (source: https://easingwizard.com) */
        animation-timing-function: linear(
            0,
            0.383 7.5%,
            0.68 15.5%,
            0.891 24%,
            0.969 28.6%,
            1.027 33.4%,
            1.061 37.4%,
            1.084 41.7%,
            1.097 46.2%,
            1.1 51.2%,
            1.085 59.9%,
            1.014 84.2%,
            1
        );
        animation-duration: 320ms;
    }

    ::view-transition-old(active-nav),
    ::view-transition-new(active-nav),
    ::view-transition-old(active-pwa-tab),
    ::view-transition-new(active-pwa-tab) {
        height: 100%;
    }

    /* PWA primary navigation active-state crossfade */
    .ui-pwa-primary-navigation .ui-pwa-bottom-action-projects {
        view-transition-name: pwa-primary-projects;
    }

    .ui-pwa-primary-navigation .ui-pwa-bottom-action-team {
        view-transition-name: pwa-primary-team;
    }

    .ui-pwa-primary-navigation .ui-pwa-bottom-action-inventory {
        view-transition-name: pwa-primary-inventory;
    }

    .ui-pwa-primary-navigation .ui-pwa-bottom-action-support {
        view-transition-name: pwa-primary-support;
    }

    ::view-transition-old(pwa-primary-projects),
    ::view-transition-new(pwa-primary-projects),
    ::view-transition-old(pwa-primary-team),
    ::view-transition-new(pwa-primary-team),
    ::view-transition-old(pwa-primary-inventory),
    ::view-transition-new(pwa-primary-inventory),
    ::view-transition-old(pwa-primary-support),
    ::view-transition-new(pwa-primary-support) {
        animation-duration: 180ms;
        animation-timing-function: ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .ui-pwa-primary-navigation .ui-pwa-bottom-action {
            view-transition-name: none;
            transition: none;
        }
    }

    /* Custom CSS: Prewind has no animation utilities. Preserve the form picker's
       entrance, faster exit, backdrop fades, and reduced-motion behavior. */
    .ui-form-picker {
        transform-origin: bottom center;
    }

    .ui-form-picker[open] {
        animation: ui-form-picker-enter 300ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .ui-form-picker[open]::backdrop {
        animation: ui-form-picker-backdrop-enter 220ms ease-out both;
    }

    .ui-form-picker[open][data-dialog-closing="true"] {
        animation: ui-form-picker-exit 160ms
            cubic-bezier(0.4, 0, 1, 1) both;
    }

    .ui-form-picker[open][data-dialog-closing="true"]::backdrop {
        animation: ui-form-picker-backdrop-exit 140ms ease-in both;
    }

    @keyframes ui-form-picker-enter {
        from {
            opacity: 0.9;
            transform: translateY(var(--space-lg));
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes ui-form-picker-backdrop-enter {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes ui-form-picker-exit {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0.82;
            transform: translateY(var(--space-lg));
        }
    }

    @keyframes ui-form-picker-backdrop-exit {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ui-form-picker[open],
        .ui-form-picker[open]::backdrop,
        .ui-form-picker[open][data-dialog-closing="true"],
        .ui-form-picker[open][data-dialog-closing="true"]::backdrop {
            animation: none;
        }
    }

    /* Fade in */
    .fade-in {
        animation: fade-in ease 400ms;
    }
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Fade out */
    .fade-out {
        animation: fade-out ease 300ms forwards;
    }
    @keyframes fade-out {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    /* Ephemeral (fade in quickly, then fade out after n seconds) */
    @keyframes ephemeral {
        0%,
        100% {
            opacity: 0;
        }
        5%,
        70% {
            opacity: 1;
        }
    }

    /* Fly in */
    .fly-in {
        animation: fly-in ease-out 400ms;
    }
    @keyframes fly-in {
        from {
            opacity: 0;
            transform: translateY(-3%);
            transform-origin: center;
        }

        to {
            opacity: 1;
            transform: translateY(0);
            transform-origin: center;
        }
    }

    @keyframes ui-camera-photo-queue-pop {
        0% {
            opacity: 0;
            transform: translateY(0.3rem) scale(0.82);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes ui-project-photo-upload-handoff-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes ui-project-photo-upload-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes ui-speech-dictation-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes ui-project-photo-offline-panel-in {
        0% {
            opacity: 0;
            transform: translateY(0.6rem);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes ui-projects-load-more-spin {
        to {
            transform: rotate(360deg);
        }
    }
}