Act as a senior front-end developer with 5+ years of experience creating immersive web animations. Teach me how to create a smooth parallax scrolling effect using pure CSS for a [portfolio website] with [3 distinct layers] (background, midground, foreground). Explain the key CSS properties like 'perspective', 'transform-style', and 'translateZ' in a beginner-friendly way. Include a code snippet example for a [mountain landscape theme] where distant peaks move slower than nearby trees. Highlight common pitfalls like janky scrolling and how to optimize performance for mobile devices.