/*
  ----------------------------------------
  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 {
        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%;
    }

    /* 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;
        }
    }

    /* Data-collection keypad native-keyboard transition */
    .ui-measurement-keypad-shell {
        opacity: 1;
        transition:
            max-height 220ms ease,
            opacity 160ms ease;
    }

    .ui-measurement-keypad-shell .ui-measurement-keypad {
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity 140ms ease,
            transform 180ms ease;
    }

    .ui-measurement-keypad-shell.is-native-keyboard-open {
        opacity: 0;
        transition:
            max-height 180ms ease 90ms,
            opacity 140ms ease 80ms;
    }

    .ui-measurement-keypad-shell.is-native-keyboard-open
        .ui-measurement-keypad {
        opacity: 0;
        transform: translateY(100%);
        transition:
            opacity 120ms ease,
            transform 180ms ease;
    }
}