/*
 * Shared motion for the inner pages (every page except Home, About and Contact, which have their own). Loaded with js/pagefx.js.
 *  - header: two slow glows and a faint moving grid behind the title (pseudo elements, no markup), the title and lead rise in, a gold line draws under the title;
 *  - a thin reading-progress line along the top of the window (created by the script);
 *  - section headings: a gold bar that draws in when the heading comes into view;
 *  - cards (modules, business types, features, highlights, steps, plans, gallery): a soft light that follows the pointer, a livelier icon, a picture that
 *    zooms slowly; blocks and lists come in as they scroll into view (the script marks what is below the fold);
 *  - FAQ / accordions: the answer slides in, a gold edge marks the open one; forms: a progress line, glowing focus, nudge on a flagged field, shine on the
 *    button; buttons: a shine that crosses on hover; the side steps of the forms; the product screens float; the 404 page glows.
 * Only transform / opacity / background-position / box-shadow move; everything stops under prefers-reduced-motion; without the script nothing is hidden.
 * RTL: logical properties; flow directions are mirrored through --dir.
 */
:root { --dir: 1; }
[dir="rtl"] { --dir: -1; }

/* ------------------------------------------------------------------ header */
.page-head { isolation: isolate; overflow: hidden; }
.page-head > .container { position: relative; z-index: 1; }
main { overflow-x: clip; } /* a block waiting to slide in from the side never makes the page scroll sideways */
.page-head::before { content: ""; position: absolute; inset: -30% -10%; z-index: -1; pointer-events: none; background: radial-gradient(520px 320px at 82% 18%, rgba(22, 119, 255, .34), transparent 70%), radial-gradient(420px 260px at 22% 105%, rgba(201, 163, 73, .24), transparent 70%); animation: pf-sway 18s ease-in-out infinite alternate; }
[dir="rtl"] .page-head::before { background: radial-gradient(520px 320px at 18% 18%, rgba(22, 119, 255, .34), transparent 70%), radial-gradient(420px 260px at 78% 105%, rgba(201, 163, 73, .24), transparent 70%); }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45; background-image: linear-gradient(rgba(143, 194, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 194, 255, .08) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(560px 240px at 84% 30%, #000, transparent 75%); mask-image: radial-gradient(560px 240px at 84% 30%, #000, transparent 75%); animation: pf-grid 16s linear infinite; }
[dir="rtl"] .page-head::after { -webkit-mask-image: radial-gradient(560px 240px at 16% 30%, #000, transparent 75%); mask-image: radial-gradient(560px 240px at 16% 30%, #000, transparent 75%); }
@keyframes pf-sway { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(calc(40px * var(--dir)), 22px, 0) scale(1.08); } }
@keyframes pf-grid { to { background-position: 44px 44px, 44px 44px; } }
.page-head h1 { position: relative; padding-block-end: .28em; }
.page-head h1::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 84px; block-size: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--sky)); transform-origin: left center; }
[dir="rtl"] .page-head h1::after { transform-origin: right center; }

/* ------------------------------------------------------------------ reading progress */
.pf-progress { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 90; block-size: 3px; pointer-events: none; background: linear-gradient(90deg, var(--gold), var(--blue)); transform-origin: left center; transform: scaleX(var(--pf-p, 0)); }
[dir="rtl"] .pf-progress { transform-origin: right center; }

/* ------------------------------------------------------------------ section headings */
.section-head h2 { position: relative; }
.section-head h2::after { content: ""; display: block; inline-size: 56px; block-size: 4px; margin-block-start: .4em; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--sky)); transform-origin: left center; transition: transform .8s cubic-bezier(.2, .7, .2, 1) .15s; }
[dir="rtl"] .section-head h2::after { transform-origin: right center; }
.section-head.is-centered h2::after { margin-inline: auto; transform-origin: center; }

