/* ================================================================
   CBA Warehouses — shared motion layer
   Linked from every page AFTER the page's own <style>, so these rules
   layer on top. Pair with motion.js loaded after the page's script.
   Selectors that don't exist on a page simply do nothing.
   ================================================================ */

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:400;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),var(--sky));transform-origin:0 50%;transform:scaleX(0)}

/* nav scroll-spy */
nav.links a{transition:background .25s,color .25s}
nav.links a.active:not(.pill){background:var(--blue-soft);color:var(--blue)}

/* hero atmosphere */
.hero{position:relative;overflow:hidden;isolation:isolate}
.aurora{position:absolute;inset:-30% -10% -10% -10%;z-index:-2;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 55%,transparent 95%);mask-image:linear-gradient(#000 55%,transparent 95%)}
.aurora span{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.aurora span:nth-child(1){width:560px;height:560px;right:4%;top:8%;background:rgba(122,167,247,.55);animation:blobA 19s ease-in-out infinite alternate}
.aurora span:nth-child(2){width:440px;height:440px;right:30%;top:30%;background:rgba(20,86,224,.20);animation:blobB 23s ease-in-out infinite alternate}
.aurora span:nth-child(3){width:380px;height:380px;right:-4%;top:46%;background:rgba(150,220,245,.45);animation:blobC 17s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate(-140px,90px) scale(1.15)}}
@keyframes blobB{to{transform:translate(160px,-70px) scale(.85)}}
@keyframes blobC{to{transform:translate(-90px,-120px) scale(1.2)}}
.hero-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(20,86,224,.30) 1.1px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(380px circle at var(--hx,72%) var(--hy,38%),#000,transparent 72%);
  mask-image:radial-gradient(380px circle at var(--hx,72%) var(--hy,38%),#000,transparent 72%)}

/* headline: lines rise out of a mask */
h1 .ln{display:block;overflow:hidden;padding:.02em 0 .14em;margin-bottom:-.14em}
@supports (overflow:clip){h1 .ln{overflow:visible clip}}
h1 .ln > span{display:inline-block;translate:0 115%;animation:lnUp 1.15s cubic-bezier(.19,1,.22,1) forwards}
h1 .ln:nth-child(1) > span{animation-delay:.12s}
h1 .ln:nth-child(2) > span{animation-delay:.24s}
h1 .ln:nth-child(3) > span{animation-delay:.36s}
@keyframes lnUp{to{translate:0 0}}

/* rotating word gets a moving sheen */
.rotator span{
  background:linear-gradient(100deg,var(--blue) 0%,#3F7BFF 25%,var(--sky) 50%,#3F7BFF 75%,var(--blue) 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 5s linear infinite;
}
@keyframes sheen{to{background-position:200% 0}}

/* re-time hero entrance around the headline */
.hero .crumb.up{animation-delay:0s}
.hero .hero-badge.up{animation-delay:.05s}
.hero .hero-sub.up{animation-delay:.55s}
.hero .cta-row.up{animation-delay:.68s}
.mkts .up,.logos .up{animation-delay:.82s}

/* live marketplace dots ping */
.mkt:not(.soon) .dot{position:relative}
.mkt:not(.soon) .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.8);opacity:0}}

/* buttons: magnetic pull + light sweep */
.magnet,nav.links a.magnet{transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s,translate .45s cubic-bezier(.2,.8,.2,1)}
.btn-dark{position:relative;overflow:hidden}
.btn-dark::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  translate:-120% 0;transition:translate .75s var(--ease)}
.btn-dark:hover::after{translate:120% 0}

/* section headings: words blur in */
.w2{display:inline-block;opacity:0;translate:0 .45em;filter:blur(8px);
  transition:opacity .8s var(--ease),translate .8s var(--ease),filter .8s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms)}
.in .w2{opacity:1;translate:0 0;filter:blur(0)}

