/*
 * Stili dell'app non generati da Tailwind:
 * - regole di src/index.css e lo <style> "custom-scrollbar" di App.tsx
 * - animazioni che nell'originale erano fatte con la libreria "motion"
 * - overlay del trascinamento (prima dnd-kit)
 */

/* ---- da src/index.css ---- */
:root {
  --bg-density: #E4E3E0;
  --ink-density: #141414;
  --accent-density: #F27D26;
}

body {
  background-color: var(--bg-density);
  color: var(--ink-density);
  font-family: var(--font-sans);
}

.density-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.high-density-shadow {
  box-shadow: 4px 4px 0px var(--ink-density);
}

/* ---- scrollbar del CARDS DECK (da App.tsx) ---- */
.custom-scrollbar::-webkit-scrollbar { height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(242, 125, 38, 0.8); }

/* ---- Card: comparsa, hover e pressione (prima motion: initial/animate/whileHover/whileTap) ---- */
@keyframes m-card-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.m-card-enter { animation: m-card-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); }
.m-card-interactive:hover  { transform: scale(1.05); }
.m-card-interactive:active { transform: scale(0.95); }

/* ---- Barra SCORE (prima motion spring) ---- */
.m-score-bar { transition: width 0.6s cubic-bezier(0.25, 1.15, 0.5, 1); }

/* ---- Modali: apertura e chiusura (prima AnimatePresence) ---- */
@keyframes m-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes m-pop-in-10  { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes m-pop-out-10 { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(0.95); } }
@keyframes m-pop-in-15  { from { opacity: 0; transform: translateY(15px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes m-pop-out-15 { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(15px) scale(0.95); } }
@keyframes m-pop-in-finish { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

.m-entering .m-fade       { animation: m-fade-in 0.2s ease-out; }
.m-entering .m-pop-10     { animation: m-pop-in-10 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); }
.m-entering .m-pop-15     { animation: m-pop-in-15 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); }
.m-entering .m-pop-finish { animation: m-pop-in-finish 0.4s cubic-bezier(0.34, 1.3, 0.64, 1); }

.m-leaving { pointer-events: none; }
.m-leaving .m-fade   { animation: m-fade-out 0.2s ease-in forwards; }
.m-leaving .m-pop-10 { animation: m-pop-out-10 0.2s ease-in forwards; }
.m-leaving .m-pop-15 { animation: m-pop-out-15 0.2s ease-in forwards; }

/* ---- Trascinamento (prima dnd-kit DragOverlay) ---- */
.m-drag-overlay {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  will-change: transform;
}
body.m-dragging,
body.m-dragging * {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing !important;
}