/* Homepage scroll animations for: one account, screens, who it's for, getting started. */

/* Pinned sections (wide, tall screens only; set by home-scroll.js) */
.site .is-pinned { padding-block: 0; }
.site .is-pinned > .pin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 66px; overflow: hidden; }

/* ---------- One account: apps wire up to the one item record ---------- */
.site .oa-stage { position: relative; padding: 3.4rem 2.6rem; }
.site .oa-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.site .oa-lines .ln { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-dasharray: 4 6; }
.site .oa-lines .ln.on { stroke: #ea580c; stroke-dasharray: none; }
.site .oa-lines .pulse { fill: #fbbf24; }
.site .oa-node { position: absolute; z-index: 2; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 17px; background: var(--grad); color: #ffffff; font: 600 .64rem/1 var(--f-mono); letter-spacing: .04em; box-shadow: 0 14px 28px -14px #ea580ce6; transition: box-shadow .35s var(--ease); will-change: transform; }
.site .oa-node.hit { box-shadow: 0 0 0 7px #fbbf2440, 0 14px 30px -12px #ea580c; }
.site .oa-node[data-app=sfa] { left: 0; top: 0; }
.site .oa-node[data-app=wms] { right: 0; top: 0; }
.site .oa-node[data-app=tms] { right: 0; bottom: 0; }
.site .oa-node[data-app=erp] { left: 0; bottom: 0; }
.site .oa-card { position: relative; z-index: 1; background: var(--surface-solid); }
.site .oa-price, .site .oa-qty { display: inline-block; transition: color .3s; }
.site .oa-price.flash, .site .oa-qty.flash { color: var(--gold); animation: hs-flip .5s var(--ease-pop); font-weight: 700; }
.site .oa-low.flash { animation: hs-ping 1.2s var(--ease) infinite; }
@keyframes hs-flip { 0% { transform: translateY(-8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hs-ping { 50% { box-shadow: 0 0 0 6px #f59e0b33; } }

/* ---------- Screens: scroll flips the tabs ---------- */
.site .tab { position: relative; overflow: hidden; }
.site .tab-fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #ffffff; opacity: .7; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.site .scr-pin:not(.is-pinned) .tab-fill { display: none; }
.site .scr-pin.is-pinned .sec-head { max-width: none; margin-bottom: 1.25rem; }
.site .scr-pin.is-pinned .sec-head .lead, .site .scr-pin.is-pinned .hero-note { display: none; }
.site .scr-pin.is-pinned .mt-5 { margin-top: 1rem; }
.site .tabpanel.is-enter .preview-frame > .stack { animation: hs-in-left .6s var(--ease-pop) both; }
.site .tabpanel.is-enter .mock { animation: hs-in-right .75s var(--ease-pop) both; }
.site .tabpanel.is-enter .kpi { animation: hs-up .5s var(--ease-pop) both; }
.site .tabpanel.is-enter .kpi:nth-child(2) { animation-delay: .08s; }
.site .tabpanel.is-enter .kpi:nth-child(3) { animation-delay: .16s; }
.site .tabpanel.is-enter .tbl tbody tr { animation: hs-up .45s var(--ease-pop) both; }
.site .tabpanel.is-enter .tbl tbody tr:nth-child(1) { animation-delay: .18s; }
.site .tabpanel.is-enter .tbl tbody tr:nth-child(2) { animation-delay: .25s; }
.site .tabpanel.is-enter .tbl tbody tr:nth-child(3) { animation-delay: .32s; }
.site .tabpanel.is-enter .tbl tbody tr:nth-child(4) { animation-delay: .39s; }
@keyframes hs-in-left { from { opacity: 0; transform: translateX(-40px); } }
@keyframes hs-in-right { from { opacity: 0; transform: translateX(60px) rotate(2deg) scale(.96); } }
@keyframes hs-up { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Who it's for: the deck fans out, each card has a little animation ---------- */
.site .fan > .card { will-change: transform; transform-origin: 50% 100%; background: var(--surface-solid); }
.site .bf-ico { display: block; width: 46px; height: 46px; margin-bottom: .85rem; overflow: visible; }
.site .bf-ico .stroke { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.site .bf-ico .fill { fill: #ea580c; }
.site .bf-ico .fill2 { fill: #dc2626; }
.site .bf-ico * { transform-box: fill-box; transform-origin: center; }
.site .ico-cup .steam { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; animation: hs-steam 2.4s ease-in-out infinite; }
.site .ico-cup .s2 { animation-delay: .4s; } .site .ico-cup .s3 { animation-delay: .8s; }
@keyframes hs-steam { 0% { opacity: 0; transform: translateY(5px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.site .ico-cart .cart { animation: hs-roll 2.6s ease-in-out infinite alternate; transform-box: view-box; }
.site .ico-cart .box { fill: #e2bb84; }
.site .ico-cart .b2 { animation: hs-hop 1.3s ease-in-out infinite; }
.site .ico-cart .wheel circle { fill: var(--bg-2); stroke: var(--amber); stroke-width: 2.2; }
.site .ico-cart .wheel path { stroke: var(--amber); stroke-width: 1.8; }
.site .ico-cart .wheel { animation: hs-spin 1s linear infinite; }
.site .ico-cart .ground, .site .ico-truck .road { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 5; animation: hs-road .6s linear infinite; }
@keyframes hs-roll { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes hs-hop { 50% { transform: translateY(-2px); } }
@keyframes hs-spin { to { transform: rotate(360deg); } }
@keyframes hs-road { to { stroke-dashoffset: -11; } }
.site .ico-tag .tag { transform-box: view-box; transform-origin: 24px 4px; animation: hs-swing 2.2s ease-in-out infinite; }
.site .ico-tag .hole { fill: var(--bg-2); }
.site .ico-tag .bars { stroke: #ffffff; stroke-width: 1.6; opacity: .85; }
@keyframes hs-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.site .ico-truck .truck { animation: hs-bump .45s ease-in-out infinite; transform-box: view-box; }
.site .ico-truck .tyre { fill: var(--bg-2); stroke: var(--amber); stroke-width: 2.4; }
@keyframes hs-bump { 50% { transform: translateY(-1.2px); } }

/* ---------- Getting started: a cart rides the track and lights each step ---------- */
.site .gs-track { position: relative; height: 4px; border-radius: 4px; background: var(--surface-2); margin: 0 calc(100% / 6) 2.4rem; }
.site .gs-track i { position: absolute; inset: 0; border-radius: 4px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.site .gs-track span { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transition: background .3s, border-color .3s, transform .4s var(--ease-pop); }
.site .gs-track span.on { background: #ea580c; border-color: #ea580c; transform: scale(1.25); box-shadow: 0 0 0 6px #ea580c26; }
.site .gs-cart { position: absolute; bottom: 4px; left: 0; width: 34px; height: 30px; margin-left: -17px; }
.site .gs-steps .card { transition: border-color .4s, background .4s, transform .5s var(--ease-pop), box-shadow .4s; }
.site .gs-steps .card.is-lit { border-color: color-mix(in srgb, var(--orange) 50%, transparent); background: var(--grad-soft); transform: translateY(-6px); box-shadow: 0 24px 50px -30px #ea580cb3; }
.site .gs-steps .card::after { content: "✓"; position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #ffffff; font-weight: 700; font-size: .85rem; transform: scale(0); transition: transform .45s var(--ease-pop); }
.site .gs-steps .card.is-lit::after { transform: scale(1); }
.site .gs-steps .card.is-lit .case-num { color: var(--amber); }
@media (width <= 860px) { .site .gs-track { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .site .bf-ico *, .site .gs-cart, .site .hpin-cart { animation: none !important; }
}

/* the progress marker is an ant carrying a carton */
.site .gs-cart { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cg stroke='%239a3412' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cg%3E%3Cpath d='M20 26l-5 8M23 26l1 8M26 25l6 8'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-6 23 26;6 23 26;-6 23 26' dur='.45s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M21 26l-8 7M24 26l-2 8M27 25l9 7'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='6 23 26;-6 23 26;6 23 26' dur='.45s' repeatCount='indefinite'/%3E%3C/g%3E%3Cpath d='M34 17q3-7 9-7M32 16q1-7 6-9'/%3E%3C/g%3E%3Crect x='6' y='3' width='21' height='16' rx='2' fill='%23e2bb84'/%3E%3Crect x='14.5' y='3' width='4' height='16' fill='%239a6a34' opacity='.55'/%3E%3Crect x='23' y='3' width='4' height='16' rx='1' fill='%23c1925a'/%3E%3Cellipse cx='12' cy='24' rx='8' ry='6' fill='%23dc2626'/%3E%3Cellipse cx='22.5' cy='23.5' rx='4.6' ry='3.8' fill='%23ea580c'/%3E%3Ccircle cx='31' cy='20.5' r='5' fill='%23ea580c'/%3E%3Ccircle cx='33' cy='19.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") no-repeat center bottom / contain; width: 40px; height: 30px; margin-left: -20px; animation: hs-hop .45s ease-in-out infinite; }