/* ship.css — owned by the SHIP lane (Port Klang: crane, container ship, quay, water). */
.port-led { display: block; pointer-events: none; }
.port-ship, .port-hang, .port-water, .port-glow, .port-spill, .port-reflect { pointer-events: none; }
.port-ship > canvas, .port-hang > canvas { position: absolute; left: 0; top: 0; }

/* real projects painted on the containers */
.box-label {
  position: absolute; display: grid; place-items: center; text-align: center; text-decoration: none; color: #fff; pointer-events: auto;
  font: 700 clamp(8px, calc(var(--p) * 2.3), 12px)/1.05 var(--f-pixel); text-transform: uppercase; letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 6px rgba(0, 0, 0, .35);
}
.box-label span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; }
.box-label:hover, .box-label:focus-visible { outline: 2px solid var(--paper); outline-offset: 1px; background: rgba(255, 255, 255, .08); }

/* water: a static LED tile and a ripple tile that drifts one dot at a time */
.port-water { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.port-water > div { position: absolute; top: 0; left: 0; height: 100%; background-repeat: repeat-x; }
.water-base { width: 100%; }
.water-rip { animation: port-tide 9s infinite; }
@keyframes port-tide { to { transform: translateX(var(--tw)); } }

/* lights */
.port-glow { border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 207, 110, .6), rgba(255, 207, 110, .18) 38%, transparent 70%); }
.port-glow.g-aviation { background: radial-gradient(circle, rgba(255, 90, 60, .75), rgba(255, 90, 60, .2) 40%, transparent 70%); animation: port-blink 2.4s steps(1) infinite; }
.port-glow.g-cab { background: radial-gradient(circle, rgba(70, 195, 145, .55), rgba(70, 195, 145, .15) 40%, transparent 70%); }
.port-spill { border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 207, 110, .26), rgba(255, 207, 110, .08) 45%, transparent 70%); }
.port-reflect { animation: port-shimmer 1.8s steps(2) infinite; }
@keyframes port-blink { 50% { opacity: .25; } }
@keyframes port-shimmer { 50% { opacity: .6; } }

/* the box on the hook sways a little around the sling apex */
.port-hang { transform-origin: 50% 0; animation: port-sway 6s ease-in-out infinite; }
@keyframes port-sway { 0%, 100% { rotate: -1deg; } 50% { rotate: 1deg; } }