/* Car of the Day — Sidebar Zone (tall + narrow).
 *
 * Same scene as the main/banner variants but rotated 90°: road runs
 * VERTICALLY, scenery strips on the LEFT and RIGHT sides, dashes scroll
 * top → bottom so the stationary truck reads as driving forward UP the
 * screen. The yellow car SVG and the text cell are NOT rotated — only
 * the road background's orientation changes. */

.cars-sidebar-wrap {
    width: 100cqw;
    height: 100cqh;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    color: var(--text);
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
    background: #2a2a2a;
}

/* Scenery strips on left and right edges of the slide. */
.cars-sidebar-scenery {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5%;
    background:
        repeating-linear-gradient(
            to bottom,
            #d9b300 0,
            #d9b300 14cqh,
            #2e2e2e 14cqh,
            #2e2e2e 28cqh,
            #f5c400 28cqh,
            #f5c400 42cqh,
            #1a1a1a 42cqh,
            #1a1a1a 56cqh
        );
    background-size: 100% 56cqh;
    animation: cars-sidebar-scenery-scroll 3s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.cars-sidebar-scenery-left  { left: 0; }
.cars-sidebar-scenery-right { right: 0; }

@keyframes cars-sidebar-scenery-scroll {
    from { background-position: 0 0; }
    to   { background-position: 0 56cqh; }
}

/* Asphalt road — vertical band running full height, narrower than slide. */
.cars-sidebar-road {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    box-sizing: border-box;
    background:
        linear-gradient(to right, #5a5a5a, #4a4a4a 50%, #5a5a5a);
    border-left: 0.5cqw solid #f5f5f5;
    border-right: 0.5cqw solid #f5f5f5;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Dashed white center line down the middle — scrolls top → bottom so
 * the stationary truck reads as moving forward UP. */
.cars-sidebar-dashes {
    position: absolute;
    top: -10%;
    left: 50%;
    width: 4cqw;
    height: 200%;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
        to bottom,
        #f5f5f5 0,
        #f5f5f5 8cqh,
        transparent 8cqh,
        transparent 14cqh
    );
    animation: cars-sidebar-road-scroll 1.5s linear infinite;
}

@keyframes cars-sidebar-road-scroll {
    from { transform: translateX(-50%) translateY(-14cqh); }
    to   { transform: translateX(-50%) translateY(0); }
}

/* Paper holds the two halves (yellow car on top, photo cell at bottom).
 * Transparent so the road shows through. */
.cars-sidebar-paper {
    position: relative;
    z-index: 1;
    width: 75%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    box-sizing: border-box;
    overflow: visible;
}

/* Top section auto-sizes to the truck frame's height so the bottom
 * cell fills 100% of whatever's left of the 80% paper. */
.cars-sidebar-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Frame's LAYOUT bbox matches the truck's POST-rotation visual:
 * height = visual height (truck pointed up), width = visual width.
 * The img inside is positioned absolute + transformed so it fills
 * the frame visually. */
.cars-sidebar-truck-frame {
    height: 28cqh;
    width: calc(28cqh * 149 / 108);
    position: relative;
    overflow: visible;
}

.cars-sidebar-wrap .cars-sidebar-yallowcar {
    /* Pre-rotation height = frame's WIDTH (which becomes visual width
     * after rotation). Position absolute + center via translate(-50%). */
    position: absolute;
    top: 50%;
    left: 50%;
    height: calc(28cqh * 149 / 108);
    width: auto;
    max-width: none;
    max-height: none;
    display: block;
    animation: cars-sidebar-truck-shake 1s ease-in-out infinite;
    transform-origin: center;
}

/* Truck rotated 90° so its head (lights) point UP — the direction of
 * travel. The translate(-50%, -50%) keeps it centered in the frame;
 * tiny shake overlays small jitter on top of the baseline rotation. */
@keyframes cars-sidebar-truck-shake {
    0%, 100% { transform: translate(-50%,   -50%) rotate(90deg); }
    20%      { transform: translate(-52%,   -50%) rotate(89.7deg); }
    40%      { transform: translate(-48.5%, -50%) rotate(90.3deg); }
    60%      { transform: translate(-51.5%, -50%) rotate(89.8deg); }
    80%      { transform: translate(-48.5%, -50%) rotate(90.2deg); }
}

/* Bottom cell — photo as background, themed border + inner ring,
 * line-by-line dark text on top. */
.cars-sidebar-bottom {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
    background: #FFF center / cover no-repeat;
    border: 2cqmin inset var(--text);
    border-radius: 4cqmin;
    box-shadow: inset 0 0 0 0.8cqmin var(--bg);
    position: relative;
    z-index: 1;
}

.cars-sidebar-wrap .cars-sidebar-bottom img {
    max-width: none;
    max-height: none;
}

.cars-sidebar-cell {
    width: 100%;
    height: 100%;
    padding: 1cqmin 2.5cqw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--text);
    overflow: hidden;
}

/* Line-by-line dark highlight on text pills. */
.cars-sidebar-wrap .cars-sidebar-header,
.cars-sidebar-wrap .cars-sidebar-headline,
.cars-sidebar-wrap .cars-sidebar-text {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-color: color-mix(in srgb, var(--text) 75%, transparent);
    padding: 0.1em 0.4em;
}

.cars-sidebar-wrap .cars-sidebar-body {
    font-size: inherit;
    line-height: 1.35;
    font-family: 'Georgia', serif;
    text-align: start;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.cars-sidebar-wrap .cars-sidebar-body > * {
    margin-bottom: 0.25em;
}

.cars-sidebar-wrap .cars-sidebar-header {
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #fff;
    opacity: 0.85;
    line-height: 1.6;
    text-shadow: 0 0.2cqmin 0.5cqmin rgba(0, 0, 0, 0.7);
}

.cars-sidebar-wrap .cars-sidebar-headline {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    letter-spacing: -0.005em;
    text-shadow: 0 0.2cqmin 0.5cqmin rgba(0, 0, 0, 0.6);
}

.cars-sidebar-wrap .cars-sidebar-text {
    font-family: 'Georgia', serif;
    font-size: 1em;
    line-height: 1.7;
    color: #fff;
    text-shadow: 0 0.2cqmin 0.5cqmin rgba(0, 0, 0, 0.7);
}