/**
 * Shared UI motion, loaded after page styles by includes/header.php.
 * Only components verified in the actual PHP/JS templates are listed here.
 * No layout/theme overrides, scroll reveals, persistent layers or JS required.
 *
 * Existing motion stays owned by editor.css: module-hud, editor-hint, toast,
 * bv-pop, proj-pop and pc-sec/pc-row disclosure bodies. projects.css owns
 * project cards and the people/category dropdown; none are selected below.
 *
 * Hidden/removed dialogs still close immediately: never keep their fields
 * focusable during a CSS display transition or delay an existing close handler.
 */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes site-ui-appear {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Editors + BAZIS: materials, estimates, drawings, cut lists, wardrobe
     configuration, cut-plan viewer and review form. Chat/admin use their
     concrete dialog IDs rather than a site-wide .modal catch-all. */
  :where(
    .material-modal,
    .cut-modal,
    .cp-modal,
    .review-modal,
    #newThread.modal,
    #pdModal.pd-modal
  ):not([hidden]) {
    animation: site-ui-appear 160ms ease-out;
  }

  /* Existing anchored UI menus; positions and scene geometry are untouched. */
  :where(
    .plus-menu,
    .material-cmp-pop,
    .hud-hpic-pop,
    .frb-hpop,
    .pc-panel
  ):not([hidden]):not(:empty) {
    animation: site-ui-appear 140ms ease-out;
  }

  /* Public portfolio category filtering. No staggering or movement, and
     [hidden] keeps its existing immediate removal from layout/focus order. */
  #pfGrid.grid-portfolio-full > .pf-card:not([hidden]) {
    animation: site-ui-appear 160ms ease-out;
  }

  /* Actual admin tab states and shared form success/error messages. */
  :where(.adm-pane.is-active, .pd-view:not([hidden])) {
    animation: site-ui-appear 160ms ease-out;
  }
  .form-note:is(.is-ok, .is-err):not(:empty),
  .auth-card > .alert-error {
    animation: site-ui-appear 140ms ease-out;
  }

  /* This help paragraph is absolutely positioned; do not give it an
     expanding/clipping container like an in-flow disclosure. */
  .pd-help[open] > p {
    animation: site-ui-appear 140ms ease-out;
  }

  @media (max-width: 860px) {
    .site-header > .navlinks-mobile.is-open {
      animation: site-ui-appear 160ms ease-out;
    }
  }

  /* Native disclosure enhancement only for BAZIS settings and admin warning
     details. Unsupported browsers keep their normal, fully usable toggle.
     Keep native content-visibility on close: hidden form fields must become
     unavailable immediately, rather than linger during a discrete transition.
     https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::details-content */
  @supports selector(details::details-content) {
    :is(details.frb-more, details.pd-warns)::details-content {
      opacity: 0;
      transition: opacity 160ms ease-out;
    }
    :is(details.frb-more, details.pd-warns)[open]::details-content {
      opacity: 1;
    }

    /* No guessed max-height: the native content expands to its actual size.
       Scope interpolate-size locally so it cannot affect the canvas/editor. */
    @supports (interpolate-size: allow-keywords) {
      :is(details.frb-more, details.pd-warns) {
        interpolate-size: allow-keywords;
      }
      :is(details.frb-more, details.pd-warns)::details-content {
        height: 0;
        overflow: clip;
        transition: height 200ms ease-out, opacity 160ms ease-out;
      }
      :is(details.frb-more, details.pd-warns)[open]::details-content {
        height: auto;
      }
    }
  }
}

/* All rules above are opt-in for no-preference and screen only. Reduced motion
   and print use the original component styles, without a transient opacity or
   a collapsed height left behind. No JS ever hides initial page content. */