/* Viaduct page header: engraved valley, a train crosses edge to edge on a loop.
   Positions are percentages of the 3168x1344 plate, so everything scales together. */
.vh{position:relative;overflow:hidden;background:#faebe4;color:#24215e}
.vh-stage{position:relative;width:max(100%,820px);aspect-ratio:3168/1344;left:50%;transform:translateX(-50%)}
.vh-plate{position:absolute;inset:0;width:100%;height:100%;display:block}
.vh-lane{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vh-train{position:absolute;top:60.64%;width:10.48%;left:100%;animation:vh-cross 26s linear infinite}
@keyframes vh-cross{0%{left:100%}92%{left:-10.6%}100%{left:-10.6%}}
.vh-copy{position:absolute;left:0;right:0;top:clamp(56px,9vw,132px);text-align:center;padding:0 16px}
.vh-copy h1{margin:0;font-family:Sohne,Arial,sans-serif;font-weight:500;font-size:clamp(34px,5.2vw,72px);line-height:1.04;letter-spacing:-.02em}
.vh-copy p{margin:16px auto 0;max-width:560px;font-family:Sohne,Arial,sans-serif;font-size:clamp(16px,1.4vw,19px);line-height:1.45;color:#4b4880}
@media (prefers-reduced-motion:reduce){.vh-train{animation:none;left:44%}}
/* Shared scene parts built by page-header.js */
.vh-mover{position:absolute;left:100%;animation:vh-rtl var(--dur) linear infinite}
.vh-mover.ltr{left:calc(var(--w)*-1);animation-name:vh-ltr}
@keyframes vh-rtl{0%{left:100%}94%,100%{left:calc(var(--w)*-1)}}
@keyframes vh-ltr{0%{left:calc(var(--w)*-1)}94%,100%{left:100%}}
.vh-cloud{position:absolute;animation:vh-sway var(--d) ease-in-out var(--delay) infinite alternate}
@keyframes vh-sway{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
.vh-front{position:absolute;pointer-events:none}
@media (prefers-reduced-motion:reduce){.vh-mover{animation:none;left:44%}.vh-cloud{animation:none}}
/* Traced routes (mountain scenes): keyframes are generated per scene by page-header.js */
.vh-route{position:absolute;transform-origin:50% 100%}
.vh-route img{display:block;width:100%}
.vh-route.bob img{animation:vh-bob 4.5s ease-in-out infinite}
.vh-route .vh-reflect{position:absolute;left:0;top:100%;transform:scaleY(-1);opacity:.16;animation:none;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
@keyframes vh-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(4%) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.vh-route{animation:none!important;opacity:1!important}.vh-route.bob img{animation:none}}