/* staggered children */
.reveal.stagger{opacity:1;transform:none}
.stagger > *{opacity:0;translate:0 36px}
.stagger > .in{animation:stagIn .95s var(--ease) both;animation-delay:calc(var(--i,0) * 95ms)}
@keyframes stagIn{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}

/* icons draw themselves in */
.glyph svg[data-draw] *{stroke-dasharray:1 1;stroke-dashoffset:1}
.stagger > .in .glyph svg[data-draw] *{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1);transition-delay:calc(.25s + var(--i,0) * 95ms)}

/* cards: 3D tilt + cursor spotlight (pointer devices only, class added by JS) */
.tilt{position:relative;overflow:hidden;--rx:0deg;--ry:0deg;--mx:50%;--my:50%}
.tilt > *{position:relative;z-index:1}
.tilt::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(20,86,224,.13),transparent 45%)}
.tilt:hover::before{opacity:1}
.tilt:hover{transition:transform .18s ease-out,box-shadow .45s,background .45s}
.pcard.tilt:hover{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px)}
.rcard.tilt:hover{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px)}
.vcard.tilt:hover{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px)}
.tcard.tilt:hover{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px)}

/* value-prop numbers pop */
.vcard .vn{transition:background .3s}
.vcard.in .vn{animation:pop .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.2s + var(--i,0) * 95ms)}
.vcard:hover .vn{background:var(--blue)}
@keyframes pop{from{transform:scale(.3) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}

/* steps: scroll-linked rail + active step */
.step-list{position:relative}
.step-rail{position:absolute;left:-18px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--hair);overflow:hidden}
.step-rail i{position:absolute;inset:0;background:linear-gradient(var(--blue),var(--sky));transform-origin:50% 0;transform:scaleY(var(--p,0))}
.srow{border-top:none;position:relative}
.srow::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease)}
.srow.in::before{transform:scaleX(1)}
.srow .snum{transition:color .5s,transform .5s var(--ease)}
.srow.active{background:#fff;padding-left:22px;box-shadow:0 18px 40px rgba(10,27,51,.06)}
.srow.active .snum{color:var(--blue);transform:scale(1.04)}

/* retail analogy */
.quote-card .qmark{position:absolute;top:-34px;right:44px;font-size:clamp(160px,22vw,300px);line-height:1;font-weight:800;
  color:rgba(122,167,247,.13);pointer-events:none;animation:floaty 7s ease-in-out infinite}
.quote-card::before{animation:drift 14s ease-in-out infinite alternate}
.quote-card blockquote{position:relative;z-index:1}
.quote-card blockquote.solo{opacity:0;translate:0 18px;transition:opacity 1s var(--ease) .15s,translate 1s var(--ease) .15s}
.quote-card.in blockquote.solo{opacity:1;translate:0 0}
@keyframes drift{to{transform:translate(-260px,180px) scale(1.25)}}
.quote-card blockquote p{opacity:0;translate:0 18px;transition:opacity 1s var(--ease),translate 1s var(--ease)}
.quote-card.in blockquote p{opacity:1;translate:0 0}
.quote-card.in blockquote p:nth-child(1){transition-delay:.15s}
.quote-card.in blockquote p:nth-child(2){transition-delay:.45s}
.quote-card .sig{opacity:0;transition:opacity 1s var(--ease) .8s}
.quote-card.in .sig{opacity:1}
.quote-card .hl{background:linear-gradient(rgba(122,167,247,.28),rgba(122,167,247,.28)) no-repeat 0 90%/0% 32%;
  transition:background-size 1.3s var(--ease)}
.quote-card.in .hl{background-size:100% 32%;transition-delay:calc(.7s + var(--h,0) * .6s)}

/* pay band: rotating light + fees get struck out one by one */
.pay .inner > *{z-index:1}
.pay .inner::after{content:'';position:absolute;inset:-60%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(255,255,255,.10) 40deg,transparent 80deg,transparent 180deg,rgba(122,167,247,.18) 220deg,transparent 260deg);
  animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pay .strike span{text-decoration:none;position:relative;transition:color .5s}
.pay .strike span::after{content:'';position:absolute;left:12px;right:12px;top:50%;height:2px;border-radius:2px;background:var(--sky);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.65,0,.35,1);transition-delay:calc(.5s + var(--i,0) * 140ms)}
.pay .strike span.in::after{transform:scaleX(1)}
.pay .strike span.in{color:rgba(255,255,255,.7);transition-delay:calc(.8s + var(--i,0) * 140ms)}

