/* Orbit570 - Process Flow
   Layout is expressed as custom properties chosen by the Layout control, so
   horizontal/vertical switching happens inside Elementor's own breakpoint
   media queries. This file contains no breakpoint of its own. */

.o5-flow {
  /* ---- tokens (every one is overridden by a Style control) ---- */
  --o5f-accent: #1029E4;
  --o5f-accent-soft: #EEF1FF;
  --o5f-node: 46px;
  --o5f-node-icon: 21px;
  --o5f-gap: 20px;
  --o5f-ink: #12161F;
  --o5f-ink-2: #5B6474;
  --o5f-line: #E4E8F1;
  --o5f-dot: #C3CBDE;
  --o5f-radius: 14px;
  --o5f-link-size: 3px;
  --o5f-dash: 6px;
  --o5f-dash-gap: 6px;
  /* dot pitch and double-rule thickness both derive from the controls above,
     so a thicker line keeps its proportions instead of growing stubby dots */
  --o5f-dot-step: calc(var(--o5f-link-size) + var(--o5f-dash-gap));
  /* Track is the thickness of the box the pattern is painted into. It follows
     the Thickness control, except for Double which sizes itself so the two
     hairlines are always separated by the Gap. */
  --o5f-track: var(--o5f-link-size);
  --o5f-rule: 1px;
  --o5f-shot-ratio: 4/3;
  --o5f-title-gap: 8px;
  --o5f-ease: cubic-bezier(.16, 1, .3, 1);

  /* ---- animation timing ---- */
  --o5f-step: 820ms;
  --o5f-t-line: 180ms;
  --o5f-t-card: 520ms;

  /* ---- horizontal defaults; the Layout control replaces this block ---- */
  --o5f-flow: column;
  --o5f-auto-cols: 1fr;
  --o5f-step-rows: var(--o5f-node) 1fr;
  --o5f-step-cols: none;
  --o5f-step-gap: var(--o5f-gap);
  --o5f-head-align: center;
  --o5f-link-top: 50%;
  --o5f-link-bottom: auto;
  --o5f-link-left: calc(50% + var(--o5f-node) / 2 + 10px);
  --o5f-link-right: calc(-50% - var(--o5f-gap) + var(--o5f-node) / 2 + 10px);
  --o5f-link-w: auto;
  --o5f-link-h: var(--o5f-track);
  --o5f-link-tf: translateY(-50%);
  --o5f-dir: 90deg;
  --o5f-dir-cross: 180deg;
  --o5f-dot-tile: var(--o5f-dot-step) var(--o5f-track);
  --o5f-dot-repeat: repeat-x;
  --o5f-dot-pos: 0 50%;
  --o5f-link-armed: translateX(-100%);

  /* ---- dotted by default; the Style control replaces this block ---- */
  --o5f-link-bg: radial-gradient(circle, var(--o5f-dot) calc(var(--o5f-link-size) / 2 - .1px), transparent calc(var(--o5f-link-size) / 2 + .1px));
  --o5f-link-bg-size: var(--o5f-dot-tile);
  --o5f-link-bg-repeat: var(--o5f-dot-repeat);
  --o5f-link-bg-pos: var(--o5f-dot-pos);

  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: var(--o5f-flow);
  grid-auto-columns: var(--o5f-auto-cols);
  gap: var(--o5f-gap);
  line-height: 1.6;
}

.o5-flow * { box-sizing: border-box; }

.o5-flow__step {
  position: relative;
  display: grid;
  grid-template-rows: var(--o5f-step-rows);
  grid-template-columns: var(--o5f-step-cols);
  gap: var(--o5f-step-gap);
  align-items: start;
  --d: 0ms;
}

/* each step's place in the queue */
.o5-flow__step:nth-child(1)  { --d: 0ms; }
.o5-flow__step:nth-child(2)  { --d: calc(var(--o5f-step) * 1); }
.o5-flow__step:nth-child(3)  { --d: calc(var(--o5f-step) * 2); }
.o5-flow__step:nth-child(4)  { --d: calc(var(--o5f-step) * 3); }
.o5-flow__step:nth-child(5)  { --d: calc(var(--o5f-step) * 4); }
.o5-flow__step:nth-child(6)  { --d: calc(var(--o5f-step) * 5); }
.o5-flow__step:nth-child(7)  { --d: calc(var(--o5f-step) * 6); }
.o5-flow__step:nth-child(8)  { --d: calc(var(--o5f-step) * 7); }
.o5-flow__step:nth-child(9)  { --d: calc(var(--o5f-step) * 8); }
.o5-flow__step:nth-child(10) { --d: calc(var(--o5f-step) * 9); }
.o5-flow__step:nth-child(11) { --d: calc(var(--o5f-step) * 10); }
.o5-flow__step:nth-child(12) { --d: calc(var(--o5f-step) * 11); }

