/* Concept 4: living hero (dark sea + market tape). */

.bf2-hero {
  position: relative;
  overflow: hidden;
  /* The fixed header is 112px tall; the stock hero only clears 80px of it. */
  padding-top: 136px !important;
  padding-bottom: 76px;
  background:
    radial-gradient(1100px 520px at 82% 6%, hsl(212 62% 24% / 0.55), transparent 62%),
    linear-gradient(180deg, hsl(220 45% 6%) 0%, hsl(220 42% 13%) 100%) !important;
}
.bf2-hero > div[class~="absolute"] { display: none; }
.bf2-hero > .bf2-sea { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.bf2-hero h1 { color: #fff; }
.bf2-hero h1 span { color: hsl(213 24% 68%); }
.bf2-hero p { color: hsl(213 22% 78%); }

.bf2-hero a[href="/vessels-for-sale"] { background: #fff; color: hsl(220 45% 10%); }
.bf2-hero a[href="/vessels-for-sale"]:hover { background: hsl(213 30% 92%); }
.bf2-hero a[href="#contact"] { color: #fff; border-color: hsl(0 0% 100% / 0.28); }
.bf2-hero a[href="#contact"]:hover { background: hsl(0 0% 100% / 0.1); }
.bf2-hero .bf-hero-btn { color: #fff; border-color: hsl(0 0% 100% / 0.38); }
.bf2-hero .bf-hero-btn:hover { background: #fff; color: hsl(220 45% 10%); }
.bf2-hero a[href="#market"] { color: hsl(213 20% 64%); }
.bf2-hero a[href="#market"]:hover { color: #fff; }

/* Market tape */
.bf2-tape {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: stretch; height: 60px;
  background: hsl(220 45% 5% / 0.7); backdrop-filter: blur(8px);
  border-top: 1px solid hsl(0 0% 100% / 0.1);
  font-family: "DM Sans", system-ui, sans-serif;
}
.bf2-tape-label {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 28px 0 clamp(16px, 4vw, 48px);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(213 24% 74%);
  background: linear-gradient(90deg, hsl(220 45% 5%) 72%, transparent);
}
.bf2-tape-label i {
  width: 7px; height: 7px; border-radius: 50%; background: #5ee6a8;
  box-shadow: 0 0 0 0 hsl(155 75% 62% / 0.6); animation: bf2-pulse 2.4s ease-out infinite;
}
@keyframes bf2-pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.bf2-wrap {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.bf2-track { display: flex; width: max-content; height: 100%; animation: bf2-scroll var(--bf2-dur, 150s) linear infinite; }
.bf2-run { display: flex; flex: none; }
.bf2-tape:hover .bf2-track, .bf2-tape:focus-within .bf2-track { animation-play-state: paused; }
@keyframes bf2-scroll { to { transform: translateX(-50%); } }

.bf2-tick {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px;
  height: 100%; padding: 0 26px; white-space: nowrap; font-size: 13px; color: hsl(213 20% 78%);
  border-right: 1px solid hsl(0 0% 100% / 0.08); transition: background 0.2s;
}
.bf2-tick:hover, .bf2-tick:focus-visible { background: hsl(0 0% 100% / 0.07); }
.bf2-tick:focus-visible { outline: 2px solid hsl(213 60% 70%); outline-offset: -2px; }
.bf2-tick .t { color: #fff; font-weight: 500; }
.bf2-tick .d { opacity: 0.45; }
.bf2-tick b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

.bf-launcher { transition: opacity 0.35s, transform 0.35s, background 0.3s; }
html.bf2-hero-in-view .bf-launcher { opacity: 0; transform: translateY(12px); pointer-events: none; }

@media (max-width: 640px) {
  .bf2-hero { padding-bottom: 64px; }
  .bf2-tape { height: 52px; }
  .bf2-tape-label { padding-right: 16px; font-size: 10px; }
  .bf2-tick { padding: 0 18px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf2-track { animation: none; }
  .bf2-wrap { overflow-x: auto; }
  .bf2-tape-label i { animation: none; }
}