/* RAVKI motion language. Palette, typography and layout stay in the existing styles. */
:root {
  --motion-fast: 120ms;
  --motion-standard: 200ms;
  --motion-slow: 320ms;
  --motion-page: 380ms;
  --motion-count: 480ms;
  --motion-chart: 560ms;
  --motion-stagger: 18ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@view-transition { navigation: auto; }
:root { view-transition-name: none; }
#main { view-transition-name: ravki-content; }
.sidebar { view-transition-name: ravki-sidebar; }
.topbar { view-transition-name: ravki-topbar; }
.sidebar nav a[aria-current="page"] { view-transition-name: ravki-active; }
::view-transition-group(ravki-content) { animation-duration: var(--motion-page); animation-timing-function: var(--motion-ease); }
::view-transition-old(ravki-content) { animation: ravki-page-out var(--motion-fast) ease-out both; }
::view-transition-new(ravki-content) { animation: ravki-page-in var(--motion-page) var(--motion-ease) both; }
::view-transition-group(ravki-sidebar), ::view-transition-group(ravki-topbar) { animation: none; }
::view-transition-old(ravki-sidebar), ::view-transition-old(ravki-topbar) { animation: none; opacity: 0; }
::view-transition-new(ravki-sidebar), ::view-transition-new(ravki-topbar) { animation: none; }
::view-transition-group(ravki-active) { animation-duration: var(--motion-standard); animation-timing-function: var(--motion-ease); }
::view-transition-old(ravki-active), ::view-transition-new(ravki-active) { animation-duration: var(--motion-fast); }
@keyframes ravki-page-out { to { opacity: 0; } }
@keyframes ravki-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ravki-assemble { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Elements remain readable when JS or animation support is unavailable. */
.motion-enter { animation: ravki-assemble var(--motion-slow) var(--motion-ease) both; animation-delay: var(--motion-delay, 0ms); }
.motion-row { animation: ravki-row-in var(--motion-standard) var(--motion-ease) both; animation-delay: var(--motion-delay, 0ms); }
@keyframes ravki-row-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.sidebar nav a { transition: background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), border-color var(--motion-standard) var(--motion-ease); }
button, .button, .menu-items > a, .report-tabs [role="tab"], summary {
  transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
}
input, select, textarea { transition: border-color var(--motion-fast) var(--motion-ease), outline-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
label, .helptext, .muted { transition: color var(--motion-fast) var(--motion-ease); }
.panel, .work-region, .report-section, .summary-band > *, .metrics > *, .property-pick, .compact-record {
  transition: transform var(--motion-standard) var(--motion-ease), box-shadow var(--motion-standard) var(--motion-ease);
}
tr, .record-row, .compact-record { transition: background-color var(--motion-fast) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .sidebar nav a:hover { transform: translateX(2px); }
  button:not(:disabled):not(.text-button):hover, .button:hover { transform: translateY(-1px); }
  .panel:not(details):not(:has(input:focus,textarea:focus,select:focus)):hover, .summary-band > a:hover, .metrics > a:hover, .property-pick:hover { transform: translateY(-2px); }
}
button:not(:disabled):active, .button:active { transform: scale(0.98); }
.summary-band > a:active, .metrics > a:active, .property-pick:active { transform: scale(0.99); }
button[aria-busy="true"] { opacity: .75; position: relative; }
/* Existing labels and button dimensions remain unchanged during loading. */
button[aria-busy="true"]::after { content: ""; position: absolute; right: 4px; top: 4px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor; animation: ravki-busy 1.4s ease-in-out infinite; }
@keyframes ravki-busy { 50% { opacity: .35; } }
.motion-skeleton { pointer-events: none; }
.motion-skeleton-line { display: block; height: 8px; margin: 10px 0; border-radius: 3px; background: currentColor; opacity: .09; animation: ravki-busy 1.6s ease-in-out infinite; }
.motion-skeleton-line:last-child { max-width: 65%; }
.motion-dragging { opacity: .7; }
.motion-drop-target { outline: 1px solid var(--accent); outline-offset: -1px; }
.motion-created { animation: ravki-created 1s var(--motion-ease); }
@keyframes ravki-created { 0%, 35% { box-shadow: inset 2px 0 var(--accent); } 100% { box-shadow: inset 0 0 transparent; } }
.motion-removing { pointer-events: none; }
.motion-calendar-next ::view-transition-new(ravki-content) { animation-name: ravki-calendar-next; }
.motion-calendar-prev ::view-transition-new(ravki-content) { animation-name: ravki-calendar-prev; }
@keyframes ravki-calendar-next { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes ravki-calendar-prev { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Keep opt-in stable during navigation; disabling it mid-flight rejects the
     browser's transition readiness. No animation is rendered in reduced mode. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  :root { --motion-fast: 1ms; --motion-standard: 1ms; --motion-slow: 1ms; --motion-page: 1ms; --motion-count: 1ms; --motion-chart: 1ms; --motion-stagger: 0ms; }
  .motion-enter, .motion-row, .motion-created, .motion-skeleton-line, button[aria-busy="true"]::after { animation: none !important; }
  .sidebar nav a:hover, button:hover, button:active, .button:hover, .button:active, .panel:hover, .summary-band > a:hover, .metrics > a:hover, .property-pick:hover, .property-pick:active { transform: none !important; }
}
@media print {
  .motion-enter, .motion-row, .motion-created { animation: none; opacity: 1; transform: none; }
  .motion-skeleton, button[aria-busy="true"]::after { display: none; }
}