/* ============================================================
   BarDraft — truck-banner.css
   Bannière décorative camion de pompier
   ============================================================ */

.truck-banner {
  position: relative; z-index: 1;
  width: 100%; height: 180px; overflow: hidden;
  /* border-top: 1px solid var(--line); */
  /* border-bottom: 1px solid var(--line); */
  /* background: var(--bg2); */
}

.trk-scene { position: relative; width: 100%; height: 100%; }

/* ── Bâtiments en arrière-plan ── */
.trk-buildings {
  position: absolute; left: 0; bottom: 40px;
  width: 200%; height: 120px;
  opacity: 0.45;
  animation: trk-scroll-bg 6s linear infinite;
}
html[data-theme="dark"] .trk-buildings { opacity: 0.22; }

@keyframes trk-scroll-bg {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Sol ── */
.trk-ground {
  position: absolute; left: 0; right: 0; bottom: 40px;
  height: 2px; background: rgba(20,20,25,.18); border-radius: 2px;
}
html[data-theme="dark"] .trk-ground { background: rgba(255,255,255,.18); }

/* ── Lignes de vitesse (dans .trk-truck, suivent le camion) ── */
.trk-speedlines {
  position: absolute; top: 42%; right: 100%;
  width: 130px; height: 60px;
  transform: translateY(-50%);
  opacity: 0;
  animation: trk-speed-fade 2.2s ease-out .65s infinite;
}
.trk-speedlines line { stroke: rgba(20,20,25,.3); stroke-width: 2.5; stroke-linecap: round; }
html[data-theme="dark"] .trk-speedlines line { stroke: rgba(255,255,255,.45); }

@keyframes trk-speed-fade {
  0%   { opacity: 0; transform: translate(-10px,-50%); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translate(140px,-50%); }
}

/* ── Camion ── */
.trk-truck {
  position: absolute; bottom: 36px; left: 50%;
  width: 280px; height: 140px; margin-left: -140px;
  filter: drop-shadow(0 6px 0 rgba(20,20,25,.06));
}
html[data-theme="dark"] .trk-truck { filter: drop-shadow(0 6px 0 rgba(0,0,0,.5)); }

/* ── Ombre portée ── */
.trk-shadow {
  position: absolute; left: 6%; right: 6%; bottom: -3px; height: 14px;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(15,23,42,.32) 0%, rgba(15,23,42,.18) 35%, rgba(15,23,42,0) 75%);
  filter: blur(2px);
}
html[data-theme="dark"] .trk-shadow {
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 35%, rgba(0,0,0,0) 75%);
}

/* ── Fumée ── */
.trk-smoke { position: absolute; left: -6px; bottom: 30px; width: 70px; height: 50px; pointer-events: none; }
.trk-puff {
  position: absolute; bottom: 18px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(120,120,130,.5); opacity: 0;
  animation: trk-puff 1.6s ease-out infinite;
}
html[data-theme="dark"] .trk-puff { background: rgba(220,220,228,.45); }
.trk-puff:nth-child(1) { animation-delay: 0s; }
.trk-puff:nth-child(2) { animation-delay: .4s;  width: 9px; height: 9px; }
.trk-puff:nth-child(3) { animation-delay: .8s; }
.trk-puff:nth-child(4) { animation-delay: 1.2s; width: 9px; height: 9px; }

@keyframes trk-puff {
  0%   { opacity: 0; transform: translate(0,0) scale(.5); }
  20%  { opacity: .75; }
  100% { opacity: 0; transform: translate(-36px,-20px) scale(1.6); }
}

/* ── Roues ── */
.trk-wheel { transform-box: fill-box; transform-origin: center; animation: trk-spin .42s linear infinite; }

@keyframes trk-spin { to { transform: rotate(360deg); } }

/* ── Gyro wifi ── */
.trk-gyro-wrap {
  position: absolute; top: 56px; left: 190px;
  width: 60px; height: 0; pointer-events: none;
}
.trk-gyro-halo {
  position: absolute; top: -22px; left: 50%;
  width: 56px; height: 44px; margin-left: -28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(59,130,246,.55) 0%, rgba(59,130,246,0) 70%);
  animation: trk-halo .65s ease-in-out infinite;
}
@keyframes trk-halo {
  0%,100% { transform: scale(.7); opacity: .55; }
  50%     { transform: scale(1.2); opacity: 1; }
}
.trk-gyro-beam {
  position: absolute; top: -14px; left: 50%;
  width: 40px; height: 28px; margin-left: -20px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(96,165,250,0)   0deg,
    rgba(96,165,250,.75) 30deg,
    rgba(59,130,246,0)   70deg,
    rgba(59,130,246,0)   200deg,
    rgba(96,165,250,.45) 240deg,
    rgba(59,130,246,0)   280deg);
  mix-blend-mode: screen; filter: blur(.5px);
  animation: trk-spin .55s linear infinite;
}
.trk-waves {
  position: absolute; top: -34px; left: 50%;
  width: 70px; height: 40px; margin-left: -35px;
}
.trk-waves path {
  fill: none; stroke: #3b82f6; stroke-width: 2;
  stroke-linecap: round; opacity: 0; transform-origin: 50% 100%;
}
.trk-w1 { animation: trk-wave 1.4s ease-out infinite; }
.trk-w2 { animation: trk-wave 1.4s ease-out .47s infinite; }
.trk-w3 { animation: trk-wave 1.4s ease-out .94s infinite; }
@keyframes trk-wave {
  0%  { opacity: 0; transform: scale(.4); }
  30% { opacity: .8; }
  100%{ opacity: 0; transform: scale(1.7); }
}

/* ── Accessibilité : pas d'animation ── */
@media (prefers-reduced-motion: reduce) {
  .trk-buildings, .trk-speedlines, .trk-puff,
  .trk-wheel, .trk-gyro-halo, .trk-gyro-beam,
  .trk-w1, .trk-w2, .trk-w3 { animation: none; }
}