/* PR-VIBECURB-06 · Etapa 11 — Documento 07, Plano de ativação institucional. */

#implementacao .vb-activation__header > div,
#implementacao .vb-activation__intro > *,
#implementacao .vb-activation__field-sheet,
#implementacao .vb-activation__field-sheet > header > *,
#implementacao .vb-activation__field-sheet dl > div,
#implementacao .vb-activation__field-sheet > p,
#implementacao .vb-activation__field-sheet > footer > *,
#implementacao .vb-activation__route li,
#implementacao .vb-activation__route li > *,
#implementacao .vb-activation__route li .vb-activation__copy > *,
#implementacao .vb-activation__closing > *,
#implementacao .vb-activation__actions > * {
  will-change: opacity, translate, scale;
}

#implementacao .vb-activation__header {
  position: relative;
}

#implementacao .vb-activation__header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--vb-teal);
  transform-origin: left center;
  scale: 0 1;
  transition-property: scale;
  transition-duration: 720ms;
  transition-delay: 180ms;
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #implementacao.is-activation-motion-entered .vb-activation__header::after {
  scale: 1 1;
}

#implementacao .vb-activation__intro h2.vb-motion-item,
#implementacao .vb-activation__intro > strong.vb-motion-item,
#implementacao .vb-activation__field-sheet > header strong.vb-motion-item,
#implementacao .vb-activation__route h3.vb-motion-item,
#implementacao .vb-activation__closing strong.vb-motion-item {
  clip-path: none;
  overflow: visible;
}

#implementacao .vb-activation__field-sheet.vb-motion-item {
  clip-path: none;
  transform-origin: center top;
  transition-property: opacity, translate, scale, box-shadow;
  transition-duration:
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-control);
  transition-delay:
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    0ms;
  transition-timing-function:
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-ease-snap);
}

html.vb-js.vb-motion-ready #implementacao.is-activation-field-entered .vb-activation__field-sheet {
  box-shadow: 16px 18px 0 rgba(34, 183, 173, .32), 0 28px 72px rgba(12, 23, 21, .12);
}

#implementacao .vb-activation__field-sheet > footer > span {
  transition-property: opacity, translate, scale, background-color, color;
  transition-duration:
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-control),
    var(--vb-motion-control);
  transition-delay:
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    0ms,
    0ms;
  transition-timing-function:
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-ease-snap),
    var(--vb-ease-snap);
}

html.vb-js.vb-motion-ready #implementacao.is-activation-field-entered .vb-activation__field-sheet > footer > span {
  background: #d9f1eb;
  color: #0c433d;
}

#implementacao .vb-activation__route {
  position: relative;
}

#implementacao .vb-activation__route::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--vb-teal), rgba(34, 183, 173, .18));
  transform-origin: center top;
  scale: 1 0;
  opacity: .75;
  transition-property: scale;
  transition-duration: 1300ms;
  transition-delay: 120ms;
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #implementacao.is-activation-route-entered .vb-activation__route::before {
  scale: 1 1;
}

#implementacao .vb-activation__route li {
  position: relative;
  padding-left: 3rem;
  transform-origin: left top;
  transition-property: opacity, translate, scale, background-color, border-color;
  transition-duration:
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-control),
    var(--vb-motion-control);
  transition-delay:
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    0ms,
    0ms;
  transition-timing-function:
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-ease-snap),
    var(--vb-ease-snap);
}

#implementacao .vb-activation__route li::before {
  content: "";
  position: absolute;
  top: 1.65rem;
  left: 11px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--vb-teal);
  border-radius: 999px;
  background: #f2ecdd;
  scale: .72;
  opacity: .35;
  transition-property: scale, opacity, background-color;
  transition-duration: var(--vb-motion-control), var(--vb-motion-control), var(--vb-motion-control);
  transition-timing-function: var(--vb-ease-snap);
}

#implementacao .vb-activation__route li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--vb-teal), rgba(34, 183, 173, .1));
  transform-origin: left center;
  scale: 0 1;
  transition-property: scale;
  transition-duration: var(--vb-rhythm-line, 500ms);
  transition-delay: var(--vb-activation-line-delay, 170ms);
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #implementacao .vb-activation__route li.is-activation-step-entered {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(34, 183, 173, .34);
}

html.vb-js.vb-motion-ready #implementacao .vb-activation__route li.is-activation-step-entered::before {
  scale: 1;
  opacity: 1;
  background: var(--vb-teal);
}

html.vb-js.vb-motion-ready #implementacao .vb-activation__route li.is-activation-step-entered::after {
  scale: 1 1;
}

#implementacao .vb-activation__copy small.vb-motion-item {
  clip-path: none;
}

#implementacao .vb-activation__closing {
  position: relative;
}

#implementacao .vb-activation__closing::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--vb-teal);
  transform-origin: left center;
  scale: 0 1;
  transition-property: scale;
  transition-duration: 760ms;
  transition-delay: 120ms;
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #implementacao.is-activation-closing-entered .vb-activation__closing::before {
  scale: 1 1;
}

#implementacao .vb-activation__actions > a.vb-motion-item {
  transition-property: color, background-color, border-color, background-size, opacity, translate;
  transition-duration:
    var(--vb-motion-fast),
    var(--vb-motion-fast),
    var(--vb-motion-fast),
    var(--vb-motion-control),
    var(--vb-motion-duration),
    var(--vb-motion-duration);
  transition-delay:
    0ms,
    0ms,
    0ms,
    0ms,
    var(--vb-motion-delay),
    var(--vb-motion-delay);
}

@media (max-width: 980px) {
  #implementacao .vb-activation__field-sheet.vb-motion-item {
    transform-origin: left top;
  }

  #implementacao .vb-activation__route::before {
    left: 13px;
  }

  #implementacao .vb-activation__route li {
    padding-left: 2.35rem;
  }

  #implementacao .vb-activation__route li::before {
    left: 6px;
  }

  #implementacao .vb-activation__route li::after {
    left: 2.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #implementacao .vb-activation__header::after,
  #implementacao .vb-activation__field-sheet,
  #implementacao .vb-activation__field-sheet > footer > span,
  #implementacao .vb-activation__route::before,
  #implementacao .vb-activation__route li,
  #implementacao .vb-activation__route li::before,
  #implementacao .vb-activation__route li::after,
  #implementacao .vb-activation__closing::before,
  #implementacao .vb-activation__actions > a {
    transition: none;
  }

  html.vb-js.vb-motion-ready #implementacao .vb-activation__header::after,
  html.vb-js.vb-motion-ready #implementacao .vb-activation__route::before,
  html.vb-js.vb-motion-ready #implementacao .vb-activation__route li::after,
  html.vb-js.vb-motion-ready #implementacao .vb-activation__closing::before {
    scale: 1 1;
  }
}