Smooth Scrolling

1/* Enable smooth scrolling */
2html {
3  scroll-behavior: smooth;
4}
5
6/* Smooth scroll with custom timing */
7@media (prefers-reduced-motion: no-preference) {
8  html {
9    scroll-behavior: smooth;
10  }
11}
12
13/* Disable for users who prefer reduced motion */
14@media (prefers-reduced-motion: reduce) {
15  html {
16    scroll-behavior: auto;
17  }
18}
19
20/* Scroll snap for sections */
21.scroll-container {
22  scroll-snap-type: y mandatory;
23  overflow-y: scroll;
24  height: 100vh;
25}
26
27.scroll-section {
28  scroll-snap-align: start;
29  height: 100vh;
30}