/* ========== Road strip (between sections) ========== */
.road-strip-wrap {
    overflow: hidden;          /* hides the tilted edges, no side scroll */
    padding: 40px 0;
}

.road-strip {
    position: relative;
    width: 110%;
    margin-left: -5%;
    transform: rotate(-2deg);
    background: #15151f;
    padding: 22px 0;
    box-shadow: 0 14px 30px rgba(11, 11, 26, .18);
}

/* Racing kerbs: red/white blocks on top and bottom edges */
.road-strip::before,
.road-strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: repeating-linear-gradient(
        90deg,
        var(--accent) 0 44px,
        #fff 44px 88px
    );
}

.road-strip::before { top: 0; }
.road-strip::after  { bottom: 0; }

/* Scrolling track */
.road-track {
    display: flex;
    width: max-content;
    animation: road-scroll 38s linear infinite;
}

.road-strip:hover .road-track,
.road-strip:hover .tyre { animation-play-state: paused; }

.road-group {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
}

@keyframes road-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.road-item {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #fff;
    white-space: nowrap;
}

/* every 2nd word gets an outline style */
.road-group .road-item:nth-of-type(even) {
    color: transparent;
    -webkit-text-stroke: 1.4px #8ff0ff;
}

/* Tyre */
.tyre {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    animation: tyre-spin 1.6s linear infinite;
}

/* track moves left → tyres roll anticlockwise */
@keyframes tyre-spin {
    to { transform: rotate(-360deg); }
}

.tyre-tread  { fill: #3a3a48; }
.tyre-rubber { fill: #2a2a35; }
.tyre-rim    { fill: #c9ced9; }
.tyre-spokes { fill: #8a91a3; }
.tyre-hub    { fill: var(--primary); }

/* ========== Responsive ========== */
@media (max-width: 900px) {
    .road-strip-wrap { padding: 26px 0; }
    .road-strip { padding: 18px 0; transform: rotate(-3deg); }
    .road-item { font-size: 26px; }
    .tyre { width: 42px; height: 42px; }
    .road-group { gap: 24px; padding-right: 24px; }
}

@media (max-width: 560px) {
    .road-strip { padding: 15px 0; }
    .road-strip::before,
    .road-strip::after { height: 7px; background-size: auto; }
    .road-item { font-size: 21px; }
    .tyre { width: 34px; height: 34px; }
}

/* Respect users who turn off animations */
@media (prefers-reduced-motion: reduce) {
    .road-track, .tyre { animation: none; }
}