/* ==========================================================================
   Elmar — seção "Como funciona?" em stop motion (SVG + CSS puro)
   Sem GIF, sem vídeo, sem biblioteca. Toda animação usa steps().
   Depende só de: elmar-como-funciona.js (IntersectionObserver).
   ========================================================================== */

.elmar-cf {
  --cf-bg: #232323;
  --cf-green: #005851;
  --cf-green-l: #0E7A6E;
  --cf-lime: #8FD68C;
  --cf-cream: #F1EADA;
  --cf-gold: #E8B96A;
  --cf-teal: #0E6B60;
  --cf-text: #B9B9B9;
  --cf-steps: 7;
  --cf-dur: 7s;          /* duração total do percurso */
  --cf-beat: 0.98s;      /* intervalo entre estações = dur / steps */

  background: var(--cf-bg);
  padding: 72px 24px 80px;
  color: var(--cf-text);
  font-family: inherit;
}

.elmar-cf__head { max-width: 1280px; margin: 0 auto 56px; text-align: center; }
.elmar-cf__head h2 { margin: 0 0 10px; font-size: 42px; line-height: 1.1; font-weight: 800; color: var(--cf-lime); }
.elmar-cf__head p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--cf-text); }

.elmar-cf__stage { position: relative; max-width: 1280px; margin: 0 auto; }

/* ---- trilho e caminhão -------------------------------------------------- */

.elmar-cf__rail {
  position: absolute; left: calc(100% / var(--cf-steps) / 2); right: calc(100% / var(--cf-steps) / 2);
  top: 92px; height: 0;
  border-top: 3px dashed rgba(143, 214, 140, .35);
}

.elmar-cf__truck {
  position: absolute; left: 0; top: 0;
  width: calc(100% / var(--cf-steps));
  display: flex; justify-content: center;
  transform: translateX(0);
  pointer-events: none;
}
.elmar-cf__truck svg { width: 104px; height: auto; display: block; }

/* ---- estações ----------------------------------------------------------- */

.elmar-cf__steps {
  list-style: none; margin: 0; padding: 116px 0 0;
  display: grid; grid-template-columns: repeat(var(--cf-steps), 1fr); gap: 8px;
}

.elmar-cf__step { position: relative; text-align: center; padding: 0 6px; opacity: .28; }

.elmar-cf__disc {
  position: relative; display: block; width: 104px; height: 104px; margin: 0 auto 18px;
  border-radius: 50%; border: 3px solid var(--cf-gold);
  background: rgba(255, 255, 255, .04);
  display: flex; align-items: center; justify-content: center;
}
.elmar-cf__step:nth-child(even) .elmar-cf__disc { border-color: var(--cf-teal); }
.elmar-cf__disc img { width: 62px; height: auto; display: block; }
.elmar-cf__boil { display: block; }

.elmar-cf__num {
  position: absolute; top: -6px; right: -6px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cf-gold); color: #2C2010;
  font: 700 15px/34px 'IBM Plex Mono', ui-monospace, monospace; text-align: center;
}
.elmar-cf__step:nth-child(even) .elmar-cf__num { background: var(--cf-teal); color: var(--cf-cream); }

.elmar-cf__step h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--cf-lime); }
.elmar-cf__step p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cf-text); text-wrap: pretty; }

/* ==========================================================================
   Animação — só roda depois que .is-visible entra (uma vez)
   ========================================================================== */

.elmar-cf.is-visible .elmar-cf__truck {
  animation: elmar-cf-drive var(--cf-dur) steps(1, end) forwards;
}
.elmar-cf.is-visible .elmar-cf__wheel {
  animation: elmar-cf-wheel .5s steps(6, end) infinite;
}
.elmar-cf.is-visible .elmar-cf__boil {
  animation: elmar-boil .28s steps(2, end) infinite;
}
.elmar-cf.is-visible .elmar-cf__step {
  animation: elmar-cf-station .5s steps(1, end) forwards;
  animation-delay: calc(var(--i) * var(--cf-beat));
}

/* o caminhão pula de estação em estação — 7 posições, sem interpolação */
@keyframes elmar-cf-drive {
  0%,   13.9% { transform: translateX(0); }
  14%,  27.9% { transform: translateX(100%); }
  28%,  41.9% { transform: translateX(200%); }
  42%,  55.9% { transform: translateX(300%); }
  56%,  69.9% { transform: translateX(400%); }
  70%,  83.9% { transform: translateX(500%); }
  84%,  100%  { transform: translateX(600%); }
}

@keyframes elmar-cf-wheel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes elmar-cf-station {
  0%  { opacity: .28; transform: translateY(6px); }
  50% { opacity: 1;   transform: translateY(-4px); }
  100%{ opacity: 1;   transform: translateY(0); }
}

/* tremor de massinha — vai no wrapper de qualquer mascote animado */
@keyframes elmar-boil {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(.8px, -.8px) rotate(.5deg); }
  100% { transform: translate(-.6px, .6px) rotate(-.4deg); }
}

/* ==========================================================================
   Responsivo — abaixo de 1240px o caminhão sai e as estações empilham
   ========================================================================== */

@media (max-width: 1240px) {
  .elmar-cf { --cf-steps: 4; }
  .elmar-cf__rail, .elmar-cf__truck { display: none; }
  .elmar-cf__steps { padding-top: 0; row-gap: 40px; }
}

@media (max-width: 720px) {
  .elmar-cf { --cf-steps: 2; padding: 48px 18px 56px; }
  .elmar-cf__head h2 { font-size: 30px; }
  .elmar-cf__disc { width: 88px; height: 88px; }
  .elmar-cf__disc img { width: 52px; }
}

/* ==========================================================================
   Acessibilidade — não remover
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .elmar-cf.is-visible .elmar-cf__truck,
  .elmar-cf.is-visible .elmar-cf__wheel,
  .elmar-cf.is-visible .elmar-cf__boil,
  .elmar-cf.is-visible .elmar-cf__step { animation: none; }
  .elmar-cf__step { opacity: 1; }
  .elmar-cf__truck { transform: translateX(600%); }
}

/* fallback sem JS: tudo aceso */
.no-js .elmar-cf__step { opacity: 1; }

/* ==========================================================================
   TEMA — aponta a paleta pros tokens do site (claro/escuro).
   O handoff ja' previa: "se o site ja' tiver tokens, aponte as variaveis
   pra eles". Sem isto a secao ficava com paleta fixa e destoava: esta
   nascia escura dentro de um site no tema claro.
   So' as cores de SUPERFICIE e TEXTO seguem o tema; verde e dourado sao
   marca e valem nos dois.
   ========================================================================== */
.elmar-cf {
  --cf-bg: var(--corFundoCardAlt);        /* faixa da secao  */
  --cf-text: var(--corTextoSecundario);   /* texto corrido   */
  --cf-lime: var(--corBadgeOkText);       /* titulos verdes  */
}