/* PR-VIBECURB-06 · Etapa 4 — Documento 01, Registro da lacuna. */

#como-funciona .vb-record__sheet,
#como-funciona .vb-record__header > span,
#como-funciona .vb-record__statement > *,
#como-funciona .vb-record__sources > span,
#como-funciona .vb-record__sources li,
#como-funciona .vb-record__occurrence,
#como-funciona .vb-record__occurrence > *,
#como-funciona .vb-record__trail > span,
#como-funciona .vb-record__note,
#como-funciona .vb-record__finding > * {
  will-change: opacity, translate, scale;
}

#como-funciona .vb-record__sheet {
  transition-property: opacity, translate, scale, border-color, box-shadow;
}

html.vb-js.vb-motion-ready #como-funciona.is-record-motion-entered .vb-record__sheet {
  border-color: rgba(12, 23, 21, .24);
  box-shadow: 0 32px 90px rgba(12, 23, 21, .1);
}

#como-funciona .vb-record__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 #como-funciona.is-record-motion-entered .vb-record__status::before {
  scale: 1;
  box-shadow: 0 0 0 .24rem rgba(12, 145, 133, .12);
}

html.vb-js.vb-motion-ready #como-funciona:not(.is-record-motion-entered) .vb-record__status::before {
  scale: .72;
  box-shadow: 0 0 0 0 rgba(12, 145, 133, 0);
}

#como-funciona .vb-record__occurrence {
  transition-property: opacity, translate, scale, background-color, border-color, box-shadow;
}

/*
 * Os títulos usam uma fonte display com descendentes que ultrapassam a line box.
 * O reveal deve preservar g/j completos sem alterar a coreografia de fade/translate.
 */
#como-funciona .vb-record__occurrence h3 {
  padding-bottom: .12em;
}

html.vb-js.vb-motion-ready #como-funciona .vb-record__occurrence h3.vb-motion-item,
html.vb-js.vb-motion-ready #como-funciona .vb-record__occurrence h3.vb-motion-item.is-motion-visible,
html.vb-js.vb-motion-ready #como-funciona .vb-record__occurrence h3.vb-motion-item.is-motion-entered {
  clip-path: none;
  overflow: visible;
  will-change: opacity, translate;
}

html.vb-js.vb-motion-ready #como-funciona .vb-record__trail > span::after {
  display: inline-block;
  opacity: 0;
  translate: -4px 0;
  transition-property: opacity, translate;
  transition-duration: 220ms;
  transition-delay: calc(var(--vb-motion-delay, 0ms) + 120ms);
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #como-funciona .vb-record__trail > span.is-motion-entered::after {
  opacity: 1;
  translate: 0 0;
}

#como-funciona .vb-record__finding a {
  transition-property: color, background-size, opacity;
}

@media (prefers-reduced-motion: reduce) {
  #como-funciona .vb-record__sheet,
  #como-funciona .vb-record__status::before,
  #como-funciona .vb-record__occurrence,
  #como-funciona .vb-record__trail > span::after {
    transition: none;
  }

  html.vb-js.vb-motion-ready #como-funciona .vb-record__trail > span::after {
    opacity: 1;
    translate: 0 0;
  }
}