/* ─────────────────────────────────────────────────────────────
   Eicon · Base element styles & helper classes.
   Light-touch resets + the motion/interaction primitives the app
   relies on. Kept minimal so consuming surfaces stay in control.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Artist names / editorial accents: always italic Playfair */
.eicon-serif,
.serif {
  font-family: var(--serif);
  font-style: italic;
}

/* ── Interaction primitives ── */
.tap {
  transition: transform var(--dur-tap) ease, opacity var(--dur-tap) ease, background var(--dur-fast) ease;
  touch-action: manipulation;
  cursor: pointer;
}
.tap:active { transform: scale(0.97); opacity: 0.9; }

.lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.lift:active { transform: scale(0.985); }

/* Hide scrollbars but keep scroll (used inside the device frame) */
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Keyframes used across the app ── */
@keyframes eicon-scanline { 0% { top: 6%; } 50% { top: 90%; } 100% { top: 6%; } }
@keyframes eicon-dots { 0%, 20% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
@keyframes eicon-spin { to { transform: rotate(360deg); } }
@keyframes eicon-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes eicon-ring-pulse { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes eicon-float-pts { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 1; } }
@keyframes eicon-up-in { from { transform: translateY(22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes eicon-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes eicon-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eicon-card-in { from { transform: scale(0.92); } to { transform: scale(1); } }
@keyframes eicon-fade-in { from { opacity: 0; transform: scale(0.994); } to { opacity: 1; transform: scale(1); } }