/*
  ----------------------------------------
  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: var(--ui-duration-move);
        animation-timing-function: var(--ui-ease);
    }

    /* 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) {
        animation-timing-function: var(--ui-ease-move);
        animation-duration: var(--ui-duration-move);
    }

    ::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-forms {
        view-transition-name: pwa-primary-forms;
    }

    .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-forms),
    ::view-transition-new(pwa-primary-forms),
    ::view-transition-old(pwa-primary-support),
    ::view-transition-new(pwa-primary-support) {
        animation-duration: var(--ui-duration-fast);
        animation-timing-function: var(--ui-ease);
    }

    @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 {
        --ui-sheet-offset: var(--space-lg);
        transform-origin: bottom center;
    }

    /* Custom CSS: the project tray opens downward from its header and exits upward. */
    .ui-project-tray {
        --ui-sheet-offset: calc(-1 * var(--space-lg));
        transform-origin: top center;
    }

    .ui-form-picker[open],
    .ui-project-tray-dialog[open] .ui-project-tray {
        animation: ui-form-picker-enter var(--ui-duration-move)
            var(--ui-ease-move) both;
    }

    .ui-form-picker[open]::backdrop,
    .ui-project-tray-dialog[open] {
        animation: ui-form-picker-backdrop-enter var(--ui-duration-fast) var(--ui-ease) both;
    }

    .ui-form-picker[open][data-dialog-closing="true"],
    .ui-project-tray-dialog[open][data-dialog-closing="true"] .ui-project-tray {
        animation: ui-form-picker-exit var(--ui-duration-fast)
            var(--ui-ease-move) both;
    }

    .ui-form-picker[open][data-dialog-closing="true"]::backdrop,
    .ui-project-tray-dialog[open][data-dialog-closing="true"] {
        animation: ui-form-picker-backdrop-exit var(--ui-duration-fast) var(--ui-ease) both;
    }

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

        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(var(--ui-form-picker-drag, 0));
        }

        to {
            opacity: 0.82;
            transform: translateY(var(--ui-sheet-offset));
        }
    }

    @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,
        .ui-project-tray-dialog[open],
        .ui-project-tray-dialog[open] .ui-project-tray,
        .ui-project-tray-dialog[open][data-dialog-closing="true"],
        .ui-project-tray-dialog[open][data-dialog-closing="true"] .ui-project-tray {
            animation: none;
        }
    }

    /* Custom CSS: pointer-driven picker movement and snap-back cannot be
       expressed with Prewind. Keep motion rules here and respect reduced motion. */
    [data-form-picker-interacted="true"][open]:not([data-dialog-closing="true"]) {
        animation: none;
        transform: translateY(var(--ui-form-picker-drag, 0));
        transition: transform var(--ui-duration-fast) var(--ui-ease-move);
    }
    [data-form-picker-interacted="true"][open]:not([data-dialog-closing="true"])[data-form-picker-dragging="true"] { transition: none; }
    [data-form-picker-drag-dismiss="true"] { --ui-sheet-offset: 100%; }
    [data-form-picker-reduced-motion="true"][open],
    [data-form-picker-reduced-motion="true"][open]::backdrop { animation: none !important; transition: none !important; }
    @media (prefers-reduced-motion: reduce) {
        [data-form-picker-interacted="true"][open]:not([data-dialog-closing="true"]) { transition: none; }
    }

    /* Custom CSS: pointer-driven FAB settling is motion that belongs here, not
       in component styles. Reduced motion removes the settle transition because
       the controller snaps directly to the selected side. */
    .ui-fab.is-settling {
        transition: transform var(--ui-duration-move) var(--ui-ease-move);
    }

    @media (prefers-reduced-motion: reduce) {
        .ui-fab.is-settling {
            transition-duration: var(--ui-duration-reduced);
        }
    }

    /* Fade in */
    .fade-in {
        animation: fade-in var(--ui-ease) var(--ui-duration-move);
    }
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Fade out */
    .fade-out {
        animation: fade-out var(--ui-ease) var(--ui-duration-move) 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 var(--ui-ease-move) var(--ui-duration-move);
    }
    @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);
        }
    }

    /* Custom CSS: Prewind has no animation utilities. Section chevrons point
       down closed and up open; reduced motion removes the turn transition. */
    .ui-form-section-chevron {
        transition: transform var(--ui-duration-fast) var(--ui-ease);
    }

    .ui-form-section[open] > .ui-form-section-summary .ui-form-section-chevron,
    .ui-form-section-more[open] > .ui-form-section-summary .ui-form-section-chevron {
        transform: rotate(180deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .ui-form-section-chevron {
            transition: none;
        }
    }
}

/* Selection lifts a pill without changing its meaning; respect reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ui-map-marker-face { transition: transform var(--ui-duration-fast) var(--ui-ease-move), box-shadow var(--ui-duration-fast) var(--ui-ease); }
}