/* Small touches of fun. Nothing here is needed to use the site; reduced-motion visitors get none of the movement. */

/* 1 — a truck drives along the bottom edge of the screen as you scroll down the page (fun.js) */
.road { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; z-index: 60; pointer-events: none; background: rgba(120, 130, 165, 0.28); }
.road-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }
.road-truck { position: absolute; left: 0; bottom: 2px; width: 46px; height: 23px; transform: translate3d(calc(var(--p, 0) * (100vw - 46px)), 0, 0); will-change: transform; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.road-truck svg { display: block; width: 100%; height: 100%; overflow: visible; }
.road-truck .wh { transform-box: fill-box; transform-origin: center; }
.road.is-end .road-truck { animation: road-hop 0.5s ease 2; }
@keyframes road-hop { 50% { margin-bottom: 7px; } }
@media (max-width: 640px) { .road-truck { width: 38px; height: 19px; } }
@media print, (prefers-reduced-motion: reduce) { .road { display: none; } }

/* 2 — a soft shine sweeps over the red buttons on hover */
.btn-red { position: relative; overflow: hidden; isolation: isolate; }
.btn-red::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; z-index: -1; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); opacity: 0; }
.btn-red:hover::after, .btn-red:focus-visible::after { opacity: 1; animation: btn-shine 0.8s var(--ease) 1; }
@keyframes btn-shine { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn-red::after { display: none; } }