/* Concept 5: fleet drawings. */

svg.bf5 {
  display: block; width: 100%; height: auto; overflow: hidden;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
}
svg.bf5 * { vector-effect: non-scaling-stroke; }
svg.bf5 .bf5-hull { fill: currentColor; fill-opacity: 0.07; }
svg.bf5 .bf5-dash { stroke-dasharray: 3 3; opacity: 0.55; }
svg.bf5 .bf5-wave { stroke: hsl(212 58% 46% / 0.8); stroke-width: 1.2; animation: bf5-wave 7s linear infinite; }
@keyframes bf5-wave { to { transform: translateX(-40px); } }
svg.bf5 .bf5-ship { transform-box: fill-box; transform-origin: 50% 100%; }

/* Vessel cards: a general-arrangement drawing banner on a blueprint grid. */
.bf5-art {
  margin: -24px -24px 20px; padding: 18px 24px 0;
  color: hsl(var(--foreground) / 0.8);
  background-color: hsl(var(--secondary) / 0.55);
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.045) 1px, transparent 1px);
  background-size: 14px 14px;
  border-bottom: 1px solid hsl(var(--border));
}
.bf5-art { position: relative; }
.bf5-art svg.bf5 { height: 84px; }
.bf5-art::after {
  content: "Illustration"; position: absolute; top: 8px; right: 12px;
  font: 9px/1 "DM Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  color: hsl(var(--foreground) / 0.38);
}
.border.p-6.flex.flex-col:hover .bf5-ship { animation: bf5-bob 3.4s ease-in-out infinite; }
@keyframes bf5-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-1.6px) rotate(-0.5deg); }
}

/* Homepage sector tiles: faint drawing that lights up on hover. */
.bf5-tile-art {
  position: absolute; top: 20px; right: 20px; width: 50%; max-width: 210px;
  color: inherit; opacity: 0.4; pointer-events: none; transition: opacity 0.3s;
}
a:hover > .bf5-tile-art { opacity: 1; }
.bf5-tile-art svg.bf5 .bf5-wave { stroke: currentColor; opacity: 0.55; }
@media (max-width: 640px) { .bf5-tile-art { width: 44%; top: 16px; right: 16px; } }

/* Finder results */
.bf-card .bf5-mini { flex: none; align-self: center; width: 68px; color: var(--bf-fg); opacity: 0.9; }
.bf-card .bf5-mini svg.bf5 .bf5-wave { stroke: currentColor; opacity: 0.45; }
.bf-card .bf-card-main { flex: 1; min-width: 0; }
@media (max-width: 520px) { .bf-card .bf5-mini { display: none; } }

@media (prefers-reduced-motion: reduce) {
  svg.bf5 .bf5-wave, .border.p-6.flex.flex-col:hover .bf5-ship { animation: none; }
}