/* W109: the harbour strip on the Hot Offers freight cards (owner 2026-11-07). A crane lowers a container onto a ship at the loading port,
   the ship sails slowly to the destination, a second crane lifts the container off, then it repeats (14 s). Light by design: the ship and the crane
   are drawn once (an SVG sprite in index.html) and shared by every card; only transform and opacity animate, so nothing ever moves the layout; a card
   that is off screen is paused; with "reduce motion" the card shows a still picture. Arabic mirrors the whole strip. */
.so-card .harbour { position: relative; height: 66px; margin: 2px 0 6px; overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,125,136,0) 62%, rgba(0,125,136,.10) 62%, rgba(0,125,136,.04) 100%); }
html[dir="rtl"] .so-card .harbour { transform: scaleX(-1); }
.so-card .harbour::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 8px; border-top: 2px dotted #b4cccc; }
.harbour .quay { position: absolute; bottom: 0; width: 46px; height: 9px; background: #cfe0e0; border-radius: 3px 3px 0 0; }
.harbour .quay.a { left: 0; } .harbour .quay.b { right: 0; }
.harbour .crane { position: absolute; bottom: 9px; width: 44px; height: 56px; }
.harbour .crane.a { left: 0; } .harbour .crane.b { right: 0; transform: scaleX(-1); }
.harbour .crane svg { width: 100%; height: 100%; display: block; }
.harbour .ship { position: absolute; left: 0; right: 0; bottom: 9px; height: 30px; display: flex; justify-content: flex-end; will-change: transform, opacity; animation: mh-voyage 14s cubic-bezier(.45,.05,.4,.95) infinite; }
.harbour .ship svg.hull { width: 46px; height: 30px; display: block; transform-origin: 50% 92%; animation: mh-bob 2.8s ease-in-out infinite; }
.harbour .box { position: absolute; right: 14px; bottom: 14px; width: 9px; height: 7px; background: #FF8A00; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); will-change: transform; animation: mh-lift 14s linear infinite; }
.harbour .box::before { content: ""; position: absolute; left: 4px; bottom: 100%; width: 1px; height: 34px; background: #003F45; opacity: 0; animation: mh-cable 14s linear infinite; }
@keyframes mh-bob { 0%, 100% { transform: translateY(0) rotate(-.9deg); } 50% { transform: translateY(-1.2px) rotate(.9deg); } }
@keyframes mh-voyage { 0% { transform: translateX(calc(-100% + 46px)); opacity: 0; } 3% { transform: translateX(calc(-100% + 46px)); opacity: 1; } 28% { transform: translateX(calc(-100% + 46px)); } 72% { transform: translateX(0); } 93% { transform: translateX(0); opacity: 1; } 99%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes mh-lift { 0%, 3% { transform: translateY(-32px); } 18%, 72% { transform: translateY(0); } 90%, 100% { transform: translateY(-32px); } }
@keyframes mh-cable { 0%, 19% { opacity: 1; } 22%, 69% { opacity: 0; } 72%, 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
/* a card that is off screen does not animate */
.so-card:not(.in-view) .harbour .ship, .so-card:not(.in-view) .harbour .box, .so-card:not(.in-view) .harbour .box::before, .so-card:not(.in-view) .harbour .hull { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .harbour .ship, .harbour .box, .harbour .box::before, .harbour .hull { animation: none !important; }
  .harbour .box { transform: none; }
}