.scroll-rail {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-header) - 3);
    width: 1px;
    height: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-med, 240ms) var(--ease-out);
}

.scroll-rail.is-visible { opacity: 1; }

.scroll-rail__line {
    display: block;
    width: 1px;
    height: 100%;
    /* Design draws a dark hairline over the bright hero photography. */
    background: #14120F;
    box-shadow: 0 0 4px rgba(255, 253, 250, 0.85);
    transform-origin: top center;
    animation: scroll-rail-run 2.2s ease-in-out infinite;
}

/* Over a dark solid background the hairline turns ivory (tone-watch.js). */
.scroll-rail[data-bg="dark"] .scroll-rail__line {
    background: #FAF7F2;
    box-shadow: 0 0 4px rgba(20, 18, 15, 0.6);
}

@keyframes scroll-rail-run {
    0%   { transform: scaleY(0); transform-origin: top center; }
    45%  { transform: scaleY(1); transform-origin: top center; }
    55%  { transform: scaleY(1); transform-origin: bottom center; }
    100% { transform: scaleY(0); transform-origin: bottom center; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-rail__line { animation: none; }
}