/* ------------------------------------------------------------------ cards */
.mcard, .tile, .fcard, .hl, .benefit-cards li, .plan, .gal-card, .step, .upgrades li { --mx: 50%; --my: 50%; }
.mcard, .tile, .fcard, .hl, .benefit-cards li, .plan, .gal-card, .step, .upgrades li { animation: none; } /* the entry is done by js/pagefx.js (the scroll-timeline lift of site.css would fight it) */
@media (hover: hover) {
  .mcard:hover, .tile:hover, .fcard:hover, .hl:hover, .benefit-cards li:hover, .plan:hover, .gal-card:hover, .step:hover, .upgrades li:hover { background-image: radial-gradient(280px circle at var(--mx) var(--my), rgba(201, 163, 73, .16), transparent 70%); border-color: rgba(201, 163, 73, .7); }
  .hl:hover, .benefit-cards li:hover, .plan:hover, .step:hover, .upgrades li:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(11, 29, 58, .5), 0 0 30px -10px rgba(201, 163, 73, .4); }
  .hl, .benefit-cards li, .plan, .step, .upgrades li { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease; }
  .tile:hover .tile-ico, .fcard:hover .fcard-ico { transform: translateY(-2px) scale(1.08) rotate(-5deg); box-shadow: 0 10px 22px -8px rgba(201, 163, 73, .6); }
  .gal-card:hover img { transform: scale(1.05); }
  .hl:hover .hl-num { color: var(--blue-700); }
}
.tile-ico, .fcard-ico { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.gal-card { overflow: hidden; }
.gal-card img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hl-num { transition: color .3s ease; }
/* numbers / badges that breathe a little */
.step-num { box-shadow: 0 0 0 0 rgba(201, 163, 73, .5); animation: pf-ping 2.8s ease-out infinite; }
@keyframes pf-ping { 0% { box-shadow: 0 0 0 0 rgba(201, 163, 73, .5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(201, 163, 73, 0); } }
.empty-ico { animation: pf-bob 4.6s ease-in-out infinite alternate; }
.mgroup-ico { animation: pf-bob 5.4s ease-in-out infinite alternate; }
.mgroup--stock .mgroup-ico { animation-delay: -1.4s; } .mgroup--control .mgroup-ico { animation-delay: -2.8s; } .mgroup--platform .mgroup-ico { animation-delay: -4s; }
@keyframes pf-bob { from { translate: 0 -5px; } to { translate: 0 6px; } }
.tag-draft { animation: pf-glow 3s ease-in-out infinite alternate; }
@keyframes pf-glow { from { box-shadow: 0 0 0 0 rgba(201, 163, 73, 0); } to { box-shadow: 0 0 0 4px rgba(201, 163, 73, .25); } }

/* the product screens (Products, feature pages) float slowly; the picture of a solution zooms slowly */
.product-visual .shot, .detail-visual .shot { animation: pf-bob 7s ease-in-out infinite alternate; }
.sol-pic img { animation: pf-zoom 16s ease-in-out infinite alternate; }
@keyframes pf-zoom { from { scale: 1; } to { scale: 1.07; } }

/* lists of check marks: the items slide in one after the other when the list comes into view */
.checks li { transition: opacity .5s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
.checks li:nth-child(2) { transition-delay: .07s; } .checks li:nth-child(3) { transition-delay: .14s; } .checks li:nth-child(4) { transition-delay: .21s; } .checks li:nth-child(5) { transition-delay: .28s; } .checks li:nth-child(n+6) { transition-delay: .35s; }
.pills a { transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s, color .2s, background .2s; }
@media (hover: hover) { .pills a:hover { transform: translateY(-3px); background: var(--gold-soft); } }
.legal-toc a { transition: transform .25s cubic-bezier(.2, .7, .2, 1), color .2s; }
@media (hover: hover) { .legal-toc a:hover { transform: translateX(calc(5px * var(--dir))); } }

/* ------------------------------------------------------------------ FAQ and other accordions */
.acc { transition: border-color .25s ease, box-shadow .3s ease; }
.acc[open] { box-shadow: inset 4px 0 0 var(--gold), var(--shadow-sm); }
[dir="rtl"] .acc[open] { box-shadow: inset -4px 0 0 var(--gold), var(--shadow-sm); }
.acc summary { transition: color .2s ease, background .2s ease; }
@media (hover: hover) { .acc:hover { border-color: var(--blue); } .acc summary:hover { color: var(--blue-700); } }
.acc[open] .acc-body { animation: pf-open .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pf-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.acc summary .ico { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

/* ------------------------------------------------------------------ buttons */
.btn-primary, .btn-light, .band .btn-ghost-light { position: relative; overflow: hidden; }
.btn-primary::after, .btn-light::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; inline-size: 40%; transform: skewX(-20deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); }
@media (hover: hover) { .btn-primary:not(:disabled):hover::after, .btn-light:hover::after { inset-inline-start: 130%; transition: inset-inline-start .7s ease; } }
.btn { transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease; }
@media (hover: hover) { .btn-primary:not(:disabled):hover { box-shadow: 0 14px 28px -10px rgba(15, 98, 217, .6); } }
/* the call-to-action band: a slow glow */
.band { isolation: isolate; }
.band::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none; background: radial-gradient(420px 240px at 20% 30%, rgba(201, 163, 73, .18), transparent 70%), radial-gradient(420px 240px at 85% 70%, rgba(22, 119, 255, .22), transparent 70%); animation: pf-sway 20s ease-in-out infinite alternate-reverse; }

/* ------------------------------------------------------------------ forms (demo, quote, complaint, privacy request) */
.form-card { position: relative; isolation: isolate; overflow: hidden; --mx: 50%; --my: 50%; }
.form-card::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: linear-gradient(90deg, var(--gold), var(--sky), var(--gold), var(--blue)); background-size: 300% 100%; animation: pf-line 8s linear infinite; }
[dir="rtl"] .form-card::before { animation-direction: reverse; }
@keyframes pf-line { to { background-position: -300% 0; } }
.form-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(22, 119, 255, .08), transparent 70%); transition: opacity .4s ease; }
.form-card:hover::after { opacity: 1; }
.fc-progress { position: absolute; inset-inline: 0; inset-block-start: 4px; block-size: 3px; opacity: 0; background: rgba(11, 29, 58, .07); transition: opacity .3s ease; }
.fc-progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), var(--blue)); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
[dir="rtl"] .fc-progress::after { transform-origin: right center; }
.form-card.is-on .fc-progress { opacity: 1; }
.form-card .field label { transition: color .25s ease; }
.form-card .field:focus-within label { color: var(--blue-700); }
.form-card .field input:not([type="checkbox"]), .form-card .field select, .form-card .field textarea { transition: border-color .25s ease, box-shadow .25s ease; }
.form-card .field input:not([type="checkbox"]):focus, .form-card .field select:focus, .form-card .field textarea:focus { box-shadow: 0 0 0 4px rgba(22, 119, 255, .14), 0 10px 24px -14px rgba(22, 119, 255, .6); }
@media (hover: hover) { .form-card .field input:not([type="checkbox"]):hover:not(:focus), .form-card .field select:hover:not(:focus), .form-card .field textarea:hover:not(:focus) { border-color: var(--blue-600); } }
.form-card .form-status .msg { animation: pf-pop .5s cubic-bezier(.2, .8, .3, 1.2) both; }
.next li span { animation: pf-ping 2.8s ease-out infinite; }
.next li:nth-child(2) span { animation-delay: .9s; } .next li:nth-child(3) span { animation-delay: 1.8s; }
@media (min-width: 960px) { .demo-side { position: sticky; inset-block-start: calc(var(--header-h, 72px) + 24px); } }
@keyframes pf-pop { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ the 404 page */
.notfound { position: relative; isolation: isolate; overflow: hidden; }
.notfound::before, .notfound::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); }
.notfound::before { inline-size: 420px; block-size: 420px; inset-block-start: -120px; inset-inline-end: -80px; background: rgba(22, 119, 255, .18); animation: pf-sway 16s ease-in-out infinite alternate; }
.notfound::after { inline-size: 360px; block-size: 360px; inset-block-end: -140px; inset-inline-start: -80px; background: rgba(201, 163, 73, .2); animation: pf-sway 20s ease-in-out infinite alternate-reverse; }
.notfound .eyebrow { font-size: 3.4rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(90deg, var(--gold), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------------ on arrival and on scroll */
@media (prefers-reduced-motion: no-preference) {
  .page-head .crumbs, .page-head h1, .page-head .lead, .page-head .actions { animation: pf-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .page-head h1 { animation-delay: .1s; } .page-head .lead { animation-delay: .25s; } .page-head .actions { animation-delay: .4s; }
  .page-head h1::after { animation: pf-draw 1s cubic-bezier(.2, .7, .2, 1) .5s both; }
  /* js/pagefx.js marks (pf-wait) only what is still below the fold and removes the mark when it comes into view */
  .pf-wait { opacity: 0; transform: translateY(28px); }
  .pf-wait.pf-side { transform: none; translate: calc(-36px * var(--dir)) 0; }
  .pf-wait.pf-side-r { transform: none; translate: calc(36px * var(--dir)) 0; }
  .section-head.pf-wait { transform: translateY(18px); }
  .section-head.pf-wait h2::after { transform: scaleX(0); }
  .checks.pf-wait { opacity: 1; transform: none; }
  .checks.pf-wait li { opacity: 0; translate: calc(-16px * var(--dir)) 0; }
  /* when the block comes into view: it plays the entry once (an animation, so the element keeps its own hover transitions) */
  .pf-in.pf-in { animation: pf-enter .7s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
  .pf-in.pf-in.pf-side { animation-name: pf-enter-s; }
  .pf-in.pf-in.pf-side-r { animation-name: pf-enter-r; }
  .checks.pf-in.pf-in { animation: none; }
}
@keyframes pf-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pf-enter-s { from { opacity: 0; translate: calc(-36px * var(--dir)) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes pf-enter-r { from { opacity: 0; translate: calc(36px * var(--dir)) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes pf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pf-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .page-head::before, .page-head::after, .step-num, .empty-ico, .mgroup-ico, .tag-draft, .product-visual .shot, .detail-visual .shot, .sol-pic img, .band::before, .form-card::before, .form-card .form-status .msg, .next li span, .notfound::before, .notfound::after, .acc[open] .acc-body { animation: none; }
  .tile-ico, .fcard-ico, .gal-card img, .hl, .benefit-cards li, .plan, .step, .upgrades li, .fc-progress::after, .pills a, .legal-toc a { transition: none; }
}