/* Shared motion language. Content is visible without animation or JavaScript. */
:root {
  --motion-feedback: 120ms;
  --motion-panel: 180ms;
  --motion-overlay: 220ms;
  --motion-exit: 140ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

@keyframes torgi-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes torgi-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes torgi-dialog-in {
  from { opacity: 0; transform: translateY(var(--motion-dialog-y, 6px)) scale(var(--motion-dialog-scale, .985)); }
  to { opacity: 1; transform: none; }
}
@keyframes torgi-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Native navigation keeps links, history, scroll restoration and form guards. */
  @view-transition { navigation: auto; }
  ::view-transition { pointer-events: none; }
  ::view-transition-old(root) { animation: torgi-fade-out var(--motion-exit) ease-out both; }
  ::view-transition-new(root) { animation: torgi-fade-in var(--motion-panel) var(--motion-ease) both; }
  .workspace > .nav { view-transition-name: workspace-header; }
  .workspace-rail { view-transition-name: workspace-rail; }
  .mobile-nav { view-transition-name: workspace-tabs; }
  ::view-transition-group(workspace-header),
  ::view-transition-group(workspace-rail),
  ::view-transition-group(workspace-tabs) { animation-duration: 0s; }
  ::view-transition-old(workspace-header), ::view-transition-new(workspace-header),
  ::view-transition-old(workspace-rail), ::view-transition-new(workspace-rail),
  ::view-transition-old(workspace-tabs), ::view-transition-new(workspace-tabs) { animation: none; }

  /* Quick state feedback without moving controls or tabular numbers. */
  :is(.button, .btn, .lc-btn, .tab, .rail-link, .lc-tab, .law-option,
      .account-panel a, .account-panel button, .account-menu > summary,
      .mobile-nav a, .mobile-nav button, .choice-options label,
      [data-bp-area], [data-person-step], [data-guide-step]) {
    transition: background-color var(--motion-feedback) ease-out,
      border-color var(--motion-feedback) ease-out, color var(--motion-feedback) ease-out;
  }
  :is(.button, .btn, .lc-btn):active:not(:disabled):not([aria-disabled="true"]) { opacity: .85; }
  .account-chevron, .law-picker-arrow { transition: transform var(--motion-feedback) var(--motion-ease); }
  .account-menu[open] > .account-panel, .law-picker[open] > .law-picker-panel {
    animation: torgi-menu-in var(--motion-panel) var(--motion-ease);
    transform-origin: top right;
  }
  :is(#econform, #feeform, #bp-person, #bp-selected-person, #mpop,
      #favorite-share-result, .fb-done):not([hidden]) {
    animation: torgi-fade-in var(--motion-panel) var(--motion-ease);
  }
  @supports selector(details::details-content) {
    details[open]:not(.account-menu):not(.law-picker)::details-content {
      animation: torgi-fade-in var(--motion-panel) var(--motion-ease);
    }
  }

  /* Entry fallback; closing remains native in browsers without discrete transitions. */
  dialog[open] { animation: torgi-dialog-in var(--motion-overlay) var(--motion-ease); }
  dialog[open]::backdrop { animation: torgi-fade-in var(--motion-overlay) ease-out; }
  dialog.choice-dialog { --motion-dialog-y: 0px; --motion-dialog-scale: 1; }
  dialog.photo-dialog { --motion-dialog-y: 0px; --motion-dialog-scale: .98; }

  @supports (transition-behavior: allow-discrete) {
    dialog {
      opacity: 0;
      transform: translateY(var(--motion-dialog-y, 6px)) scale(var(--motion-dialog-scale, .985));
      transition: opacity var(--motion-exit) ease-out,
        transform var(--motion-exit) ease-out,
        display var(--motion-exit) allow-discrete, overlay var(--motion-exit) allow-discrete;
    }
    dialog:not([open]) { pointer-events: none; }
    dialog[open] {
      animation: none;
      opacity: 1;
      transform: none;
      transition-duration: var(--motion-overlay);
      transition-timing-function: var(--motion-ease);
    }
    dialog::backdrop {
      opacity: 0;
      transition: opacity var(--motion-exit) ease-out,
        display var(--motion-exit) allow-discrete, overlay var(--motion-exit) allow-discrete;
    }
    dialog[open]::backdrop { animation: none; opacity: 1; transition-duration: var(--motion-overlay); }
    @starting-style {
      dialog[open] {
        opacity: 0;
        transform: translateY(var(--motion-dialog-y, 6px)) scale(var(--motion-dialog-scale, .985));
      }
      dialog[open]::backdrop { opacity: 0; }
    }
  }

  @media (max-width: 900px) {
    dialog.mobile-menu { --motion-dialog-y: 24px; --motion-dialog-scale: 1; }
    /* Delay visibility only on exit, so the existing filter sheet can slide closed. */
    body .filters {
      transition: transform var(--motion-overlay) var(--motion-ease),
        visibility 0s linear var(--motion-overlay);
    }
    body.filters-open .filters { transition-delay: 0s; }
    body .scrim { transition: opacity var(--motion-exit) ease-out; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Переход между страницами кабинета (motion.js → html.is-navigating): бегущая полоска под шапкой, проявляется через 150 мс */
@keyframes torgi-nav-progress { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
html.is-navigating body::after {
  content: ""; position: fixed; left: 0; top: var(--header-height, 64px); z-index: 130; width: 40%; height: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, rgba(45, 116, 218, 0), var(--torgi-primary-blue, #2D74DA)); pointer-events: none;
  opacity: 0; animation: torgi-fade-in var(--motion-panel) ease 150ms forwards, torgi-nav-progress 1.1s var(--motion-ease) 150ms infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.is-navigating body::after { width: 100%; background: var(--torgi-soft-sky, #DCEAFB); animation: torgi-fade-in 1ms linear 150ms forwards; }
}