/* Transições padrão de componentes interativos */
.btn, .icon-btn, .nav-item, .tab, .chip, .row, .field, .seg button, .tabs button, .menu-item, .swatch, .acc__head {
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.chevron { transition: transform var(--dur-base) var(--ease); }
[aria-expanded="true"] > .chevron { transform: rotate(90deg); }

.switch { transition: background-color var(--dur-base) var(--ease); }
.switch::after { transition: transform var(--dur-base) var(--ease); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }

.bar > span { transition: width var(--dur-bar) var(--ease-out), background-color var(--dur-base) var(--ease); }

html.theme-transition, html.theme-transition * {
  transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease) !important;
}

@keyframes fade-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out  { from { opacity: 1 } to { opacity: 0 } }
@keyframes rise-in   { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes dialog-out{ from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(4px) scale(.99) } }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes check-pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes flash     { 0% { background-color: var(--accent-soft) } 100% { background-color: transparent } }
@keyframes shimmer   { from { background-position: -200% 0 } to { background-position: 200% 0 } }

.overlay[data-state="open"]    { animation: fade-in var(--dur-base) var(--ease-out); }
.overlay[data-state="closing"] { animation: fade-out var(--dur-fast) var(--ease-in) forwards; }
.dialog[data-state="open"]     { animation: dialog-in var(--dur-slow) var(--ease-out); }
.dialog[data-state="closing"]  { animation: dialog-out var(--dur-fast) var(--ease-in) forwards; }
.toast[data-state="open"]      { animation: toast-in var(--dur-slow) var(--ease-out); }
.toast[data-state="closing"]   { animation: fade-out var(--dur-base) var(--ease-in) forwards; }
.swap-in { animation: fade-in var(--dur-base) var(--ease-out); }
.enter   { animation: rise-in 180ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.check-icon { animation: check-pop var(--dur-fast) var(--ease-out); }
.just-saved { animation: flash 600ms var(--ease) 1; }

.collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.collapse > * { overflow: hidden; min-height: 0; }
.collapse[data-open="true"] { grid-template-rows: 1fr; opacity: 1; }

.skeleton { background: linear-gradient(90deg, var(--sunken) 0%, var(--surface-hover) 50%, var(--sunken) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r-md); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}