/* Body Science Marketing: site motion (Oct 2026). Linked from index.html, services.html and contact.html.
   Every animation plays once and ends in the normal static design. Visitors with reduced motion see the
   finished state with nothing moving. This file does not style or affect any video, header image or form field. */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 1. "Front end to back end.": an orange line sweeps along each row, 01 to 06, and the step numbers end orange */
.chain-sweep{position:absolute;left:0;right:0;top:-1px;height:2px;background:#F4931E;transform:scaleX(0);transform-origin:left center;pointer-events:none}
.chain-on{color:#F4931E!important}

/* 2. Results numbers roll into place like an odometer */
.odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1}
.odo-col{display:block;will-change:transform}
.odo-col span{display:block;height:1em;line-height:1;text-align:center}

/* 2b. Leadership names as TV lower thirds (orange edge). flex:1 0 auto makes both straps the same height. */
.lower-third{flex:1 0 auto;position:relative;z-index:1;margin:-52px 14px 0 0;background:#0A0A0B;color:#FFFFFF;border-left:4px solid #F4931E;border-radius:4px 8px 8px 4px;padding:12px 14px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.lower-third span+span{color:#C8CACE!important}

/* 3. Services: sticky section pills (the bar is added by bsm-motion.js on services.html only) */
.svc-bar{font-family:'Archivo','Helvetica Neue',Helvetica,sans-serif;-webkit-font-smoothing:antialiased;position:fixed;left:0;right:0;top:0;z-index:50;background:rgba(10,10,11,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.10);transform:translateY(-101%);transition:transform .28s ease;color:#FFFFFF}
.svc-bar.show{transform:none}
.svc-bar-in{position:relative;max-width:1280px;margin:0 auto;padding:9px clamp(20px,4vw,40px);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-bar-in::-webkit-scrollbar{display:none}
.svc-bar a{position:relative;z-index:1;flex:none;text-decoration:none;font-size:14px;font-weight:500;padding:9px 16px;border-radius:999px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;color:#FFFFFF;border:1px solid rgba(255,255,255,.22);transition:color .25s ease,border-color .25s ease}
.svc-bar a.on{color:#0A0A0B;border-color:transparent}
.svc-bar-ind{position:absolute;z-index:0;top:9px;height:40px;left:0;width:0;border-radius:999px;background:#F4931E;transition:transform .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1);opacity:0}
.svc-bar-ind.ready{opacity:1}
.svc-page #tv,.svc-page #digital,.svc-page #creative,.svc-page #amazon,.svc-page #sales,.svc-page #business{scroll-margin-top:72px}
/* the Digital section's left column sticks while you read; keep it clear of the bar */
.svc-page #digital [style*="position: sticky"]{top:84px!important}
@media (prefers-reduced-motion: no-preference){html.svc-page{scroll-behavior:smooth}}

/* 4. Contact forms: "Sending…" spinner, then the success check draws in.
   Uses the aria-busy flag the existing submit script already sets. */
form[data-netlify] button[type="submit"][aria-busy="true"]{color:transparent!important;position:relative}
form[data-netlify] button[type="submit"][aria-busy="true"]::after{content:"Sending\2026";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0A0A0B;padding-left:18px}
form[data-netlify] button[type="submit"][aria-busy="true"]::before{content:"";position:absolute;left:18px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(10,10,11,.2);border-top-color:#F4931E;border-radius:50%;animation:bsm-spin .8s linear infinite}
[data-form-state="success"]:not([hidden]) [role="status"]>span:first-child{animation:bsm-pop .5s cubic-bezier(.2,.9,.3,1.25) both}
[data-form-state="success"]:not([hidden]) [role="status"]>span:first-child svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:bsm-draw .45s .3s ease-out forwards}
[data-form-state="success"]:not([hidden]) [role="status"]>h2,[data-form-state="success"]:not([hidden]) [role="status"]>p{animation:bsm-rise .5s .2s ease-out both}
@keyframes bsm-spin{to{transform:rotate(360deg)}}
@keyframes bsm-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bsm-draw{to{stroke-dashoffset:0}}
@keyframes bsm-rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion: reduce){
  [data-form-state="success"] *{animation:none!important}
  [data-form-state="success"] svg path{stroke-dashoffset:0!important}
  form[data-netlify] button[type="submit"][aria-busy="true"]::before{animation:none}
  .svc-bar,.svc-bar a,.svc-bar-ind{transition:none}
}