/* it-scenes-v1: the six "what you get" cards demonstrate themselves. Each card
   holds one small stage that plays the actual mechanic: a trade being picked and
   lines filling in, a field typing onto a document, a shutter and a signature
   drawing, a QR being scanned and a tap paying, a month repeating, a quote
   turning into an invoice. Motion only starts when the card is on screen, and
   stops entirely for anyone who asks for reduced motion. */
.sc{position:relative;margin-top:auto;aspect-ratio:26/15;min-height:150px;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#FDFCF8,#F6F2E9);border:1px solid var(--ih-line,#E8E4DC)}
.sc svg{position:absolute;inset:0;width:100%;height:100%}
.sc .ink{fill:none;stroke:#1B1917;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sc .dim{fill:none;stroke:#B9B2A6;stroke-width:1.4;stroke-linecap:round}
.sc .acc{fill:none;stroke:#F26207;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc .fillw{fill:#fff;stroke:#DED8CC;stroke-width:1.2}
.sc .fillg{fill:#E7E1D6}
.sc .fillo{fill:#F26207}
.sc .fillb{fill:#1B1917}
.sc text{font:600 8px Inter,system-ui,sans-serif;fill:#1B1917}
.sc text.sm{font-size:6.6px;fill:#7C766C;font-weight:500}
.sc text.on{font-size:7.4px;fill:#fff;font-weight:700}
/* everything animated starts in its resting state and only moves once .go is set */
.sc [data-a]{animation-play-state:paused}
.sc.go [data-a]{animation-play-state:running}
/* 1 trade picked, lines land */
@keyframes sc-open{0%,12%{transform:translateY(-3px);opacity:0}18%,100%{transform:translateY(0);opacity:1}}
@keyframes sc-row{0%,30%{transform:scaleX(0);opacity:0}42%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes sc-caret{0%,100%{opacity:0}50%{opacity:1}}
.sc .r1,.sc .r2,.sc .r3,.sc .r4{transform-origin:left center;animation:sc-row 5.5s ease-in-out infinite}
.sc .r2{animation-delay:.22s}.sc .r3{animation-delay:.44s}.sc .r4{animation-delay:.66s}
.sc .menu{animation:sc-open 5.5s ease-in-out infinite}
/* 2 typing onto the document */
@keyframes sc-type{0%,8%{width:0}46%,100%{width:104px}}
@keyframes sc-print{0%,52%{opacity:0;transform:translateY(4px)}64%,100%{opacity:1;transform:translateY(0)}}
.sc .typed{animation:sc-type 5.5s steps(26,end) infinite}
.sc .printed{animation:sc-print 5.5s ease-out infinite}
.sc .caret{animation:sc-caret 1s steps(1,end) infinite}
/* 3 shutter, then the signature draws */
@keyframes sc-flash{0%,20%{opacity:0}24%{opacity:.85}34%,100%{opacity:0}}
@keyframes sc-after{0%,26%{opacity:0}38%,100%{opacity:1}}
@keyframes sc-sign{0%,44%{stroke-dashoffset:200}86%,100%{stroke-dashoffset:0}}
.sc .flash{fill:#fff;animation:sc-flash 5.5s ease-out infinite}
.sc .after{animation:sc-after 5.5s ease-out infinite}
.sc .sign{stroke-dasharray:200;stroke-dashoffset:200;animation:sc-sign 5.5s ease-in-out infinite}
/* 4 the scan beam, then the tap and the paid stamp */
@keyframes sc-beam{0%,6%{transform:translateY(0);opacity:0}10%{opacity:.9}46%{transform:translateY(46px);opacity:.9}52%,100%{opacity:0;transform:translateY(46px)}}
@keyframes sc-tap{0%,54%{transform:scale(.4);opacity:0}62%{transform:scale(1);opacity:.55}74%,100%{transform:scale(1.5);opacity:0}}
@keyframes sc-paid{0%,66%{opacity:0;transform:scale(.9)}76%,100%{opacity:1;transform:scale(1)}}
@keyframes sc-finger{0%,50%{transform:translate(0,6px);opacity:0}58%{opacity:1;transform:translate(0,0)}70%{transform:translate(0,3px)}80%,100%{transform:translate(0,0);opacity:1}}
.sc .beam{animation:sc-beam 5.5s ease-in-out infinite}
.sc .ripple{transform-origin:center;transform-box:fill-box;animation:sc-tap 5.5s ease-out infinite}
.sc .paid{transform-origin:center;transform-box:fill-box;animation:sc-paid 5.5s ease-out infinite}
.sc .finger{animation:sc-finger 5.5s ease-out infinite}
/* 5 the month repeats */
@keyframes sc-spin{0%,10%{transform:rotate(0)}55%,100%{transform:rotate(360deg)}}
@keyframes sc-mon{0%,18%{opacity:0}26%,44%{opacity:1}52%,100%{opacity:0}}
@keyframes sc-mon2{0%,50%{opacity:0}58%,100%{opacity:1}}
.sc .cyc{transform-origin:center;transform-box:fill-box;animation:sc-spin 5.5s cubic-bezier(.6,0,.3,1) infinite}
.sc .m1{animation:sc-mon 5.5s linear infinite}
.sc .m2{animation:sc-mon2 5.5s linear infinite}
/* 6 quote becomes invoice */
@keyframes sc-slide{0%,20%{transform:translateX(0);opacity:1}46%,100%{transform:translateX(74px);opacity:0}}
@keyframes sc-arrive{0%,40%{transform:translateX(-52px);opacity:0}62%,100%{transform:translateX(0);opacity:1}}
.sc .quo{animation:sc-slide 5.5s cubic-bezier(.5,0,.2,1) infinite}
.sc .inv{animation:sc-arrive 5.5s cubic-bezier(.5,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){
  .sc [data-a]{animation:none!important}
  .sc .r1,.sc .r2,.sc .r3,.sc .r4{transform:scaleX(1);opacity:1}
  .sc .typed{width:104px}.sc .printed,.sc .after,.sc .paid,.sc .inv{opacity:1;transform:none}
  .sc .sign{stroke-dashoffset:0}.sc .quo{opacity:1;transform:none}.sc .beam,.sc .ripple,.sc .flash{opacity:0}
  .sc .m1{opacity:0}.sc .m2{opacity:1}.sc .caret{opacity:0}
}