/* PR-VIBECURB-06 · Etapa 5 — Documento 02, Cartografia do percurso. */

#mecanismo .vb-cartography__sheet,
#mecanismo .vb-cartography__header > span,
#mecanismo .vb-cartography__intro > *,
#mecanismo .vb-cartography__legend > span,
#mecanismo .vb-cartography__legend dl > div,
#mecanismo .vb-cartography__station,
#mecanismo .vb-cartography__station > *,
#mecanismo .vb-cartography__station > div:last-child > *,
#mecanismo .vb-cartography__trace > span,
#mecanismo .vb-cartography__trace > i,
#mecanismo .vb-cartography__finding > * {
  will-change: opacity, translate, scale;
}

#mecanismo .vb-cartography__sheet {
  transition-property: opacity, translate, scale, border-color, box-shadow;
}

html.vb-js.vb-motion-ready #mecanismo.is-cartography-motion-entered .vb-cartography__sheet {
  border-color: rgba(12, 23, 21, .24);
  box-shadow: 0 36px 96px rgba(12, 23, 21, .11);
}

#mecanismo .vb-cartography__status::before {
  transform-origin: center;
  transition-property: scale, box-shadow;
  transition-duration: var(--vb-motion-control);
  transition-timing-function: var(--vb-ease-snap);
}

html.vb-js.vb-motion-ready #mecanismo:not(.is-cartography-motion-entered) .vb-cartography__status::before {
  scale: .72;
  box-shadow: 0 0 0 0 rgba(34, 183, 173, 0);
}

html.vb-js.vb-motion-ready #mecanismo.is-cartography-motion-entered .vb-cartography__status::before {
  scale: 1;
  box-shadow: 0 0 0 .22rem rgba(34, 183, 173, .12);
}

/* A linha estrutural acompanha a geometria aprovada sem alterar o layout. */
#mecanismo .vb-cartography__route::before {
  transform-origin: left center;
  transition-property: scale, opacity;
  transition-duration: 420ms;
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #mecanismo:not(.is-cartography-route-entered) .vb-cartography__route::before {
  opacity: 0;
  scale: 0 1;
}

html.vb-js.vb-motion-ready #mecanismo.is-cartography-route-entered .vb-cartography__route::before {
  opacity: 1;
  scale: 1 1;
}

#mecanismo .vb-cartography__station {
  transition-property: opacity, translate, scale, background-color, border-color, box-shadow;
}

html.vb-js.vb-motion-ready #mecanismo.is-cartography-route-entered .vb-cartography__station {
  border-color: rgba(12, 23, 21, .2);
  box-shadow: 0 20px 46px rgba(12, 23, 21, .08);
}

/* Protege descendentes tipográficos da fonte display durante o reveal. */
#mecanismo .vb-cartography__intro h2,
#mecanismo .vb-cartography__station h3 {
  padding-bottom: .12em;
}

html.vb-js.vb-motion-ready #mecanismo .vb-cartography__intro h2.vb-motion-item,
html.vb-js.vb-motion-ready #mecanismo .vb-cartography__station h3.vb-motion-item,
html.vb-js.vb-motion-ready #mecanismo .vb-cartography__intro h2.vb-motion-item.is-motion-entered,
html.vb-js.vb-motion-ready #mecanismo .vb-cartography__station h3.vb-motion-item.is-motion-entered {
  clip-path: none;
  overflow: visible;
  will-change: opacity, translate;
}

#mecanismo .vb-cartography__trace > i.vb-motion-item {
  --vb-motion-opacity-from: 1;
  transform-origin: left center;
}

#mecanismo .vb-cartography__finding a {
  transition-property: color, background-size, opacity;
}

@media (max-width: 900px) {
  #mecanismo .vb-cartography__route::before {
    transform-origin: center top;
  }

  html.vb-js.vb-motion-ready #mecanismo:not(.is-cartography-route-entered) .vb-cartography__route::before {
    scale: 1 0;
  }

  html.vb-js.vb-motion-ready #mecanismo.is-cartography-route-entered .vb-cartography__route::before {
    scale: 1 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mecanismo .vb-cartography__sheet,
  #mecanismo .vb-cartography__status::before,
  #mecanismo .vb-cartography__route::before,
  #mecanismo .vb-cartography__station,
  #mecanismo .vb-cartography__trace > i {
    transition: none;
  }

  html.vb-js.vb-motion-ready #mecanismo .vb-cartography__route::before {
    opacity: 1;
    scale: 1 1;
  }
}