/* Motion isolated to ARK Flow section 13: Evolução contínua. */
.flow-timeline.is-version-primed > div{
  opacity:0;
  transform:translateY(12px);
}

.flow-timeline > div{
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1),border-color .34s ease,box-shadow .34s ease,background-color .34s ease;
}

.flow-timeline > div strong{
  transition:color .3s ease,text-shadow .3s ease;
}

.flow-timeline.is-version-primed > div.is-version-visible{
  opacity:1;
  transform:translateY(0);
}

.flow-timeline > div.is-version-receiving{
  transform:translateY(-4px);
  border-color:rgba(74,255,151,.68);
  background:rgba(24,255,123,.035)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.2),0 0 25px rgba(31,255,128,.12),inset 0 0 22px rgba(31,255,128,.035);
}

.flow-timeline > div.is-version-receiving strong{
  color:#f5fff9;
  text-shadow:0 0 14px rgba(83,255,160,.22);
}

.flow-timeline > div:hover{
  transform:translateY(-6px);
  border-color:rgba(74,255,151,.38);
  background:rgba(24,255,123,.025)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.18),0 0 22px rgba(31,255,128,.07),inset 0 0 24px rgba(31,255,128,.025);
}

.flow-timeline > div:not(:last-of-type)::after{
  display:block!important;
  background:linear-gradient(90deg,#334139 0%,rgba(52,91,69,.8) 52%,var(--flow-green) 100%);
  background-size:220% 100%;
}

.flow-timeline > div.is-version-transmitting::after{
  animation:flowVersionConnector .42s cubic-bezier(.3,.7,.25,1) both;
  box-shadow:0 0 8px rgba(71,255,147,.62);
}

.flow-timeline > div.is-current::before{
  content:"";
  display:block!important;
  position:absolute;
  inset:-1px;
  z-index:1;
  width:auto;
  height:auto;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none;
}

.flow-timeline > div.is-current > span,
.flow-timeline > div.is-current > strong{
  position:relative;
  z-index:2;
}

.flow-timeline > div.is-current.is-version-completing::before{
  border-color:#63ff9e;
  filter:drop-shadow(0 0 8px rgba(64,255,142,.52));
  animation:flowVersionOutline .72s cubic-bezier(.22,1,.36,1) both;
}

.flow-timeline > div.is-current.is-version-complete{
  border-color:rgba(74,255,151,.58);
  box-shadow:0 0 30px rgba(31,255,128,.09),inset 0 0 18px rgba(31,255,128,.025);
}

.flow-timeline > i{
  display:none!important;
}

.flow-timeline > i::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b9ffd2;
  box-shadow:0 0 8px #63ff9e,0 0 18px rgba(31,255,128,.8);
  opacity:0;
  transform:translate(-50%,-50%);
}

.flow-timeline.is-ambient-pulse > div:not(:last-of-type)::after{
  animation:flowVersionConnector .5s cubic-bezier(.3,.7,.25,1) both;
  box-shadow:0 0 8px rgba(71,255,147,.55);
}
.flow-timeline.is-ambient-pulse > div:nth-of-type(2)::after{animation-delay:.42s}
.flow-timeline.is-ambient-pulse > div:nth-of-type(3)::after{animation-delay:.84s}

@keyframes flowVersionConnector{
  0%{background-position:100% 0;filter:brightness(.7)}
  45%{filter:brightness(1.8)}
  100%{background-position:0 0;filter:brightness(1)}
}

@keyframes flowVersionOutline{
  0%{clip-path:polygon(0 0,0 0,0 0,0 0);opacity:0}
  12%{opacity:1;clip-path:polygon(0 0,42% 0,42% 2px,0 2px)}
  38%{clip-path:polygon(0 0,100% 0,100% 48%,calc(100% - 2px) 48%,calc(100% - 2px) 2px,0 2px)}
  68%{clip-path:polygon(0 0,100% 0,100% 100%,54% 100%,54% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 2px,0 2px)}
  100%{clip-path:inset(0 round 18px);opacity:1}
}

@keyframes flowVersionAmbient{
  0%{left:0;opacity:0}
  8%{opacity:.9}
  88%{opacity:.9}
  100%{left:100%;opacity:0}
}

@media(max-width:760px){
  .flow-timeline > div:hover{transform:translateY(-3px)}
  .flow-timeline > div:not(:last-of-type)::after{display:none!important}
  .flow-timeline > i{display:block!important;left:26px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .flow-timeline.is-ambient-pulse > i::after{animation-name:flowVersionAmbientVertical}
  @keyframes flowVersionAmbientVertical{0%{top:0;opacity:0}8%{opacity:.9}88%{opacity:.9}100%{top:100%;opacity:0}}
}

@media(prefers-reduced-motion:reduce){
  .flow-timeline.is-version-primed > div{opacity:1;transform:none}
  .flow-timeline > div,.flow-timeline > div strong{transition:none}
  .flow-timeline > div::before,.flow-timeline > div::after,.flow-timeline > i::after{animation:none!important}
}