/* stats band: soft edges, pause on hover */
.band-viewport{margin-top:54px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band-viewport .band-track{margin-top:0}
.band-viewport:hover .band-track{animation-play-state:paused}
.bstat .n{transition:color .3s}
.bstat:hover .n{color:var(--blue)}

/* difference rows: the "not X" gets struck */
.drow .big .no{text-decoration:none;-webkit-box-decoration-break:slice;box-decoration-break:slice;
  background:linear-gradient(rgba(91,107,130,.75),rgba(91,107,130,.75)) no-repeat 0 58%/0% 2px;
  transition:background-size .8s cubic-bezier(.65,0,.35,1)}
.drow.in .big .no{background-size:100% 2px;transition-delay:calc(.45s + var(--i,0) * 120ms)}

/* credibility panel: orbiting dots + floating mark */
.panel .orbit{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;animation:spin 16s linear infinite}
.panel .orbit.o1{width:84%}
.panel .orbit.o2{width:106%;animation-duration:26s;animation-direction:reverse}
.panel .orbit i{position:absolute;top:0;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 4px rgba(20,86,224,.15),0 0 18px rgba(20,86,224,.6)}
.panel .orbit.o2 i{background:var(--sky);width:8px;height:8px;margin:-4px 0 0 -4px}
.panel img{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-10px)}}
.check .tick{transition:background .3s,color .3s}
.check.in .tick{animation:pop .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.25s + var(--i,0) * 110ms)}
.check:hover .tick{background:var(--blue);color:#fff}

/* FAQ: smooth open/close (JS drives height) */
.faq .ans{padding:0 4px;overflow:hidden}
.faq .ans::after{content:'';display:block;height:30px}
.faq summary .ic{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s}
.faq details.closing summary .ic{transform:none;background:transparent;border-color:var(--hair)}

/* footer CTA: cursor glow + blur-in words */
.foot-glow{position:absolute;left:50%;top:65%;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(122,167,247,.30),transparent 62%);transform:translate(-50%,-50%);will-change:transform}
.foot-hero h2 .w{filter:blur(12px)}
.foot-hero.in h2 .w{animation-name:wordIn;animation-duration:.95s}
@keyframes wordIn{from{opacity:0;transform:translateY(30px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}

@media(max-width:980px){
  .aurora span:nth-child(1){width:360px;height:360px}
  .aurora span:nth-child(2){width:300px;height:300px}
  .aurora span:nth-child(3){width:260px;height:260px}
  .step-rail{left:-12px}
}

/* phone header: keep brand + pill on one line each */
@media(max-width:560px){
  .nav{padding:12px 14px;gap:8px}
  .brand{gap:8px;font-size:.86rem;white-space:nowrap;min-width:0}
  .brand img{height:26px}
  .brand .sub{font-size:.56rem}
  nav.links{flex-shrink:0}
  nav.links .pill{padding:9px 13px!important;font-size:.8rem;white-space:nowrap;margin-left:0}
}

/* ============ reduced motion: show every finished state ============ */
@media(prefers-reduced-motion:reduce){
  .stagger > *{opacity:1;translate:none}
  h1 .ln > span{translate:none}
  .w2{opacity:1;translate:none;filter:none}
  .srow::before,.pay .strike span::after{transform:scaleX(1)}
  .drow .big .no{background-size:100% 2px}
  .quote-card .hl{background-size:100% 32%}
  .quote-card blockquote p,.quote-card blockquote.solo,.quote-card .sig{opacity:1;translate:none}
  .foot-hero h2 .w{opacity:1;transform:none;filter:none}
}