/* ───────────────────────────────────────────────────────────
   TRACK RECORD CSS (INTERACTIVE DATA EXPERIENCE)
   ─────────────────────────────────────────────────────────── */

.track-record {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 800px;
  background: var(--color-charcoal);
  color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.track-record__backgrounds {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.track-record__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.8s ease, transform 1.5s ease;
}

.track-record__bg.active {
  opacity: 1;
  transform: scale(1);
}

.track-record__overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 22, 0.85); /* Dark overlay to make text pop */
}

.track-record__content {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
}

.track-record__stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.track-record__stat {
  display: flex;
  align-items: center;
  gap: 4rem;
  opacity: 0.3;
  transform: translateX(-20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.track-record__stat:last-child {
  border-bottom: none;
}

.track-record__stat.active {
  opacity: 1;
  transform: translateX(0);
}

.track-record__number {
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: var(--font-black);
  line-height: 1;
  width: 40%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.02em;
}

.track-record__stat.active .track-record__number {
  color: var(--color-enterprise-blue);
  transform: scale(1.05);
  transform-origin: left center;
}

.track-record__small {
  font-size: 0.5em;
  vertical-align: super;
}

.track-record__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 60%;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease 0.2s;
}

.track-record__stat.active .track-record__info {
  opacity: 1;
  transform: translateY(0);
}

.track-record__label {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.track-record__desc {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.7);
  max-width: 400px;
}

/* Responsive */
@media (max-width: 1024px) {
  .track-record__stat { gap: 2rem; }
  .track-record__number { width: 30%; }
  .track-record__info { width: 70%; }
}

@media (max-width: 768px) {
  .track-record { height: auto; padding: var(--space-20) 0; }
  .track-record__stat { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 2rem 0; }
  .track-record__number { width: 100%; font-size: 4rem; }
  .track-record__info { width: 100%; opacity: 1; transform: none; }
  .track-record__stat.active .track-record__number { transform: none; }
}