/* ══════════════════════════════════════════════════════════════
HERO VISUAL — TRANSPORT PAGE · Four Data (dark background)
══════════════════════════════════════════════════════════════ */
.fdt-hero-visual{
--fd-blue:#1BA1DC;
--fd-blue-lit:#3CBBEE;
--fd-blue-soft:#85D1F4;
--fd-amber:#F5B942;
--fd-green:#34D399;
--fd-surface:rgba(16,38,58,.72);
--fd-stroke:rgba(133,209,244,.24);
--fd-text:#EAF6FD;
--fd-muted:#8FB0C6;
--fd-ease:cubic-bezier(.22,1,.36,1);
position:relative;
width:100%;
max-width:580px;
margin-inline:auto;
min-width:0;
font-family:"DM Sans","Inter","Montserrat",system-ui,Arial,sans-serif;
color:var(--fd-text);
}
.fdt-hero-visual,.fdt-hero-visual *{box-sizing:border-box;}
.fdt-hero-visual::before{
content:"";position:absolute;inset:4% 0 6% 0;
background:radial-gradient(56% 54% at 52% 52%,rgba(27,161,220,.28),transparent 68%);
filter:blur(10px);z-index:0;pointer-events:none;
}
/* ── SVG ── */
.fdt-scene{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
.fdt-asset{filter:drop-shadow(0 0 7px rgba(60,187,238,.28));}
/* the truck arrives, then drives smoothly (iso axis of vehicle) */
.fdt-truck{
animation:fdtArrive 1.4s var(--fd-ease) both,
fdtDrive 4.4s ease-in-out 1.7s infinite;
}
@keyframes fdtArrive{from{transform:translate(58px,-35px);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes fdtDrive{0%,100%{transform:translate(0,0)}50%{transform:translate(-13px,7.9px)}}
.fdt-scene .ln{
fill:none;stroke:var(--fd-blue-lit);stroke-width:3;
stroke-miterlimit:10;stroke-linecap:round;
stroke-dasharray:100;stroke-dashoffset:100;
animation:fdtDraw 1s var(--fd-ease) forwards;
animation-delay:calc(var(--gd,.1s) + var(--i,0) * .016s);
}
.fdt-scene .ln--thin{stroke-width:1.6;opacity:.75;}
@keyframes fdtDraw{to{stroke-dashoffset:0}}
@keyframes fdtFade{to{opacity:1}}
/* ── Sensor + waves ── */
.fdt-wifi{opacity:0;animation:fdtFade .5s var(--fd-ease) forwards;animation-delay:var(--wd);
filter:drop-shadow(0 0 5px rgba(60,187,238,.65));}
.fdt-sensor{fill:#7BD5FA;stroke:none;}
.fdt-wave{fill:none;stroke:#7BD5FA;stroke-width:3.2;stroke-linecap:round;
transform-origin:0 6px;animation:fdtPing 2.4s ease-out infinite;}
.fdt-w1{animation-delay:calc(var(--wd) + 0s)}
.fdt-w2{animation-delay:calc(var(--wd) + .28s)}
.fdt-w3{animation-delay:calc(var(--wd) + .56s)}
@keyframes fdtPing{
0%{opacity:0;transform:scale(.55)} 22%{opacity:1;transform:scale(1)}
62%{opacity:.55;transform:scale(1.06)} 100%{opacity:0;transform:scale(1.14)}
}
/* ── Floating panels ── */
.fdt-card{
position:absolute;z-index:4;margin:0;
background:var(--fd-surface);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
backdrop-filter:blur(16px) saturate(1.3);
border:1px solid var(--fd-stroke);border-radius:16px;
box-shadow:0 18px 40px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07);
opacity:0;transform:translateY(10px) scale(.97);
animation:fdtCardIn .6s var(--fd-ease) forwards;animation-delay:var(--cd);
}
@keyframes fdtCardIn{to{opacity:1;transform:none}}
.fdt-card__head{display:flex;align-items:center;gap:6px;
font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--fd-muted);}
.fdt-live{width:6px;height:6px;border-radius:50%;background:var(--fd-green);flex:none;
box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:fdtLive 2s ease-out infinite;}
@keyframes fdtLive{70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
/* — 1. mini GPS map — */
.fdt-card--map{top:0;left:0;width:47%;min-width:186px;padding:12px 13px 10px;}
.fdt-map{display:block;width:100%;height:auto;margin-top:7px;overflow:visible;}
.fdt-grid{fill:none;stroke:rgba(133,209,244,.13);stroke-width:1;}
.fdt-road{
fill:none;stroke:rgba(133,209,244,.38);stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:100;stroke-dashoffset:100;
animation:fdtDraw 1.6s var(--fd-ease) forwards;animation-delay:calc(var(--cd) + .2s);
}
.fdt-road-run{ /* glowing segment moving along the road */
fill:none;stroke:#7BD5FA;stroke-width:2.8;stroke-linecap:round;
filter:drop-shadow(0 0 4px rgba(123,213,250,.9));
stroke-dasharray:15 85;stroke-dashoffset:100;opacity:0;
animation:fdtFade .4s ease forwards, fdtRun 3.4s linear infinite;
animation-delay:calc(var(--cd) + 1.7s), calc(var(--cd) + 1.7s);
}
@keyframes fdtRun{to{stroke-dashoffset:0}}
.fdt-pin-a{fill:var(--fd-blue-soft);opacity:0;animation:fdtFade .4s ease forwards;animation-delay:calc(var(--cd) + .3s);}
.fdt-pin-b{fill:none;stroke:#7BD5FA;stroke-width:1.8;stroke-linejoin:round;
opacity:0;animation:fdtPinIn .5s var(--fd-ease) forwards;animation-delay:calc(var(--cd) + 1.7s);
transform-box:fill-box;transform-origin:50% 100%;}
@keyframes fdtPinIn{from{opacity:0;transform:translateY(-5px) scale(.7)}to{opacity:1;transform:none}}
.fdt-card__foot{margin-top:9px;font-size:10.5px;color:var(--fd-muted);}
.fdt-card__foot b{color:var(--fd-text);font-weight:700;}
/* — 2. traffic alert — */
.fdt-card--alert{
top:40%;right:0;width:46%;min-width:176px;
display:flex;align-items:center;gap:10px;padding:10px 12px;
border-color:rgba(245,185,66,.42);
background:linear-gradient(rgba(245,185,66,.10),rgba(245,185,66,.10)),var(--fd-surface);
}
.fdt-alert__ico{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
background:rgba(245,185,66,.16);animation:fdtBlink 1.8s ease-in-out infinite;animation-delay:calc(var(--cd) + .6s);}
.fdt-alert__ico svg{width:15px;height:15px;fill:none;stroke:var(--fd-amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@keyframes fdtBlink{0%,100%{background:rgba(245,185,66,.16)}50%{background:rgba(245,185,66,.40)}}
.fdt-alert__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.fdt-alert__txt strong{font-size:12.5px;font-weight:700;}
.fdt-alert__txt span{font-size:11px;color:var(--fd-muted);}
/* — 3. live position — */
.fdt-card--pos{bottom:1%;right:0;width:47%;min-width:190px;padding:12px 13px 11px;}
.fdt-pos__val{display:flex;align-items:baseline;gap:4px;margin:3px 0 8px;
font-size:24px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.fdt-pos__val span{font-size:12px;font-weight:600;color:var(--fd-muted);}
.fdt-pos__row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
font-size:11px;color:var(--fd-muted);}
.fdt-pos__row strong{font-size:12.5px;font-weight:700;color:var(--fd-text);}
.fdt-pos__next{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:8px;
border-top:1px solid rgba(133,209,244,.16);font-size:11px;color:var(--fd-muted);}
.fdt-pos__next b{color:var(--fd-blue-soft);font-weight:700;}
.fdt-pos__next svg{flex:none;width:14px;height:16px;fill:none;stroke:var(--fd-blue-soft);
stroke-width:1.7;stroke-linejoin:round;
animation:fdtPinBob 2.6s ease-in-out infinite;animation-delay:calc(var(--cd) + 1s);}
@keyframes fdtPinBob{0%,70%,100%{transform:translateY(0)}82%{transform:translateY(-2.5px)}}
/* ── Responsive ── */
@media (max-width:860px){
.fdt-hero-visual{max-width:470px;}
.fdt-card--map{width:48%;}
.fdt-card--pos{width:52%;}
.fdt-card--alert{top:46%;width:50%;}
}
@media (max-width:600px){
.fdt-hero-visual{max-width:344px;padding-bottom:13%;}
.fdt-scene .ln{stroke-width:4;}
.fdt-scene .ln--thin{stroke-width:2.2;}
.fdt-card{border-radius:13px;}
.fdt-card--map{top:0;left:0;width:62%;min-width:0;padding:9px 10px 8px;}
.fdt-card__foot{margin-top:6px;font-size:10px;}
.fdt-card--alert{top:50%;right:0;width:64%;min-width:0;padding:8px 10px;gap:8px;}
.fdt-alert__ico{width:24px;height:24px;border-radius:8px;}
.fdt-alert__txt strong{font-size:11.5px;}
.fdt-alert__txt span{font-size:10px;}
.fdt-card--pos{bottom:0;right:0;width:66%;min-width:0;padding:9px 10px;}
.fdt-pos__val{font-size:18px;margin-bottom:6px;}
.fdt-pos__val span{font-size:10.5px;}
.fdt-pos__row{font-size:10px;}
.fdt-pos__row strong{font-size:11.5px;}
.fdt-pos__next{margin-top:7px;padding-top:6px;font-size:10px;}
}
@media (prefers-reduced-motion:reduce){
.fdt-hero-visual *{animation:none !important;}
.fdt-scene .ln{stroke-dashoffset:0 !important;}
.fdt-truck{transform:none !important;opacity:1 !important;}
.fdt-card,.fdt-wifi,.fdt-pin-a,.fdt-pin-b{opacity:1 !important;transform:none !important;}
.fdt-road{stroke-dashoffset:0 !important;}
.fdt-road-run{opacity:1 !important;stroke-dashoffset:55 !important;}
}
TR-08 · Dijon → Lyon
Traffic slowdown A6 Beaune · ETA +12 min
Live position · in transit
82km/h
Route segment A6 · Beaune
Next waypoint · Lyon Sud 3:10 PM