.rotterdam-panorama{position:relative;margin:52px auto 0;background:linear-gradient(180deg,#faf7ee,#f5eedf 65%,#faf7ee);overflow:hidden;border-block:1px solid #dfd5c244}
.panorama-art{max-width:1600px;margin:auto;line-height:0}
.panorama-art>svg{width:100%;height:auto;display:block}
.panorama-pause{position:absolute;top:12px;right:7%;padding:7px 11px;background:#faf7eed9;border:1px solid #c7b89e;color:#746246;font:10px/1.4 Arial,sans-serif;letter-spacing:.04em}
.panorama-pause span{margin-left:9px}.panorama-pause:hover{background:#eee3cf}
.rotterdam-panorama.is-paused *{animation-play-state:paused!important}
@media(max-width:800px){.rotterdam-panorama{margin-top:30px;--boat-from:150px;--boat-to:1350px;--return-from:1250px;--return-to:110px}.panorama-art{width:900px;max-width:none;position:relative;left:50%;transform:translateX(-50%)}.panorama-art .riverboat-outbound{animation-duration:17s;animation-delay:-6.8s}.panorama-art .riverboat-inbound{animation-duration:19s;animation-delay:-6.5s}.panorama-pause{top:8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.panorama-pause{display:none}}

/* Leisurely passing sloops with a small, soft wake. */
.riverboat-outbound{animation:journey 26s linear infinite;animation-delay:-10.4s}
.riverboat-inbound{animation:return-journey 29s linear infinite;animation-delay:-10s}
.bob{transform-origin:22px 401px;animation:boat-pitch 3.2s ease-in-out infinite}
.riverboat-inbound .bob{animation-delay:-1.4s}
.wake,.bow-ripple{fill:none;stroke:#ad946a;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;animation:gentle-wake 3.6s ease-in-out infinite}
.bow-ripple{opacity:.45}
.hull-logo{opacity:.85}
@keyframes journey{from{transform:translateX(var(--boat-from,-220px))}to{transform:translateX(var(--boat-to,1760px))}}
@keyframes return-journey{from{transform:translateX(var(--return-from,1600px))}to{transform:translateX(var(--return-to,-440px))}}
@keyframes boat-pitch{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(1px) rotate(.3deg)}}
@keyframes gentle-wake{0%,100%{opacity:.3}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.rotterdam-panorama *{animation:none!important}.riverboat-outbound{transform:translateX(570px)}.riverboat-inbound{transform:translateX(830px)}.wake,.bow-ripple{opacity:.45}}

.panorama-pause{width:28px;height:28px;padding:0;display:grid;place-items:center;font-size:13px;line-height:1;letter-spacing:0}.panorama-pause span{margin:0}.panorama-pause:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.panorama-pause{display:none}}