/* Короткие переходы поддерживают действие; содержимое доступно сразу.
   Высота details анимируется Web Animations API в app.js без style-атрибутов. */
:root {
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}
@keyframes motion-page-in { from { transform: translateY(6px); } to { transform: none; } }
@keyframes motion-refresh { from { opacity: .55; } to { opacity: 1; } }
@keyframes motion-press { 50% { transform: translateY(1px); } }
@keyframes motion-value { 50% { border-color: var(--accent); } }
@keyframes motion-toggle { 50% { background-color: var(--surface-2); } }
@keyframes motion-count { from { opacity: .5; } to { opacity: 1; } }
@keyframes motion-theme { from { transform: rotate(-20deg); } to { transform: none; } }
@keyframes motion-dialog-in { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes motion-loader-track { from { transform: translateX(-75%); } to { transform: translateX(75%); } }

/* Одно появление для страницы. Меню, строки и кнопки не прыгают по очереди. */
html.motion-ready .content { animation: motion-page-in var(--motion-base) var(--motion-ease); }
html.motion-ready .motion-refresh { animation: motion-refresh var(--motion-base) ease !important; }
html.motion-ready .motion-press { animation: motion-press var(--motion-fast) ease !important; }
html.motion-ready .motion-value { animation: motion-value var(--motion-base) ease !important; }
html.motion-ready .motion-toggle { animation: motion-toggle var(--motion-fast) ease !important; }
html.motion-ready .motion-count { animation: motion-count var(--motion-fast) ease !important; }
html.motion-ready .motion-theme { animation: motion-theme var(--motion-base) ease !important; }
html.motion-ready :is(.btn, button, summary, .chip, .mobile-nav a) {
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease,
    color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
html.motion-ready dialog[open] { animation: motion-dialog-in var(--motion-base) var(--motion-ease); }
html.motion-ready dialog[open]::backdrop { animation: motion-refresh var(--motion-base) ease; }
html.motion-ready .disclosure-animating { overflow: clip; }
/* Закрытие уже началось: знак соответствует запрошенному состоянию. */
.claim-panel.is-closing > summary::after,
.claim-panel.is-closing > [data-panel-disclosure] > summary::after { content: "+"; }
#loader { transition: opacity var(--motion-fast) ease, visibility var(--motion-fast) ease; }
html.motion-ready .loader-track i { animation: motion-loader-track 900ms ease-in-out infinite alternate; }
body.loaded #loader * { animation: none !important; }
.motion-submitting { position: relative; cursor: progress; }
.btn.motion-submitting::before { display: none; }
.motion-submitting::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px;
  height: 2px; border-radius: 2px; background: currentColor; opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready *, html.motion-ready *::before, html.motion-ready *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}