/* Motion: route transitions, press states, staggered lists, skeleton shimmer. All off under reduced motion. */
@keyframes routeIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes scanline { 0% { top: 12%; } 50% { top: 84%; } 100% { top: 12%; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.screen.enter { animation: routeIn var(--t-route) var(--ease-out) both; }
.pressable { transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.pressable:active { transform: scale(0.97); }
.btn:active, .chip:active, .row-btn:active, .cat-circle:active .cat-disc, .cat-tile:active { transform: scale(0.97); }
.btn, .chip, .row-btn, .cat-disc, .cat-tile { transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast); }

.stagger > * { animation: fadeUp 240ms var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; } .stagger > *:nth-child(2) { animation-delay: 30ms; }
.stagger > *:nth-child(3) { animation-delay: 60ms; } .stagger > *:nth-child(4) { animation-delay: 90ms; }
.stagger > *:nth-child(5) { animation-delay: 120ms; } .stagger > *:nth-child(6) { animation-delay: 150ms; }
.stagger > *:nth-child(7) { animation-delay: 180ms; } .stagger > *:nth-child(8) { animation-delay: 210ms; }
.stagger > *:nth-child(n+9) { animation: none; }

/* Skeletons */
.sk { display: block; border-radius: 10px; background: linear-gradient(90deg, #e9ece7 25%, #f3f5f1 50%, #e9ece7 75%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
.sk-chip { width: 72px; height: 36px; border-radius: 999px; flex: none; }
.sk-card { background: var(--card); border-radius: var(--r2); padding: 10px; box-shadow: var(--shadow-rest); }
.sk-img { height: 120px; border-radius: 14px; margin-bottom: 10px; }
.sk-line { height: 12px; margin: 8px 0; } .sk-line.short { width: 55%; }
.sk-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.sk-thumb { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.sk-lines { flex: 1; }

/* Pulsing map pin, scanner line, floating welcome art */
.pin-pulse::before, .pin-pulse::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--primary); opacity: 0.4; animation: pulse 1.8s ease-out infinite; }
.pin-pulse::after { animation-delay: 0.6s; }
.scanline { position: absolute; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, #7dffb0, transparent); box-shadow: 0 0 12px #7dffb0; animation: scanline 2.4s ease-in-out infinite; }
.slide-art { animation: floaty 3.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .screen.enter, .stagger > *, .stepper, .slide-art { animation: none !important; }
  .sk { animation: none; background: #e9ece7; }
  .scanline { display: none; }
}