/* =========================================================
   Viñetas (vignettes.mjs): gráficos animados por tema
   ========================================================= */
.vg { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--vg-bg); color: #111316; font-size: 13px; text-align: left; container-type: inline-size; }
.vg svg { display: block; }
.vg-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #374151; }
.vg-head > span:not(.vg-head__ic) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-head b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #111316; font-variant-numeric: tabular-nums; }
.vg-head__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(17, 19, 22, .06); }
.vg-head__ic svg { width: 14px; height: 14px; fill: none; stroke: #111316; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vg-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: #fff; font-size: 11.5px; font-weight: 600; color: #111316; box-shadow: 0 8px 20px -10px rgba(17, 19, 22, .3); white-space: nowrap; animation: vg-pop .5s .6s ease-out both; }
.vg-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vg-chip--tl { left: 14px; top: 14px; } .vg-chip--tr { right: 14px; top: 14px; } .vg-chip--bl { left: 14px; bottom: 14px; }
.vg > .vg-chip:not(.vg-chip--tl):not(.vg-chip--tr):not(.vg-chip--bl) { right: 14px; bottom: 14px; }
.vg-chip--ok { background: #dcfce7; color: #15803d; } .vg-chip--bad { background: #fee2e2; color: #dc2626; } .vg-chip--warn { background: #fef3c7; color: #b45309; }

/* Barras */
.vg-bars { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 8px; }
.vg-bars > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vg-bars span { flex: 1; display: flex; align-items: flex-end; border-radius: 8px; background: rgba(17, 19, 22, .05); overflow: hidden; }
.vg-bars i { width: 100%; height: var(--h); border-radius: 8px; background: var(--c); transform-origin: bottom; animation: vg-up .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .07s); }
.vg-bars small { text-align: center; font-size: 10.5px; color: #6b7280; }

/* Línea */
.vg-line { flex: 1; width: 100%; min-height: 0; }
.vg-line__path { stroke-dasharray: 100; animation: vg-draw 1.6s ease-out both; }

/* Medidor */
.vg-gauge { flex: 1; display: flex; align-items: center; gap: 18px; }
.vg-gauge svg { width: min(46%, 140px); height: auto; }
.vg-gauge__arc { animation: vg-arc 1.4s ease-out both; }
.vg-gauge b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.vg-gauge small { font-size: 12px; color: #6b7280; }

/* Lista */
.vg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vg-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(17, 19, 22, .04); animation: vg-in .5s ease-out both; animation-delay: calc(var(--i) * .12s); }
.vg-list b { display: block; font-size: 12px; } .vg-list small { font-size: 10.5px; color: #6b7280; }
.vg-pill { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 600; font-style: normal; background: #f3f4f6; color: #374151; }
.vg-pill--ok { background: #dcfce7; color: #15803d; } .vg-pill--warn { background: #fef3c7; color: #b45309; } .vg-pill--bad { background: #fee2e2; color: #dc2626; } .vg-pill--info { background: #dbeafe; color: #1d4ed8; }

/* Línea de tiempo */
.vg-tl { position: relative; flex: 1; margin: 18px 14px 0; }
.vg-tl__track { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: rgba(17, 19, 22, .1); }
.vg-tl__track i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--c); transform-origin: left; animation: vg-grow 1.6s ease-out both; }
.vg-tl__step { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 90px; text-align: center; animation: vg-in .5s ease-out both; animation-delay: calc(var(--i) * .2s); }
.vg-tl__step:first-child { transform: none; align-items: flex-start; text-align: left; }
.vg-tl__step:last-child { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.vg-tl__step span { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid rgba(17, 19, 22, .15); }
.vg-tl__step.is-done span { border-color: var(--c); background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.vg-tl__step b { font-size: 11.5px; line-height: 1.2; } .vg-tl__step small { font-size: 10.5px; color: #6b7280; }

/* Mapa */
.vg:has(.vg-map) { padding: 0; }
.vg-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.vg-map__route { stroke-dasharray: 100; animation: vg-draw 2.4s ease-out both; }
.vg-mover { offset-rotate: 0deg; animation: vg-move 7s linear infinite; }
.vg-ping { transform-box: fill-box; transform-origin: center; animation: vg-ping 2.4s ease-out infinite; }

/* Dona */
.vg-donut { flex: 1; display: flex; align-items: center; gap: 16px; }
.vg-donut__chart { position: relative; width: min(44%, 130px); }
.vg-donut__chart svg { width: 100%; height: auto; }
.vg-donut__chart span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.vg-donut__chart b { font-size: 19px; font-weight: 700; } .vg-donut__chart small { font-size: 10px; color: #6b7280; }
.vg-donut__seg { animation: vg-in .6s ease-out both; animation-delay: calc(var(--i) * .15s); }
.vg-donut ul { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; }
.vg-donut li { display: flex; align-items: center; gap: 7px; } .vg-donut li i { width: 9px; height: 9px; border-radius: 3px; } .vg-donut li b { margin-left: auto; }

/* Indicadores */
.vg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vg-kpis > div { padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(17, 19, 22, .04); animation: vg-in .5s ease-out both; animation-delay: calc(var(--i) * .1s); }
.vg-kpis small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.vg-kpis b { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.vg-trend { font-size: 10.5px; font-weight: 600; font-style: normal; }
.vg-trend--up { color: #16a34a; } .vg-trend--down { color: #dc2626; }
.vg-spark { flex: 1; width: 100%; min-height: 0; }

/* Mapa de calor */
.vg-heat { flex: 1; display: grid; grid-template-columns: 28px repeat(var(--cols), 1fr); gap: 4px; align-content: center; font-size: 9.5px; color: #6b7280; }
.vg-heat small { display: grid; place-items: center; }
.vg-heat i { aspect-ratio: 1.5; border-radius: 5px; background: var(--c); opacity: var(--o); animation: vg-fade .4s ease-out both; animation-delay: calc(var(--i) * .02s); }

/* Hardware */
.vg--dev { padding: 0; }
.vg-dev { position: absolute; inset: 0; }
.vg-dev--gps .vg-box { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 150px; height: 96px; border-radius: 18px; background: linear-gradient(160deg, #1f2937, #0b0f17); color: #fff; box-shadow: 0 24px 40px -18px rgba(17, 19, 22, .6); }
.vg-dev--gps .vg-box em { position: absolute; top: 12px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: vg-blink 1.2s steps(1) infinite; }
.vg-dev--gps .vg-box b { font-size: 15px; } .vg-dev--gps .vg-box small { font-size: 10px; opacity: .6; }
.vg-sat { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px -10px rgba(17, 19, 22, .35); }
.vg-sat svg { width: 20px; height: 20px; fill: none; stroke: #2563eb; stroke-width: 1.8; }
.vg-waves { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); }
.vg-waves i { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(37, 99, 235, .35); animation: vg-wave 2.6s ease-out infinite; }
.vg-waves i:nth-child(2) { animation-delay: .85s; } .vg-waves i:nth-child(3) { animation-delay: 1.7s; }

.vg-dev--cam { background: #15181b; }
/* Imagen de la cámara de cabina (infrarrojo) a todo el cuadro */
.vg-feed { position: absolute; inset: 0; }
.vg-feed svg { display: block; width: 100%; height: 100%; }
.vg-dev--cam .vg-chip--tr { top: auto; bottom: 14px; }

.vg-dev--fuel { background: linear-gradient(180deg, #fff7ed, #fde9d3); }
.vg-tank { position: absolute; left: 12%; top: 50%; transform: translateY(-50%); width: 46%; height: 52%; border-radius: 40px; background: #fff; border: 3px solid #cbd5e1; overflow: hidden; }
.vg-tank__liq { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, #fb923c, #ea580c); animation: vg-level 6s ease-in-out infinite; }
.vg-tank__probe { position: absolute; left: 55%; top: -4px; bottom: 10%; width: 6px; border-radius: 3px; background: #111316; }
.vg-readout { position: absolute; right: 9%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -18px rgba(17, 19, 22, .4); }
.vg-readout small { font-size: 10.5px; color: #6b7280; } .vg-readout b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .vg-readout em { font-size: 11px; font-style: normal; color: #16a34a; font-weight: 600; }

.vg-dev--door { background: linear-gradient(180deg, #eef1f6, #dfe5ee); }
.vg-doors { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); display: flex; gap: 4px; width: 200px; height: 130px; perspective: 400px; }
.vg-doors i { flex: 1; border-radius: 6px; background: linear-gradient(90deg, #f8fafc, #e2e8f0); border: 2px solid #94a3b8; background-image: repeating-linear-gradient(90deg, transparent 0 18px, rgba(148, 163, 184, .5) 18px 20px); }
.vg-doors i.is-open { transform-origin: right center; animation: vg-door 5s ease-in-out infinite; }
.vg-mag { position: absolute; left: calc(50% - 6px); top: 40%; width: 12px; height: 26px; border-radius: 4px; background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .2); }

.vg-dev--temp { background: linear-gradient(180deg, #ecf6fb, #d9edf7); }
.vg-reefer { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 46%; height: 52%; padding: 10px; border-radius: 14px; background: #fff; border: 2px solid #bae6fd; }
.vg-reefer i { border-radius: 8px; background: linear-gradient(180deg, #e0f2fe, #bae6fd); }
.vg-thermo { position: absolute; left: calc(10% + 46% - 10px); top: 28%; width: 16px; height: 46%; border-radius: 10px; background: #fff; border: 2px solid #0ea5e9; overflow: hidden; }
.vg-thermo i { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: #0ea5e9; animation: vg-level 5s ease-in-out infinite; }

.vg-dev--asset { background: linear-gradient(180deg, #fff8e6, #fde7b0); }
.vg-hours { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); padding: 16px 18px; border-radius: 18px; background: #111827; color: #fff; }
.vg-hours small { display: block; font-size: 10.5px; opacity: .6; } .vg-hours b { font: 700 24px/1.2 "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fbbf24; }
.vg-tracker { position: absolute; right: 16%; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; border-radius: 20px; background: #f59e0b; box-shadow: 0 16px 30px -14px rgba(180, 83, 9, .7); }
.vg-tracker em { position: absolute; inset: 22px; border-radius: 50%; background: #fff; animation: vg-ping 2.2s ease-out infinite; }

.vg-dev--phone { background: linear-gradient(180deg, #fff3ec, #ffe1cf); }
.vg-phone { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 128px; padding: 26px 12px 18px; border-radius: 26px; background: #111316; color: #fff; box-shadow: 0 24px 40px -18px rgba(17, 19, 22, .6); }
.vg-phone i { position: absolute; top: 8px; width: 36px; height: 5px; border-radius: 3px; background: #374151; }
.vg-phone b { font-size: 10.5px; font-weight: 500; opacity: .7; } .vg-phone strong { font-size: 30px; color: #fe773d; } .vg-phone small { font-size: 10px; opacity: .6; }

@keyframes vg-up { from { transform: scaleY(0); } }
@keyframes vg-grow { from { transform: scaleX(0); } }
@keyframes vg-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes vg-arc { from { stroke-dasharray: 0 400; } }
@keyframes vg-in { from { opacity: 0; translate: 0 6px; } }   /* «translate» no pisa el transform que posiciona cada elemento */
@keyframes vg-fade { from { opacity: 0; } }
@keyframes vg-pop { from { opacity: 0; translate: 0 6px; scale: .96; } }
@keyframes vg-move { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes vg-ping { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@keyframes vg-blink { 50% { opacity: .2; } }
@keyframes vg-wave { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes vg-scan { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(.94); border-color: #f59e0b; } }
@keyframes vg-level { 0%, 100% { height: 58%; } 60% { height: 46%; } }
@keyframes vg-door { 0%, 30%, 100% { transform: rotateY(0); } 50%, 80% { transform: rotateY(-55deg); } }

@container (max-width: 300px) { .vg-chip--bl { display: none; } .vg-kpis b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .vg *, .vg { animation: none !important; } .vg-mover { offset-distance: 60%; } }
.vg-pin { offset-rotate: 0deg; }

/* =========================================================
   AJUSTE A LA TARJETA — el cuerpo de cada viñeta se centra y aprovecha el alto disponible
   (antes quedaba arriba y dejaba vacía la mitad inferior en tarjetas altas).
   ========================================================= */
.vg { padding: clamp(16px, 5cqw, 28px); gap: 14px; }
.vg > :is(.vg-list, .vg-kpis, .vg-tl, .vg-donut, .vg-gauge, .vg-heat) { margin-block: auto; }

/* Línea de tiempo: centrada, más grande y con los extremos dentro de la tarjeta.
   (El primer hijo es la barra; el primer paso es el primer <div>.) */
.vg-tl { flex: none; height: 74px; margin-inline: 6px; }
.vg-tl__track { top: 11px; height: 5px; }
.vg-tl__step span { width: 26px; height: 26px; }
.vg-tl__step b { font-size: 12.5px; } .vg-tl__step small { font-size: 11px; }
.vg-tl__step:first-of-type { transform: none; align-items: flex-start; text-align: left; }
.vg-tl__step:last-of-type { transform: translateX(-100%); align-items: flex-end; text-align: right; }

/* Dona: centrada, más grande y con la leyenda a su lado */
.vg-donut { justify-content: center; gap: clamp(16px, 6cqw, 40px); }
.vg-donut__chart { width: min(42%, 180px); }
.vg-donut__chart b { font-size: clamp(18px, 5cqw, 26px); }
.vg-donut ul { flex: 0 1 240px; gap: 10px; font-size: 13px; }
.vg-donut li i { width: 11px; height: 11px; }

/* Medidor, lista e indicadores: centrados en el espacio */
.vg-gauge { flex: none; justify-content: center; }
.vg-list { width: 100%; }

/* Mapa de calor: columna de nombres a su medida, con aire entre nombre y celdas */
.vg-heat { flex: none; width: 100%; grid-template-columns: max-content repeat(var(--cols), minmax(0, 1fr)); column-gap: 6px; row-gap: 6px; font-size: 11px; }
.vg-heat .vg-heat__row { justify-items: end; place-items: center end; padding-right: 6px; font-weight: 600; color: #4b5563; }
.vg-heat i { aspect-ratio: 1.6; border-radius: 7px; }

/* Horómetro y combustible: los elementos se acomodan en fila (sin encimarse en tarjetas angostas) */
.vg-dev--asset, .vg-dev--fuel { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 6cqw, 36px); padding: 48px 18px 40px; }
.vg-dev--asset > .vg-hours, .vg-dev--asset > .vg-tracker, .vg-dev--fuel > .vg-tank, .vg-dev--fuel > .vg-readout { position: relative; left: auto; right: auto; top: auto; transform: none; flex: none; }
.vg-dev--fuel > .vg-tank { width: min(46%, 220px); height: 58%; }
.vg-hours b { font-size: clamp(18px, 6cqw, 24px); }
@container (max-width: 340px) {
  .vg-dev--asset .vg-tracker { width: 52px; height: 52px; border-radius: 16px; }
  .vg-dev--asset .vg-tracker em { inset: 16px; }
  .vg-hours { padding: 12px 14px; }
}

/* ---------- Ajustes de la revisión general (sin encimados ni textos fuera de la tarjeta) ---------- */
/* El encabezado nunca se encoge (antes la lista se le encimaba cuando faltaba espacio) */
.vg > :is(.vg-head, .vg-list, .vg-kpis, .vg-tl, .vg-donut, .vg-gauge, .vg-heat) { flex-shrink: 0; }
.vg-head b { margin-left: auto; padding-left: 10px; flex: none; }
/* Listas compactas: renglones más bajos */
.vg-list { gap: 6px; }
.vg-list li { padding: 8px 11px; }

/* Tarjetas pequeñas (mercados que atendemos): versión compacta de cada viñeta */
.market__media .vg { padding: 12px 14px; gap: 8px; }
.market__media .vg-head { font-size: 11.5px; }
.market__media .vg-head__ic { width: 22px; height: 22px; }
.market__media .vg-list { gap: 4px; }
.market__media .vg-list li { padding: 5px 9px; }
.market__media .vg-list li:nth-child(n+3) { display: none; }
.market__media .vg-list small { display: none; }
.market__media .vg-heat { row-gap: 3px; column-gap: 4px; font-size: 9.5px; }
.market__media .vg-heat i { aspect-ratio: 2.4; border-radius: 4px; }

/* Línea de tiempo en tarjetas angostas: etiquetas alternadas arriba y abajo de la barra */
@container (max-width: 440px) {
  .vg-tl { height: 96px; margin-top: 4px; }
  .vg-tl__track { top: 46px; }
  .vg-tl__step { top: 35px; width: 76px; }
  .vg-tl__step:nth-of-type(even) { flex-direction: column-reverse; top: auto; bottom: 36px; }
  .vg-tl__step b { font-size: 11px; } .vg-tl__step small { font-size: 10px; }
  .vg-tl__step span { width: 22px; height: 22px; }
}
/* Mapa de calor en tarjetas anchas: celdas con alto acotado (la proporción las hacía enormes) */
.vg-heat i { aspect-ratio: auto; height: clamp(16px, 6cqw, 30px); }

/* ── Cuadros de cámara en movimiento (cámara de cabina y frontal) ──
   Todo se mueve en coordenadas del dibujo (160 × 100), por eso transform-box: view-box. */
.dk-nod, .dk-tilt, .dk-bob, .dk-near, .dk-far, .dk-sign, .dk-lane rect, .dk-box { transform-box: view-box; }
.dk-rec { animation: dk-rec 1s steps(1) infinite; }
.dk-grain { animation: dk-grain .35s steps(3) infinite; }
.dk-nod { transform-origin: 86px 62px; animation: dk-nod 3.6s ease-in-out infinite; }            /* cabeceo de sueño */
.dk-tilt { transform-origin: 86px 62px; animation: dk-tilt 4.2s ease-in-out infinite; }          /* plática por teléfono */
.dk-bob { animation: dk-bob 2.8s ease-in-out infinite; }
.dk-screen { animation: dk-glow 1.8s ease-in-out infinite; }
.dk-box { transform-origin: 87px 50px; animation: dk-box 1.6s ease-in-out infinite; }
.dk-alert { animation: dk-alert 1.2s ease-in-out infinite; }
.dk-brake { animation: dk-alert .9s ease-in-out infinite; }
.dk-near { transform-origin: 80px 76px; animation: dk-near 2.8s ease-in-out infinite; }         /* el auto de enfrente se acerca al frenar */
.dk-far { animation: dk-far 3s ease-in-out infinite; }
.dk-lane rect { transform-origin: 80px 46px; animation: dk-lane 1.6s cubic-bezier(.55, 0, 1, .45) infinite; animation-delay: calc(var(--d) * -.4s); }
.dk-lane--fast rect { animation-duration: .7s; animation-delay: calc(var(--d) * -.175s); }
.dk-sign { transform-box: view-box; transform-origin: 22px 50px; animation: dk-sign 3s cubic-bezier(.5, 0, 1, .6) infinite; }
@keyframes dk-rec { 50% { opacity: .15; } }
@keyframes dk-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-4px, 3px); } 66% { transform: translate(3px, -4px); } }
@keyframes dk-nod { 0%, 100% { transform: rotate(-6deg); } 45%, 60% { transform: rotate(7deg) translateY(1.5px); } }
@keyframes dk-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes dk-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-.6px, -1.4px); } }
@keyframes dk-glow { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }
@keyframes dk-box { 0%, 100% { transform: scale(1); } 50% { transform: scale(.96); } }
@keyframes dk-alert { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes dk-near { 0% { transform: scale(.9); } 55%, 100% { transform: scale(1.06); } }
@keyframes dk-far { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.5px, 0); } }
@keyframes dk-lane { from { transform: translateY(0) scale(.4); } to { transform: translateY(58px) scale(3.6); } }
@keyframes dk-sign { 0% { transform: translate(14px, -2px) scale(.5); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-22px, 6px) scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dk-rec, .dk-grain, .dk-nod, .dk-tilt, .dk-bob, .dk-screen, .dk-box, .dk-alert, .dk-brake, .dk-near, .dk-far, .dk-lane rect, .dk-sign { animation: none; }
  .dk-lane rect { transform: translateY(20px) scale(1.6); }
}