/* MISTER FAST V28 — Motion Design Layer */
.mf-v28-motion{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden}
.mf-v28-route-svg{position:absolute;inset:0;width:100%;height:100%}
.mf-v28-route-svg path{
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:16 18;
  animation:mfV28Dash 5s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,196,0,.85));
}
#mfRouteA{stroke:#ffc400}
#mfRouteB{stroke:#55b8ff;animation-delay:1.2s}

.mf-v28-vehicle{
  position:absolute;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  border:2px solid #fff;
  background:#ffc400;
  box-shadow:0 0 0 8px rgba(255,196,0,.15),0 12px 28px rgba(0,33,90,.25);
  font-size:20px;
  offset-rotate:auto;
}
.mf-v28-vehicle--a{
  offset-path:path("M1090,630 C1210,530 1350,545 1455,430 C1550,325 1650,270 1830,180");
  animation:mfV28DriveA 8s linear infinite;
}
.mf-v28-vehicle--b{
  offset-path:path("M1030,690 C1190,665 1300,720 1430,640 C1580,548 1670,520 1850,610");
  animation:mfV28DriveB 10s linear infinite 1.5s;
  background:#fff;
}

.mf-v28-radar-scan{
  position:absolute;right:18%;bottom:13%;
  width:130px;height:130px;border-radius:50%;
}
.mf-v28-radar-scan span{
  position:absolute;inset:50%;
  width:16px;height:16px;
  margin:-8px;
  border:2px solid rgba(255,196,0,.9);
  border-radius:50%;
  animation:mfV28Radar 2.4s ease-out infinite;
}
.mf-v28-radar-scan span:nth-child(2){animation-delay:.8s}
.mf-v28-radar-scan span:nth-child(3){animation-delay:1.6s}

.mf-v28-driver-counter{
  position:absolute;right:2.2%;top:13%;
  width:190px;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:18px;
  background:rgba(0,28,72,.72);
  color:#fff;
  backdrop-filter:blur(12px);
  box-shadow:0 14px 36px rgba(0,24,70,.28);
  font-family:Kanit,sans-serif;
}
.mf-v28-driver-counter>div{display:flex;align-items:center;gap:8px}
.mf-v28-driver-counter i{
  width:10px;height:10px;border-radius:50%;background:#28d77f;
  box-shadow:0 0 0 0 rgba(40,215,127,.6);
  animation:mfV28Online 1.6s infinite;
}
.mf-v28-driver-counter b{color:#ffc400}
.mf-v28-driver-counter strong{display:block;font-size:34px;line-height:1.05;margin:8px 0 2px}
.mf-v28-driver-counter small{opacity:.85}

.mf-v28-toast{
  position:absolute;left:3%;bottom:18%;
  display:flex;align-items:center;gap:12px;
  max-width:300px;padding:12px 15px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:16px;background:rgba(255,255,255,.91);
  color:#082451;box-shadow:0 18px 38px rgba(0,24,72,.22);
  font-family:Kanit,sans-serif;
  transform:translateY(20px);opacity:0;
}
.mf-v28-toast.is-showing{animation:mfV28Toast 4.6s ease both}
.mf-v28-toast>span{font-size:24px}
.mf-v28-toast b,.mf-v28-toast small{display:block}
.mf-v28-toast small{opacity:.7}

@keyframes mfV28Dash{to{stroke-dashoffset:-136}}
@keyframes mfV28DriveA{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes mfV28DriveB{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes mfV28Radar{
  0%{width:16px;height:16px;margin:-8px;opacity:1}
  100%{width:130px;height:130px;margin:-65px;opacity:0}
}
@keyframes mfV28Online{70%{box-shadow:0 0 0 12px rgba(40,215,127,0)}}
@keyframes mfV28Toast{
  0%,100%{transform:translateY(20px);opacity:0}
  10%,86%{transform:translateY(0);opacity:1}
}

@media(max-width:1150px){
  .mf-v28-driver-counter{right:1.4%;top:15%;width:160px}
  .mf-v28-route-svg,.mf-v28-vehicle{opacity:.78}
}
@media(max-width:760px){
  .mf-v28-route-svg,.mf-v28-vehicle,.mf-v28-driver-counter{display:none}
  .mf-v28-radar-scan{right:8%;bottom:16%;transform:scale(.72)}
  .mf-v28-toast{left:12px;right:12px;bottom:12%;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .mf-v28-route-svg path,.mf-v28-vehicle,.mf-v28-radar-scan span,.mf-v28-driver-counter i,.mf-v28-toast{
    animation:none!important;
  }
}

.mf-fullhero__mapfx,.mf-v28-motion{transform:translate(var(--mf-v28-x,0),var(--mf-v28-y,0));transition:transform .25s ease-out}