/* track.css — landing "Track record" section + top-nav center links. */

.track { padding: 92px 24px; position: relative; overflow: hidden; }

/* aurora — soft bronze/steel light blobs slowly drifting behind the content */
.track-aurora {
  position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
  filter: blur(70px); opacity: 0.95;
  transition: transform 450ms ease-out;
  -webkit-mask-image: radial-gradient(78% 82% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(78% 82% at 50% 45%, #000 30%, transparent 100%);
}
.track-aurora span { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.track-aurora span:nth-child(1) {
  width: 46%; height: 60%; left: 6%; top: 6%;
  background: radial-gradient(closest-side, rgba(197, 168, 128, 0.55), transparent 70%);
  animation: auroraA 19s ease-in-out infinite alternate;
}
.track-aurora span:nth-child(2) {
  width: 42%; height: 56%; right: 8%; top: -4%;
  background: radial-gradient(closest-side, rgba(140, 165, 200, 0.30), transparent 70%);
  animation: auroraB 23s ease-in-out infinite alternate;
}
.track-aurora span:nth-child(3) {
  width: 52%; height: 64%; left: 30%; bottom: -16%;
  background: radial-gradient(closest-side, rgba(184, 142, 96, 0.42), transparent 70%);
  animation: auroraC 27s ease-in-out infinite alternate;
}
@keyframes auroraA { from { transform: translate(0, 0) scale(1); } to { transform: translate(9%, 8%) scale(1.25); } }
@keyframes auroraB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-8%, 6%) scale(0.9); } }
@keyframes auroraC { from { transform: translate(0, 0) scale(1); } to { transform: translate(5%, -9%) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .track-aurora span { animation: none; } }
.track-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
/* dock — a row of logo tiles; hover lifts the tile + shows a name/sector tip */
.dock-wrap { margin-top: 48px; display: flex; justify-content: center; }
.dock {
  display: flex; gap: clamp(6px, 1.6vw, 20px); align-items: flex-end;
  padding: clamp(8px, 2vw, 22px) clamp(10px, 3vw, 40px);
  border-radius: clamp(16px, 3vw, 28px); max-width: 100%;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--hair-strong);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dock-item { position: relative; flex: 0 0 auto; }
.dock-tile {
  width: clamp(30px, 8.5vw, 70px); height: clamp(30px, 8.5vw, 70px);
  border-radius: clamp(9px, 2.2vw, 16px); background: #fff; padding: clamp(4px, 1.2vw, 11px);
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  transform-origin: center bottom;
  transition: transform 150ms var(--ease-fluid), box-shadow 180ms var(--ease-fluid);
  will-change: transform;
}
.dock-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dock-item:hover .dock-tile {
  box-shadow: 0 18px 46px -10px rgba(197, 168, 128, 0.55);
}
.dock-tip {
  position: absolute; bottom: calc(100% + 26px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: 11px; white-space: nowrap;
  background: var(--ink-panel); border: 1px solid var(--hair-strong);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity 160ms var(--ease-fluid), transform 160ms var(--ease-fluid);
}
.dock-tip b { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--paper-high); }
.dock-tip i { font-style: normal; font-size: 12px; color: var(--paper-muted); }
.dock-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink-panel);
}
.dock-item:hover .dock-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.track-disc {
  text-align: center; color: var(--paper-dim); font-size: 11px; line-height: 1.6;
  margin: 34px auto 0; max-width: 580px;
}

/* top-nav center links */
.topnav-links { display: flex; align-items: center; gap: 28px; }
.topnav-links a {
  font-family: var(--font-sans); font-size: 14px; color: var(--paper-muted);
  transition: color 120ms var(--ease-fluid); cursor: pointer;
}
.topnav-links a:hover { color: var(--paper-high); }
@media (max-width: 860px) { .topnav-links { display: none; } }