/* Opted-in screens use the Settings page's heading/content entrance.
   The outer wrapper stays opaque and untransformed: fading it made the entire
   canvas brighten at once, while AJAX content arriving later simply snapped in.
   Keep legacy slides off, but leave popups and dedicated bar animations alone. */
.page-motion-content :is(.slideInDown, .slideInLeft, .slideInRight, .slideInUp, .fadeIn, .fadeInDown, .fadeInUp, .zoomIn):not(:where(.modal, .modal *, .dropdown-menu, .dropdown-menu *, .popover, .popover *)) {
    animation: none;
}

/* Profile's manual tab handler activates panes with "active show", whereas
   Bootstrap's old fade expects "in". Let the single entrance below own the
   visual effect, so every tab (including accordion/default/deep-linked tabs)
   is visible without a competing fade. Keep Bootstrap's display rules and
   all nested tab/modal transitions untouched. The left navigation is not a
   motion target. */
.page-motion-content .profile-settings-tabs > .tab-pane {
    opacity: 1;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .page-motion-content .page-heaad1 {
        animation: dl-page-section-enter 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    /* Explicit, non-nested content regions, not every card/row. The AJAX
       selectors target new result wrappers, so their entrance starts when the
       real content arrives rather than finishing on an empty container.
       Skeletons remain visible; individual row/status updates do not replay it. */
    .page-motion-content .page-motion-section,
    .page-motion-content #dashboard_div > :is(.dasboard_top_section, .work_task_timesection),
    .page-motion-content #tasks_div > :is(.mytask_added_sc, main),
    .page-motion-content #projectTableDiv > :is(table.cell, .div-table),
    .page-motion-content .profile-settings-tabs > .tab-pane.active,
    .page-motion-content #my_account.ac-motion-ready .ac-section:not([hidden]),
    .page-motion-content #my_account.ac-motion-ready[data-section="google_calendar"] #google_calendar_panel,
    .page-motion-content #ticket-system .tk-pane:not([hidden]):not(.tk-pane--list),
    .page-motion-content #ticket-system .tk-pane--list:not([hidden]) .tk-toolbar,
    .page-motion-content #ticket-system .tk-pane--list:not([hidden]) #ticket_box > :not([aria-busy="true"]):not(.sr-only) {
        animation: dl-page-section-enter 460ms cubic-bezier(0.22, 1, 0.36, 1) 40ms backwards;
    }
}

/* Identical movement and timing to settings-motion.css. Backwards fill holds
   the initial frame during the short delay; no forwards fill keeps popup
   positioning and stacking normal after the entrance. */
@keyframes dl-page-section-enter {
    from {
        opacity: 0;
        translate: 0 6px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}