/* v5.2.4 — Hero "City Night Drive": night Dhaka skyline, red jam (left) → Alin Digital signal turns green → light streaks L→R.
   Roadside signs light up in sequence. Fixed box (no layout shift); animates ONLY transform + opacity.
   Render-blocking by design (IRON PERF LOCK handle alinbd-hero-traffic). prefers-reduced-motion → static frame. */
.alin-hero-traffic.alin-night-drive{margin:6px 0 12px;max-width:34rem;height:104px;min-height:104px;line-height:1.2;contain:layout paint}
.alin-night-drive .nd-scene{position:relative;height:84px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0b1830 0%,#13284a 58%,#0a1422 100%);box-shadow:inset 0 0 0 1px #24406a}
.alin-night-drive .nd-moon{position:absolute;top:8px;right:14px;width:12px;height:12px;border-radius:50%;background:#ffe9b8;opacity:.85;box-shadow:0 0 10px #ffe9b866}
.alin-night-drive .nd-sky{position:absolute;left:0;right:0;bottom:24px;width:100%;height:40px;display:block}
.alin-night-drive .nd-sky .b{fill:#1b335a}.alin-night-drive .nd-sky .b2{fill:#22406c}.alin-night-drive .nd-sky .w{fill:#ffd27a;opacity:.55}
/* Roadside signs */
.alin-night-drive .nd-signs{position:absolute;z-index:3;top:6px;left:8px;right:30px;display:flex;justify-content:space-between;gap:4px;margin:0;padding:0;list-style:none}
.alin-night-drive .nd-sign{position:relative;display:block;padding:3px 6px;border-radius:5px;border:1px solid #2c4670;background:#0f2140;color:#5f7397;font:800 8px/1 Outfit,system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap}
.alin-night-drive .nd-sign::after{content:attr(data-l);position:absolute;inset:-1px;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#ffbe3b;color:#10203a;box-shadow:0 0 8px #ffbe3b99;opacity:0;animation:nd-sign 9s linear infinite}
.alin-night-drive .nd-sign:nth-child(2)::after{animation-delay:.7s}
.alin-night-drive .nd-sign:nth-child(3)::after{animation-delay:1.4s}
.alin-night-drive .nd-sign:nth-child(4)::after{animation-delay:2.1s}
.alin-night-drive .nd-sign:nth-child(5)::after{animation-delay:2.8s;background:#4be38f;box-shadow:0 0 9px #4be38f99}
/* Road */
.alin-night-drive .nd-road{position:absolute;z-index:2;left:0;right:0;bottom:0;height:24px;background:#08111d;overflow:hidden}
.alin-night-drive .nd-road::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:repeating-linear-gradient(90deg,#f5d58a 0 10px,transparent 10px 22px);opacity:.45}
/* Left: red jam tail lights (brake pulse) */
.alin-night-drive .nd-jam{position:absolute;left:4%;width:40%;top:4px;bottom:4px}
.alin-night-drive .nd-jam i{position:absolute;width:7px;height:4px;border-radius:2px;background:#ff3b3b;box-shadow:0 0 6px #ff3b3bcc;animation:nd-brake 1.8s ease-in-out infinite alternate}
.alin-night-drive .nd-jam i:nth-child(1){left:2%;top:2px}.alin-night-drive .nd-jam i:nth-child(2){left:12%;top:2px}
.alin-night-drive .nd-jam i:nth-child(3){left:26%;top:11px;animation-delay:.4s}.alin-night-drive .nd-jam i:nth-child(4){left:36%;top:11px;animation-delay:.4s}
.alin-night-drive .nd-jam i:nth-child(5){left:50%;top:2px;animation-delay:.9s}.alin-night-drive .nd-jam i:nth-child(6){left:60%;top:2px;animation-delay:.9s}
.alin-night-drive .nd-jam i:nth-child(7){left:74%;top:11px;animation-delay:.2s}.alin-night-drive .nd-jam i:nth-child(8){left:84%;top:11px;animation-delay:.2s}
/* Right: light streaks L→R (each streak is 100% wide, translateX sweeps it across its own width) */
.alin-night-drive .nd-streaks{position:absolute;left:52%;right:0;top:0;bottom:0;overflow:hidden}
.alin-night-drive .nd-streaks i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent 0,transparent 62%,#7fe3ff 90%,#fff 100%);transform:translate3d(-100%,0,0);will-change:transform;animation:nd-streak 1.6s linear infinite}
.alin-night-drive .nd-streaks i:nth-child(1){top:4px}
.alin-night-drive .nd-streaks i:nth-child(2){top:8px;animation-duration:2.1s;animation-delay:.5s;background:linear-gradient(90deg,transparent 0,transparent 66%,#ffe9a8 92%,#fff 100%)}
.alin-night-drive .nd-streaks i:nth-child(3){top:15px;animation-duration:1.3s;animation-delay:.9s}
.alin-night-drive .nd-streaks i:nth-child(4){top:19px;animation-duration:1.9s;animation-delay:.2s;background:linear-gradient(90deg,transparent 0,transparent 66%,#4be38f 92%,#eafff2 100%)}
/* Centre: Alin Digital signal (red → amber → green by opacity) */
.alin-night-drive .nd-signal{position:absolute;z-index:4;left:50%;top:30px;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 6px;border-radius:999px;background:#0a1626;box-shadow:0 0 0 1px #35557f,0 6px 14px #0008;transform:translate3d(-50%,0,0)}
.alin-night-drive .nd-signal::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:6px;margin-left:-1px;background:#35557f}
.alin-night-drive .nd-lamps{display:flex;gap:3px}
.alin-night-drive .nd-lamps b{display:block;width:7px;height:7px;border-radius:50%;background:#2a3a52}
.alin-night-drive .nd-lamps b::after{content:"";display:block;width:100%;height:100%;border-radius:50%;opacity:0}
.alin-night-drive .nd-lamps .r::after{background:#ff3b3b;box-shadow:0 0 6px #ff3b3b;animation:nd-red 6s linear infinite}
.alin-night-drive .nd-lamps .a::after{background:#ffbe3b;box-shadow:0 0 6px #ffbe3b;animation:nd-amber 6s linear infinite}
.alin-night-drive .nd-lamps .g::after{background:#3ddc84;box-shadow:0 0 7px #3ddc84;animation:nd-green 6s linear infinite}
.alin-night-drive .nd-signal strong{font:800 10px/1 Outfit,system-ui,sans-serif;color:#fff8ec;letter-spacing:.02em;white-space:nowrap}
/* Captions */
.alin-night-drive .nd-captions{display:flex;justify-content:space-between;height:14px;margin-top:6px;padding:0 4px}
.alin-night-drive .nd-cap{font:800 9px/14px Outfit,system-ui,sans-serif;letter-spacing:.06em}
.alin-night-drive .nd-cap-jam{color:#b4231b}.alin-night-drive .nd-cap-smooth{color:#13724a}
@keyframes nd-sign{0%{opacity:0}6%{opacity:1}72%{opacity:1}80%{opacity:0}100%{opacity:0}}
@keyframes nd-brake{from{opacity:.55}to{opacity:1}}
@keyframes nd-streak{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}
@keyframes nd-red{0%,34%{opacity:1}36%,100%{opacity:0}}
@keyframes nd-amber{0%,34%{opacity:0}36%,48%{opacity:1}50%,100%{opacity:0}}
@keyframes nd-green{0%,48%{opacity:0}50%,98%{opacity:1}100%{opacity:0}}
@media (max-width:420px){.alin-night-drive .nd-signs{left:5px;right:24px;gap:3px}.alin-night-drive .nd-sign{padding:3px 4px;font-size:8px;letter-spacing:0}.alin-night-drive .nd-cap{font-size:10px}}
@media (max-width:370px){.alin-night-drive .nd-sign{font-size:7.5px;padding:3px 3px}}
/* Static frame: green on, every sign lit, streaks frozen. */
@media (prefers-reduced-motion:reduce){
  .alin-night-drive *,.alin-night-drive *::before,.alin-night-drive *::after{animation:none!important}
  .alin-night-drive .nd-sign::after,.alin-night-drive .nd-lamps .g::after{opacity:1}
  .alin-night-drive .nd-lamps .r::after,.alin-night-drive .nd-lamps .a::after{opacity:0}
  .alin-night-drive .nd-streaks i{transform:translate3d(-8%,0,0)}
}
.alin-motion-reduced .alin-night-drive *,.alin-motion-reduced .alin-night-drive *::before,.alin-motion-reduced .alin-night-drive *::after{animation:none!important}
.alin-motion-reduced .alin-night-drive .nd-sign::after,.alin-motion-reduced .alin-night-drive .nd-lamps .g::after{opacity:1}
.alin-motion-reduced .alin-night-drive .nd-streaks i{transform:translate3d(-8%,0,0)}
/* v5.2.8 settle: motion only after load + first interaction (html.mo) and while the hero is on screen (.nd-run); still frame otherwise */
html:not(.mo) .alin-night-drive *,html:not(.mo) .alin-night-drive *::after,.alin-night-drive:not(.nd-run) *,.alin-night-drive:not(.nd-run) *::after{animation:none!important}
html:not(.mo) .alin-night-drive .nd-lamps .a::after,html:not(.mo) .alin-night-drive .nd-lamps .r::after,.alin-night-drive:not(.nd-run) .nd-lamps .a::after,.alin-night-drive:not(.nd-run) .nd-lamps .r::after{opacity:0}
html:not(.mo) .alin-night-drive .nd-sign::after,html:not(.mo) .alin-night-drive .nd-lamps .g::after,.alin-night-drive:not(.nd-run) .nd-sign::after,.alin-night-drive:not(.nd-run) .nd-lamps .g::after{opacity:1}
