body{background:#000!important;background-image:none!important}
.xf106-trucks{pointer-events:none}
.xf106-truck{position:fixed;top:155px;width:calc((100vw - 620px)/2);max-width:390px;height:calc(100vh - 235px);object-fit:contain;opacity:0;transition:opacity .45s ease,transform .55s ease;filter:drop-shadow(0 20px 22px #0006);z-index:0}
.xf106-truck.left{left:max(36px,calc((100vw - 1260px)/2));transform:translateX(-50px)}
.xf106-truck.right{right:max(36px,calc((100vw - 1260px)/2));transform:translateX(50px)}
.preview-open .xf106-truck{opacity:1;transform:translateX(0)}
@media(max-width:900px){.xf106-trucks{display:flex;justify-content:center;gap:12px;margin:4px 0 16px}.xf106-truck{position:static;width:45%;height:180px;max-width:180px}.preview-open .xf106-truck{opacity:1}}
@media(prefers-reduced-motion:reduce){.xf106-truck{transition:none;transform:none}}

.xf106-truck{background:#000;border-radius:12px}

.preview-open .xf106-truck.left{animation:xf106-enter-left 2.8s cubic-bezier(.4,0,.2,1) both}
.preview-open .xf106-truck.right{animation:xf106-enter-right 2.8s cubic-bezier(.4,0,.2,1) .25s both}
@keyframes xf106-enter-left{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:translateX(0)}}
@keyframes xf106-enter-right{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.preview-open .xf106-truck{animation:none;transition:none}}

/* Black model controls and a slightly slimmer XF 106 title. */
.family,.model{background:#000;border-color:#303030}
.family:hover,.model:hover{background:#000;border-color:#ff8500}
.family[aria-expanded=true],.family.direct[aria-pressed=true],.model[aria-pressed=true]{background:#000;border-color:#ff8500}
.xf106-truck.model-title{scale:.88 1}

/* Keep fixed vehicle previews anchored to the viewport while opening a model. */
.models.fade{animation:none}
.preview-open .xf106-truck.left,.preview-open .xf106-truck.right{animation:none;opacity:1;transform:none;transition:opacity .2s ease}