:root {
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen {
  transition: opacity 0.45s var(--ease-smooth), visibility 0.45s var(--ease-smooth);
}

.btn,
.icon-btn,
.feature-btn,
.text-input,
.text-area,
select,
.panel,
.role-card,
.drawer-section,
.top-bar,
.glass-panel,
.changelog-content {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.btn,
.icon-btn,
.feature-btn {
  transition:
    transform 0.18s var(--ease-smooth),
    background-color 0.18s var(--ease-smooth),
    border-color 0.18s var(--ease-smooth),
    box-shadow 0.18s var(--ease-smooth);
}

.panel,
.role-card,
.drawer-section,
.top-bar,
.glass-panel,
.changelog-content,
.settings-drawer,
.draft-panel {
  contain: layout paint;
}

.settings-drawer {
  transition: transform 0.28s var(--ease-smooth);
}

.collection-cards {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .icon-btn,
  .feature-btn,
  .settings-drawer,
  .screen {
    transition: none !important;
  }
}