/*
 * "Everything the counter and the back office need" on the home page (.benefits-sec). Loaded on the home page only; js/benefits.js adds the scroll effects.
 * Left (the sticky heading): a decorative orbit, the benefit icons circling a core. Right: a timeline. A rail along the start side fills as you scroll (the
 * custom property --p, 0 to 1, written by the script), each benefit is a card with a dot on the rail; the card that is in the middle of the screen is the
 * active one (blue icon, lifted card). Hover slides the card. Cards come in one after the other. Transform / opacity only. Without the script or under
 * reduced motion: the rail is full, nothing is hidden and nothing moves. RTL: logical properties, the rail is on the right.
 */
.benefits-sec { position: relative; overflow: hidden; }
.benefits-sec::before { content: ""; position: absolute; inset-block-start: -120px; inset-inline-end: -160px; inline-size: 460px; block-size: 460px; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 119, 255, .12), transparent); pointer-events: none; }

/* ----- orbit */
.orbit { position: relative; inline-size: 270px; block-size: 270px; margin-block-start: 36px; display: none; }
@media (min-width: 900px) { .orbit { display: block; } }
.orbit-ring { position: absolute; border-radius: 50%; inset: 0; border: 1.5px dashed rgba(22, 119, 255, .35); }
.orbit-ring--b { inset: 46px; border-style: solid; border-color: rgba(201, 163, 73, .4); }
.orbit-core { position: absolute; inset: 94px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--blue), var(--blue-700)); box-shadow: 0 12px 30px rgba(22, 119, 255, .4); }
.orbit-core .ico { inline-size: 34px; block-size: 34px; }
.orbit-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(22, 119, 255, .5); animation: orbit-ping 3s ease-out infinite; }
@keyframes orbit-ping { 0% { transform: scale(1); opacity: .9; } 75%, 100% { transform: scale(1.55); opacity: 0; } }
.orbit-spin { position: absolute; inset: 0; animation: orbit-turn 40s linear infinite; }
.orbit-dot { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 46px; block-size: 46px; margin: -23px; transform: rotate(var(--a)) translateY(-135px) rotate(calc(var(--a) * -1)); }
.orbit-dot:nth-child(1) { --a: 0deg; } .orbit-dot:nth-child(2) { --a: 90deg; } .orbit-dot:nth-child(3) { --a: 180deg; } .orbit-dot:nth-child(4) { --a: 270deg; }
.orbit-dot-in { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: 14px; color: var(--blue-600); background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(11, 31, 68, .14); animation: orbit-turn 40s linear infinite reverse; }
.orbit-dot-in .ico { inline-size: 22px; block-size: 22px; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
[dir="rtl"] .orbit-spin, [dir="rtl"] .orbit-dot-in { animation-direction: reverse; }
[dir="rtl"] .orbit-dot-in { animation-direction: normal; }

/* ----- the timeline */
.benefit-list--flow { --p: 1; position: relative; display: grid; gap: 16px; padding-inline-start: 34px; }
.benefit-list--flow::before, .benefit-list--flow::after { content: ""; position: absolute; inset-inline-start: 7px; inset-block: 14px; inline-size: 3px; border-radius: 3px; }
.benefit-list--flow::before { background: var(--line); }
.benefit-list--flow::after { background: linear-gradient(180deg, var(--gold), var(--blue)); transform-origin: top; transform: scaleY(var(--p)); transition: transform .25s linear; }
.benefit-list--flow .benefit { --i: 0; position: relative; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(11, 31, 68, .04); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease, background .3s ease, opacity .6s ease; animation: none; }
.benefit-list--flow .benefit:last-child { border-block-end: 1px solid var(--line); }
.benefit-list--flow .benefit:nth-child(2) { --i: 1; } .benefit-list--flow .benefit:nth-child(3) { --i: 2; } .benefit-list--flow .benefit:nth-child(4) { --i: 3; } .benefit-list--flow .benefit:nth-child(5) { --i: 4; } .benefit-list--flow .benefit:nth-child(6) { --i: 5; }
/* the dot on the rail */
.benefit-list--flow .benefit::before { content: ""; position: absolute; inset-inline-start: -34px; inset-block-start: 30px; inline-size: 17px; block-size: 17px; border-radius: 50%; background: #fff; border: 3px solid var(--line-strong); transition: background .3s ease, border-color .3s ease, transform .3s ease; box-sizing: border-box; }
.benefit-list--flow .benefit.is-passed::before { border-color: var(--gold); background: var(--gold); }
.benefit-list--flow .benefit.is-active::before { border-color: var(--blue); background: var(--blue); transform: scale(1.35); box-shadow: 0 0 0 6px rgba(22, 119, 255, .18); }
.benefit-num { transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .3s ease; transform-origin: left center; }
[dir="rtl"] .benefit-num { transform-origin: right center; }
.benefit-ico { transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.benefit-list--flow .benefit.is-active { border-color: rgba(22, 119, 255, .5); background: linear-gradient(135deg, #fff, #f1f7ff); box-shadow: 0 16px 36px -14px rgba(22, 119, 255, .35); }
.benefit-list--flow .benefit.is-active .benefit-num { transform: scale(1.25); color: var(--blue-700); }
.benefit-list--flow .benefit.is-active .benefit-ico { color: #fff; background: linear-gradient(145deg, var(--blue), var(--blue-700)); border-color: transparent; box-shadow: 0 8px 20px rgba(22, 119, 255, .4); transform: scale(1.06); }
@media (hover: hover) {
  .benefit-list--flow .benefit:hover { transform: translateX(8px); border-color: rgba(201, 163, 73, .6); box-shadow: 0 14px 30px -14px rgba(11, 31, 68, .25); }
  [dir="rtl"] .benefit-list--flow .benefit:hover { transform: translateX(-8px); }
  .benefit-list--flow .benefit:hover .benefit-ico { transform: rotate(-8deg) scale(1.08); }
}
@media (max-width: 560px) {
  .benefit-list--flow { padding-inline-start: 26px; gap: 14px; }
  .benefit-list--flow::before, .benefit-list--flow::after { inset-inline-start: 4px; }
  .benefit-list--flow .benefit { padding: 18px; }
  .benefit-list--flow .benefit::before { inset-inline-start: -26px; inset-block-start: 24px; inline-size: 15px; block-size: 15px; }
}
/* the reveal: js/benefits.js adds .benefits-armed only when the list is still below the fold */
@media (prefers-reduced-motion: no-preference) {
  .benefits-armed .benefit { opacity: 0; transform: translateX(36px); }
  [dir="rtl"] .benefits-armed .benefit { transform: translateX(-36px); }
  .benefits-armed .benefit.is-in { opacity: 1; transform: none; transition-delay: calc(var(--i) * 130ms), 0s, 0s, 0s, 0s, calc(var(--i) * 130ms); transition-duration: .65s, .3s, .3s, .3s, .3s, .65s; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-spin, .orbit-dot-in, .orbit-core::after { animation: none; }
  .orbit-core::after { display: none; }
  .benefit-list--flow::after, .benefit-list--flow .benefit, .benefit-num, .benefit-ico { transition: none; }
}