/* ------------------------------- node -------------------------------- */
.o5-flow__head {
  position: relative;
  display: flex;
  align-items: var(--o5f-head-align);
  justify-content: center;
  align-self: stretch;
}

.o5-flow__node {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--o5f-node);
  height: var(--o5f-node);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--o5f-accent-soft);
  border: 1px solid var(--o5f-line);
  color: var(--o5f-accent);
  --o5-icon-size: var(--o5f-node-icon);
  transition:
    transform .32s var(--o5f-ease),
    opacity .32s var(--o5f-ease);
}

.o5-flow__node svg,
.o5-flow__node i {
  width: var(--o5f-node-icon);
  height: var(--o5f-node-icon);
  font-size: var(--o5f-node-icon);
  display: block;
  line-height: 1;
}

.o5-flow__node svg { fill: none; stroke: currentColor; }
.o5-flow__node i   { stroke: none; }

/* ------------------- the connecting rule between nodes ------------------ */
.o5-flow__link {
  position: absolute;
  top: var(--o5f-link-top);
  bottom: var(--o5f-link-bottom);
  left: var(--o5f-link-left);
  right: var(--o5f-link-right);
  width: var(--o5f-link-w);
  height: var(--o5f-link-h);
  transform: var(--o5f-link-tf);
  overflow: hidden;
  pointer-events: none;
}

.o5-flow__step:last-child .o5-flow__link { display: none; }

.o5-flow__link i {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--o5f-link-bg);
  background-size: var(--o5f-link-bg-size);
  background-repeat: var(--o5f-link-bg-repeat);
  background-position: var(--o5f-link-bg-pos);
  transition: transform .42s var(--o5f-ease);
}

/* ------------------------------- card -------------------------------- */
.o5-flow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--o5f-line);
  border-radius: var(--o5f-radius);
  /* resting fallback only; the Card background control owns this */
  background-color: #FBFCFE;
  transition:
    transform .4s var(--o5f-ease),
    opacity .4s var(--o5f-ease),
    border-color .35s var(--o5f-ease),
    box-shadow .35s var(--o5f-ease);
}

.o5-flow__title {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.35;
  color: var(--o5f-ink);
  margin: 0 0 var(--o5f-title-gap);
}

.o5-flow__text {
  font-size: 14px;
  line-height: 1.62;
  color: var(--o5f-ink-2);
  margin: 0;
}

.o5-flow__shot {
  position: relative;
  margin-top: 20px;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--o5f-line);
  line-height: 0;
}

/* The ratio lives on the image, not the frame. That way the "Original" setting
   (aspect-ratio:auto) falls back to the image's natural height instead of
   collapsing a fixed-ratio box to nothing. */
.o5-flow__shot .o5-flow__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--o5f-shot-ratio);
  object-fit: cover;
  object-position: center;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* -------------------------- the arrival, once -------------------------- */
/* .is-armed is added by the script. Without it the block is simply visible,
   so the editor canvas and a JS failure both show finished content. */
.o5-flow.is-armed .o5-flow__node   { opacity: 0; transform: scale(.72); }
.o5-flow.is-armed .o5-flow__card   { opacity: 0; transform: translateY(18px); }
.o5-flow.is-armed .o5-flow__link i { transform: var(--o5f-link-armed); }

.o5-flow.is-on .o5-flow__node {
  opacity: 1;
  transform: none;
  transition-delay: var(--d), var(--d);
}

.o5-flow.is-on .o5-flow__link i {
  transform: none;
  transition-delay: calc(var(--d) + var(--o5f-t-line));
}

.o5-flow.is-on .o5-flow__card {
  opacity: 1;
  transform: none;
  transition-delay:
    calc(var(--d) + var(--o5f-t-card)),
    calc(var(--d) + var(--o5f-t-card)),
    0ms, 0ms;
}

/* --------------------------- reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .o5-flow * {
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .o5-flow.is-armed .o5-flow__node,
  .o5-flow.is-armed .o5-flow__card { opacity: 1 !important; transform: none !important; }
  .o5-flow.is-armed .o5-flow__link i { transform: none !important; }
}