/* Tailwind handles most styling, these polish micro-interactions */
.btn { transition: transform .08s ease; }
.btn:active { transform: translateY(1px); }
.fade-in { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }

/* Aspect ratio + image fade */
.ar-square { aspect-ratio: 1 / 1; }
.ar-rect { aspect-ratio: 4 / 3; }
.img-fade { opacity: 0; transition: opacity .25s ease; }
.img-fade.loaded { opacity: 1; }

/* Overlay gradient for action bar */
.action-gradient { background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }

.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }