/* v5.1.7 — One-way L→R hero traffic: messy rickshaw+troubles → Alin Digital gate → smooth exits. Transform-only. */
.alin-hero-traffic{
  margin:6px 0 12px;
  max-width:34rem;
  min-height:88px;
  line-height:1.2;
}
.alin-hero-traffic .ht-scene{
  position:relative;
  display:block;
  min-height:64px;
  padding:10px 8px;
  border-radius:16px;
  background:#fff3e0;
  box-shadow:inset 0 0 0 1px #e8d4bd, 0 8px 20px #31180a12;
  overflow:hidden;
}
.alin-hero-traffic .ht-road{
  position:relative;
  z-index:1;
  height:44px;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(180deg,#ffe8cc 0%,#fff3e0 55%,#f5e0c8 100%);
  contain:layout paint;
}
.alin-hero-traffic .ht-road::before{
  content:"";
  position:absolute;
  left:6px;right:6px;top:50%;
  border-top:1.5px dashed #e0c4a4;
  opacity:.75;
  pointer-events:none;
  z-index:0;
}
.alin-hero-traffic .ht-track.ht-oneway{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:max-content;
  height:100%;
  gap:0;
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
  animation:ht-oneway-marquee 18s linear infinite;
}
.alin-hero-traffic .ht-cluster{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:100%;
}
/* LEFT story: piled troubles on/around lead rickshaw */
.alin-hero-traffic .ht-jam-cluster{
  gap:0;
  padding-right:4px;
}
.alin-hero-traffic .ht-jam-cluster .ht-v{
  margin:0 -6px;
  flex:0 0 auto;
}
.alin-hero-traffic .ht-jam-cluster .ht-rick-lead{
  margin:0 2px 0 0;
  width:28px;
  height:24px;
  z-index:2;
  box-shadow:0 2px 0 #33241b66, 0 0 0 2px #a44a1228;
}
.alin-hero-traffic .ht-trouble{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin:0 -4px;
  padding:3px 6px;
  min-height:18px;
  border-radius:6px;
  background:#a44a12;
  color:#fff8ec;
  font:800 7px/1 Outfit,system-ui,sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:0 1px 0 #33241b55;
}
.alin-hero-traffic .ht-jam-cluster .ht-trouble:nth-child(odd){ margin-top:10px; }
.alin-hero-traffic .ht-jam-cluster .ht-trouble:nth-child(3n){ margin-top:2px; background:#c45c28; }
.alin-hero-traffic .ht-jam-cluster .ht-trouble:nth-child(4n){ background:#5a4a40; }
.alin-hero-traffic .ht-jam-cluster .ht-trouble:nth-child(5n){ background:#8b3a12; }
/* Gap under/around gate so jam→smooth reads as through the brand */
.alin-hero-traffic .ht-spacer{
  flex:0 0 7.5rem;
  width:7.5rem;
  height:1px;
}
/* RIGHT story: spaced orderly exits, same direction */
.alin-hero-traffic .ht-smooth-cluster{
  gap:16px;
  padding-left:6px;
}
.alin-hero-traffic .ht-smooth-cluster .ht-v{
  margin:0;
  transform:none !important;
  flex:0 0 auto;
}
/* Center gate overlay — does not reverse motion */
.alin-hero-traffic .ht-gate{
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:7.2rem;
  padding:8px 12px;
  border-radius:999px;
  background:#193b35;
  color:#fff8ec;
  box-shadow:0 0 0 5px #a44a1228, 0 6px 16px #193b3540;
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
}
.alin-hero-traffic .ht-gate strong{
  font:800 11px/1.1 Outfit,system-ui,sans-serif;
  letter-spacing:.03em;
}
.alin-hero-traffic .ht-gate span{
  font:700 8px/1 Outfit,system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff0da;
  opacity:.92;
}
.alin-hero-traffic .ht-v{
  position:relative;
  display:block;
  height:16px;
  border-radius:4px;
  box-shadow:0 1px 0 #33241b55, inset 0 1px 0 #ffffff33;
}
.alin-hero-traffic .ht-v::before,
.alin-hero-traffic .ht-v::after{
  content:"";
  position:absolute;
  bottom:-3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#33241b;
}
.alin-hero-traffic .ht-v::before{ left:4px; }
.alin-hero-traffic .ht-v::after{ right:4px; }
.alin-hero-traffic .ht-car{ width:32px; }
.alin-hero-traffic .ht-van{ width:26px; }
.alin-hero-traffic .ht-bus{ width:40px; height:15px; }
.alin-hero-traffic .ht-rick{
  width:20px;
  height:20px;
  border-radius:50% 50% 5px 5px;
}
.alin-hero-traffic .ht-rick::before{ left:2px; bottom:-2px; }
.alin-hero-traffic .ht-rick::after{ right:2px; bottom:-2px; }
.alin-hero-traffic .c-terra{ background:#a44a12; }
.alin-hero-traffic .c-orange{ background:#c45c28; }
.alin-hero-traffic .c-teal{ background:#193b35; }
.alin-hero-traffic .c-ink{ background:#5a4a40; }
.alin-hero-traffic .c-deep{ background:#8b3a12; }
.alin-hero-traffic .t-n6{ transform:rotate(-6deg); }
.alin-hero-traffic .t-n8{ transform:rotate(-8deg); }
.alin-hero-traffic .t-n10{ transform:rotate(-10deg); }
.alin-hero-traffic .t-n14{ transform:rotate(-14deg); }
.alin-hero-traffic .t-n16{ transform:rotate(-16deg); }
.alin-hero-traffic .t-n18{ transform:rotate(-18deg); }
.alin-hero-traffic .t-p8{ transform:rotate(8deg); }
.alin-hero-traffic .t-p12{ transform:rotate(12deg); }
.alin-hero-traffic .t-p14{ transform:rotate(14deg); }
.alin-hero-traffic .t-p18{ transform:rotate(18deg); }
.alin-hero-traffic .t-p20{ transform:rotate(20deg); }
.alin-hero-traffic .t-p22{ transform:rotate(22deg); }
.alin-hero-traffic .ht-captions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
  padding:0 4px;
}
.alin-hero-traffic .ht-cap{
  font:800 9px/1 Outfit,system-ui,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.alin-hero-traffic .ht-cap-jam{ color:#a44a12; }
.alin-hero-traffic .ht-cap-smooth{ color:#193b35; }

/* Single direction only: content moves left→right visually via track sliding 0 → -50% */
@keyframes ht-oneway-marquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

@media (max-width:680px){
  .alin-hero-traffic{ min-height:82px; }
  .alin-hero-traffic .ht-scene{ min-height:58px; padding:8px 6px; }
  .alin-hero-traffic .ht-road{ height:40px; }
  .alin-hero-traffic .ht-gate{ min-width:5.8rem; padding:7px 9px; }
  .alin-hero-traffic .ht-gate strong{ font-size:10px; }
  .alin-hero-traffic .ht-spacer{ flex-basis:5.8rem; width:5.8rem; }
  .alin-hero-traffic .ht-trouble{ font-size:6px; padding:2px 4px; }
  .alin-hero-traffic .ht-track.ht-oneway{ animation-duration:22s; }
}

@media (prefers-reduced-motion:reduce){
  .alin-hero-traffic .ht-track.ht-oneway{
    animation:none !important;
  }
}
.alin-motion-reduced .alin-hero-traffic .ht-track.ht-oneway{
  animation:none !important;
}