/* Three-step causal flow. Load after page CSS; opt in with both classes. */
.logic-flow.cezar-causal-flow { --logic-cycle: 2167.5ms; }
.logic-flow.cezar-causal-flow > div,
.logic-flow.cezar-causal-flow > .logic-flow-arrow { --logic-signal-delay: 0ms; }
.logic-flow.cezar-causal-flow > div:nth-child(3),
.logic-flow.cezar-causal-flow > .logic-flow-arrow:nth-child(4) { --logic-signal-delay: 725ms; }
.logic-flow.cezar-causal-flow > .logic-flow-result { --logic-signal-delay: 1450ms; }
.logic-flow.cezar-causal-flow > div {
  position: relative;
  isolation: isolate;
  animation: cezar-flow-step var(--logic-cycle) var(--logic-signal-delay) infinite ease-in-out;
}
.logic-flow.cezar-causal-flow > div::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  content: '';
  pointer-events: none;
  background: rgb(91 212 155 / 7%);
  box-shadow: 0 8px 18px rgb(5 25 45 / 15%);
  opacity: 0;
  animation: cezar-flow-fill var(--logic-cycle) var(--logic-signal-delay) infinite ease-in-out;
}
.logic-flow.cezar-causal-flow > div::after {
  position: absolute;
  z-index: 2;
  inset: -1px;
  content: '';
  pointer-events: none;
  border: 1px solid rgb(142 232 255 / 22%);
  opacity: .45;
  animation: cezar-flow-border var(--logic-cycle) var(--logic-signal-delay) infinite ease-in-out;
}
.logic-flow.cezar-causal-flow > .logic-flow-arrow {
  position: relative;
  display: grid;
  align-self: center;
  justify-self: center;
  width: 40px;
  height: 24px;
  place-items: center;
  pointer-events: none;
  color: #8bddf1;
  opacity: 1;
  animation: none;
}
.logic-flow.cezar-causal-flow > .logic-flow-arrow svg {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  opacity: .6;
}
.logic-flow.cezar-causal-flow > .logic-flow-arrow::before,
.logic-flow.cezar-causal-flow > .logic-flow-arrow::after {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  height: 2px;
  content: '';
}
.logic-flow.cezar-causal-flow > .logic-flow-arrow::before {
  width: 100%;
  background: rgb(105 218 247 / 24%);
  animation: none;
}
.logic-flow.cezar-causal-flow > .logic-flow-arrow::after {
  z-index: 2;
  width: 14px;
  background: linear-gradient(90deg, transparent, #74dffa 55%, #b3ecf5);
  box-shadow: 0 0 4px rgb(132 231 255 / 55%);
  opacity: 0;
  animation: cezar-flow-travel var(--logic-cycle) var(--logic-signal-delay) infinite linear;
}
@keyframes cezar-flow-step {
  0%, 23.068051%, 59.976932%, 100% { transform: translateY(0); }
  27.681661%, 46.136101% { transform: translateY(-1px); }
}
@keyframes cezar-flow-fill {
  0%, 23.068051%, 59.976932%, 100% { opacity: 0; }
  27.681661%, 46.136101% { opacity: 1; }
}
@keyframes cezar-flow-border {
  0%, 23.068051%, 59.976932%, 100% { opacity: .45; border-color: rgb(142 232 255 / 22%); box-shadow: 0 0 3px rgb(89 224 255 / 8%); }
  27.681661%, 46.136101% { opacity: 1; border-color: rgb(225 250 255 / 56%); box-shadow: 0 0 10px rgb(89 224 255 / 25%); }
}
@keyframes cezar-flow-travel {
  0%, 46.136101% { opacity: 0; transform: translateX(-14px); }
  47.289504% { opacity: 1; }
  56.516724% { opacity: 1; transform: translateX(26px); }
  57.093426%, 100% { opacity: 0; transform: translateX(26px); }
}
html:not(.motion-ready) .logic-flow.cezar-causal-flow > *,
html:not(.motion-ready) .logic-flow.cezar-causal-flow > *::before,
html:not(.motion-ready) .logic-flow.cezar-causal-flow > *::after,
html.motion-paused .logic-flow.cezar-causal-flow > *,
html.motion-paused .logic-flow.cezar-causal-flow > *::before,
html.motion-paused .logic-flow.cezar-causal-flow > *::after { animation-play-state: paused; }