The rail sits in the page's column, and moves on its own

Two things about the rail were wrong. It ran to the window edge, which made
it the one band on the page that ignores the column everything else lines up
to. And it only moved when somebody moved it, which for a row with a card
half off the edge is an invitation nobody was taking.

It is inside the page's own padding now -- starting where the heading starts
and ending where it ends -- with the cards fading out at both ends rather
than being chopped, so it reads as something passing through the column
rather than as a grid that overflowed it.

And it crawls: twenty-six pixels a second, the list rendered twice and the
position wrapped at the halfway mark, which is what makes the loop seamless
-- at the wrap, the copy under the frame is pixel for pixel what was there a
moment before. The second set is scenery: hidden from screen readers and out
of the tab order, because six more identical links say nothing new.

It gets out of the way rather than fighting anyone. Hover and focus stop it;
a touch, a wheel or an arrow press stands it down for two and a half seconds
and it picks up from wherever it was left; a background tab stops it; and
prefers-reduced-motion turns it off altogether.

Two things had to go for the crawl to work at all, and both are worth
knowing. Scroll snapping: mandatory snap and a crawl are two things deciding
where the rail should be, and the snap wins every frame -- the rail inches
forward and is yanked back. And scroll-behavior: smooth, which animates every
assignment to scrollLeft, including the crawl's own fraction of a pixel,
which is still easing when the next frame overwrites it. The arrows ask for
smooth scrolling themselves, which is the one place it is wanted.

The position is also kept in a variable rather than read back from the
element each frame: a browser stores the scroll offset in whole device
pixels, so scrollLeft += 0.4 reads back as the number it already was, and the
rail sits still at any speed under about thirty pixels a second.

Checked at 1440: twelve cards with six in the tab order and six hidden, the
rail starting and ending exactly where the heading does and inside the page
padding, moving 26 pixels a second on its own, stopping under a pointer and
starting again when it leaves, wrapping at the halfway mark, an arrow moving
it about a card, and nothing on the console. With reduced motion it does not
move at all. At 390 there are no arrows and the page still does not scroll
sideways. The page walk, accessibility names, the services page, the reveals
and the no-JavaScript pass are unchanged.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0128YzbhrfGdegUSc9RrARRf

Author: claude

404.html

@@ -75,9 +75,9 @@
          the page is visible by default and hidden only where something can
          unhide it. -->
     <script>document.documentElement.dataset.js = '';</script>
-    <script type="module" crossorigin src="/assets/index-CQi4-FLA.js"></script>
+    <script type="module" crossorigin src="/assets/index-BcQPwvbN.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/SectionArt-OeUcFbFL.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-CFQA-9md.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-C8EvkOpW.css">
 
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://niteshacars.in/"},{"@type":"ListItem","position":2,"name":"About Us","item":"https://niteshacars.in/about"}]}</script>
   </head>