/* =========================================================
   Seção "Como funciona" — caminhão passando pelos serviços
   Durações aqui precisam bater com os tempos em js/animacao.js (objeto T)
   ========================================================= */
.truckshow { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }

.ts__stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0f0f0f;
}
.ts__svg { display: block; width: 100%; height: auto; }

/* ---------- Cards de etapa ---------- */
.ts__cards { display: grid; padding: 12px; border-top: 1px solid var(--border); background: #121212; }
.ts-card {
  grid-area: 1 / 1;
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .9rem 1rem;
  background: rgba(34, 37, 80, .95);
  border: 1px solid var(--blue-light); border-left: 4px solid var(--yellow); border-radius: 8px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.ts-card.is-visible { opacity: 1; transform: none; }
.ts-card__icon {
  flex-shrink: 0; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 8px;
  background: var(--yellow); color: var(--black);
}
.ts-card__icon svg { width: 28px; height: 28px; }
.ts-card__step { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.ts-card__title { font-size: 1.3rem; color: var(--white); margin: .1rem 0 .25rem; }
.ts-card__text { font-size: .92rem; line-height: 1.45; color: var(--muted); }
.ts-card--done { border-left-color: var(--wa); }
.ts-card--done .ts-card__icon { background: var(--wa); color: #fff; }
.ts-card--done .ts-card__step { color: var(--wa); }

/* ---------- Barra de progresso ---------- */
.ts__progress { list-style: none; display: flex; margin: .5rem 0 0; padding: 0; }
.ts__progress li {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
}
.ts__progress li::before {
  content: ""; position: absolute; top: 9px; right: 50%; width: 100%; height: 3px;
  background: var(--border); transition: background-color .4s;
}
.ts__progress li:first-child::before { display: none; }
.ts__dot {
  position: relative; z-index: 1;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--border);
  transition: background-color .4s, border-color .4s;
}
.ts__label {
  font-family: var(--font-title); font-size: .78rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .4s;
}
.ts__progress li.is-done::before, .ts__progress li.is-current::before { background: var(--yellow); }
.ts__progress li.is-done .ts__dot { background: var(--yellow); border-color: var(--yellow); }
.ts__progress li.is-current .ts__dot { border-color: var(--yellow); animation: tsDot 1.3s ease-out infinite; }
.ts__progress li.is-done .ts__label, .ts__progress li.is-current .ts__label { color: var(--white); }

/* Bolinhas clicáveis: pula direto para a etapa */
.ts__hint {
  margin: 1.1rem 0 0; text-align: center;
  font-size: .82rem; color: var(--muted);
}
.ts__step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  width: 100%; padding: .35rem .15rem; margin: 0;
  background: none; border: 0; border-radius: 8px;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts__step:hover .ts__dot { border-color: var(--yellow); transform: scale(1.15); }
.ts__step:hover .ts__label { color: var(--white); }
.ts__step:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ts__dot { transition: background-color .4s, border-color .4s, transform .2s; }
.ts__progress li::before { top: 15px; }

.ts__cta { margin-top: 2rem; text-align: center; }

/* ---------- Caminhão ---------- */
#truck { transform: translateX(330px); }
.ts[data-phase="idle"] #truck { transform: translateX(-620px); }
.ts[data-phase="gone"] #truck { transform: translateX(1250px); }
.ts[data-phase="enter"] #truck { animation: tsDriveIn 2.8s cubic-bezier(.22, .61, .36, 1) forwards; }
.ts[data-phase="leave"] #truck { animation: tsDriveOut 2.4s cubic-bezier(.55, 0, .75, .5) forwards; }

.wheel, .gear, .galao, .filtro__old, .filtro__new, .filtro__check, .xray, .bucket__oil {
  transform-box: fill-box; transform-origin: center;
}
.ts.is-rolling .wheel { animation: tsSpin .5s linear infinite; }

/* Destaque: escurece o resto e acende a peça em serviço */
.ts .part { transition: opacity .5s; }
.ts:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .part { opacity: .32; }
.ts[data-step="1"] #motor,
.ts[data-step="2"] #filtro,
.ts[data-step="3"] #cambio,
.ts[data-step="4"] #diferencial { opacity: 1; }

.ts .halo { fill: none; stroke: #FFF200; stroke-width: 10; opacity: 0; filter: url(#ts-glow); }
.ts[data-step="1"] #motor .halo,
.ts[data-step="2"] #filtro .halo,
.ts[data-step="3"] #cambio .halo,
.ts[data-step="4"] #diferencial .halo { animation: tsHalo 1.3s ease-in-out infinite; }

/* Final: brilho no caminhão inteiro */
.ts.fx-done .halo { animation: tsHalo .6s ease-in-out 2; }
.ts.fx-done .truck__body { animation: tsFlash .9s ease-out; }

/* ---------- Motor: drenagem e óleo novo ---------- */
.drain-drop, .pour-drop, .drop-in { opacity: 0; }
.ts.fx-drain .drain-drop { animation: tsDrain .8s ease-in infinite; }
.ts.fx-drain .fx-drain-drops g:nth-child(2) .drain-drop { animation-delay: .27s; }
.ts.fx-drain .fx-drain-drops g:nth-child(3) .drain-drop { animation-delay: .54s; }

.bucket__oil { transform-origin: bottom; transform: scaleY(.25); transition: transform 1.8s ease-out; }
.ts.fx-bucket .bucket__oil { transform: scaleY(1); }

.galao { opacity: 0; }
.ts.fx-pour .galao { animation: tsGalao 2.4s ease-in-out forwards; }
.ts.fx-pouring .pour-drop { animation: tsPour .55s ease-in infinite; }
.ts.fx-pouring .fx-pour-drops g:nth-child(2) .pour-drop { animation-delay: .18s; }
.ts.fx-pouring .fx-pour-drops g:nth-child(3) .pour-drop { animation-delay: .36s; }

/* ---------- Filtros ---------- */
.filtro__new { opacity: 0; }
.filtro__check { opacity: 0; transform: scale(0); }
.ts.fx-filter-out .filtro__old { animation: tsFilterOut 1.3s ease-in forwards; }
.ts.fx-filter-in .filtro__new { animation: tsFilterIn 1.3s ease-out forwards; }
.ts.fx-filter-done .filtro__old { opacity: 0; }
.ts.fx-filter-done .filtro__new { opacity: 1; }
.ts.fx-filter-ok .filtro__check { animation: tsPop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; }

/* ---------- Câmbio e diferencial: raio-X ---------- */
.xray { opacity: 0; transform: scale(.85); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.xray__panel { fill: rgba(46, 50, 104, .92); stroke: #FFF200; stroke-width: 2; stroke-dasharray: 7 5; }
.ts[data-step="3"] #cambio .xray,
.ts[data-step="4"] #diferencial .xray { opacity: 1; transform: none; }
.ts[data-step="3"] #cambio .gear,
.ts[data-step="4"] #diferencial .gear { animation: tsSpin 2.4s linear infinite; }
.ts .gear--fast { animation-duration: 1.2s !important; }
.ts .gear--slow { animation-duration: 3.6s !important; }
.ts .gear--rev { animation-direction: reverse !important; }

.ts[data-step="4"] .drop-in { animation: tsDropIn 1.1s ease-in infinite; animation-delay: .4s; }
.ts[data-step="4"] #diferencial .xray > g:last-child g:nth-child(2) .drop-in { animation-delay: .77s; }
.ts[data-step="4"] #diferencial .xray > g:last-child g:nth-child(3) .drop-in { animation-delay: 1.14s; }

/* Pausa quando a seção sai da tela */
.ts.is-paused *, .ts.is-paused *::before { animation-play-state: paused !important; }

/* ---------- Keyframes ---------- */
@keyframes tsDriveIn  { from { transform: translateX(-620px); } to { transform: translateX(330px); } }
@keyframes tsDriveOut { from { transform: translateX(330px); } to { transform: translateX(1250px); } }
@keyframes tsSpin { to { transform: rotate(360deg); } }
@keyframes tsHalo { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes tsFlash { 0%, 100% { filter: brightness(1); } 35% { filter: brightness(1.55); } }
@keyframes tsDot { 0% { box-shadow: 0 0 0 0 rgba(255, 242, 0, .55); } 100% { box-shadow: 0 0 0 12px rgba(255, 242, 0, 0); } }

@keyframes tsDrain {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  15% { opacity: 1; transform: translateY(4px) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(82px); }
}
@keyframes tsGalao {
  0% { opacity: 0; transform: translate(60px, -50px) rotate(0); }
  20% { opacity: 1; transform: translate(0, 0) rotate(0); }
  35%, 82% { opacity: 1; transform: translate(0, 0) rotate(-40deg); }
  100% { opacity: 0; transform: translate(40px, -40px) rotate(0); }
}
@keyframes tsPour {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  15% { opacity: 1; transform: translateY(6px) scale(1); }
  100% { opacity: 0; transform: translateY(70px); }
}
@keyframes tsFilterOut {
  0% { opacity: 1; transform: none; }
  25% { transform: rotate(-14deg); }
  50% { transform: translateY(16px) rotate(14deg); }
  75% { opacity: 1; transform: translateY(42px) rotate(-12deg); }
  100% { opacity: 0; transform: translateY(80px) rotate(30deg); }
}
@keyframes tsFilterIn {
  0% { opacity: 0; transform: translateY(80px) rotate(-30deg); }
  30% { opacity: 1; transform: translateY(46px) rotate(14deg); }
  60% { transform: translateY(14px) rotate(-12deg); }
  85% { transform: translateY(-3px) rotate(5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes tsPop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tsDropIn {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  20% { opacity: 1; transform: translateY(8px) scale(1); }
  100% { opacity: 0; transform: translateY(46px); }
}

/* ---------- Desktop: cards sobre o caminhão ---------- */
@media (min-width: 900px) {
  .ts__cards {
    position: absolute; top: 3.5%; left: 50%; transform: translateX(-50%);
    width: min(460px, 44%); padding: 0; border: 0; background: none;
  }
  .ts__label { font-size: .9rem; }
}

/* ---------- Movimento reduzido: 5 etapas estáticas lado a lado ---------- */
.ts.is-static .ts__progress, .ts.is-static .ts__hint { display: none; }
.ts.is-static .ts__cards {
  position: static; transform: none; width: auto;
  grid-template-columns: 1fr; gap: 10px; padding: 12px;
  border-top: 1px solid var(--border); background: #121212;
}
.ts.is-static .ts-card { grid-area: auto; opacity: 1; transform: none; }
@media (min-width: 560px) { .ts.is-static .ts__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .ts.is-static .ts__cards { grid-template-columns: repeat(5, 1fr); }
  .ts.is-static .ts-card { flex-direction: column; }
}