/* Home page additions: hero "Watch racers live" button and the Our Story truck photo. */

/* ── "Watch racers live": secondary button with a looping shimmer ── */
.btn-live { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; isolation: isolate; }
.btn-live .nav-live-dot { flex: none; }
.btn-live::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,149,0,.45), transparent);
  animation: btnShimmer 3.6s ease-in-out infinite 1.2s;
}
@media (prefers-reduced-motion: reduce) { .btn-live::after { animation: none; display: none; } }

/* ── Truck story: the photo stays clear, old eyebrow + wording beneath ── */
.st { position: relative; background: var(--navy); overflow: hidden; isolation: isolate; }
.st__img { position: relative; display: block; height: min(78vh, 760px); }
.st__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.st__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--navy) 0%, rgba(10,22,40,0) 18%, rgba(10,22,40,0) 62%, var(--navy) 100%); }
.st__inner { position: relative; margin-top: -50px; padding-bottom: var(--section-y, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.st__head { grid-column: 1 / 6; }
.st__head .section-title { margin-bottom: 0; }
.st__body { grid-column: 6 / 13; padding-top: 30px; }
.st__body .why-body { color: rgba(255,255,255,.82); margin: 0 0 14px; max-width: none; }
@media (max-width: 860px) {
  .st__img { height: auto; aspect-ratio: 3 / 2; }
  .st__img img { object-position: 50% 45%; }
  .st__inner { margin-top: -28px; gap: 6px; }
  .st__head, .st__body { grid-column: 1 / -1; }
  .st__body { padding-top: 8px; }
}