/* EMVCo homepage animation: a shopper pays, the bank asks for two steps, they approve in the app.
   Pure CSS, 14s loop. Sizes in container query units so it scales with the card. */
@font-face{font-family:"Inter";src:url("../fonts/inter-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url("../fonts/roboto-slab-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
.emvm{--off:0s;container-type:inline-size}
.emvm.is-hover{--off:5.04s}
.emvm .e-a{animation-duration:14s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-delay:calc(var(--d, 0s) - var(--off))}
.emvm .dl1{--d:.05s}.emvm .dl2{--d:.1s}.emvm .dl3{--d:.15s}.emvm .dl4{--d:.2s}.emvm .dl5{--d:.25s}.emvm .dl6{--d:.3s}.emvm .dl7{--d:.35s}.emvm .dl8{--d:.4s}.emvm .dl9{--d:.45s}
.emvm .ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.emvm .icf{fill:currentColor}
.emvm .e-word{animation-name:em-drift;animation-timing-function:linear}
.emvm .e-l{display:inline-block;animation-name:em-letter}
.emvm .e-lock{animation-name:em-lock}
.emvm .e-phone{animation-name:em-phone;transform-origin:50% 35%}
.emvm .e-scr-a{opacity:0;animation-name:em-a;transform-origin:50% 30%}
.emvm .e-pay{animation-name:em-pressA}
.emvm .e-scr-b{animation-name:em-b}
.emvm .e-kb{animation-name:em-kidB}
.emvm .e-open{animation-name:em-pressB}
.emvm .e-num1{animation-name:em-num}
.emvm .e-tick1{opacity:0;animation-name:em-tick}
.emvm .e-dim{opacity:0;animation-name:em-dim;animation-timing-function:ease-in-out}
.emvm .e-scr-d{transform:translateY(101%);animation-name:em-d}
.emvm .e-kd{animation-name:em-kidD}
.emvm .e-disc{fill:#F1EAFE;transform-box:fill-box;transform-origin:center;animation-name:em-disc;animation-timing-function:cubic-bezier(.34,1.5,.64,1)}
.emvm .e-ckc{fill:none;stroke:#8A3BFF;stroke-width:5;stroke-linecap:round;stroke-dasharray:277;animation-name:em-ckc}
.emvm .e-ckt{fill:none;stroke:#8A3BFF;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:56;animation-name:em-ckt}
.emvm .e-card{opacity:0;transform-origin:0 60%;animation-name:em-card}
.emvm .e-scan{opacity:0;animation-name:em-scan}
.emvm .e-spin{animation:em-spin 1.1s linear infinite}
.emvm .e-track{fill:none;stroke:rgba(30,142,74,.16);stroke-width:4}
.emvm .e-arc{fill:none;stroke:#1E8E4A;stroke-width:4;stroke-linecap:round;stroke-dasharray:70 220}
.emvm .e-fp{animation-name:em-fp}
.emvm .e-ok{opacity:0;animation-name:em-ok}
.emvm .e-okp{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;animation-name:em-okp}
.emvm .e-lab1{animation-name:em-lab1}
.emvm .e-lab2{opacity:0;animation-name:em-lab2}
.emvm .e-touch{opacity:0;animation-name:em-touch;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.emvm .e-rip{opacity:0;animation-name:em-ripple;animation-timing-function:ease-out}
.emvm .e-notefade{opacity:0;animation-name:em-fadeNote}
.emvm .e-arw{fill:none;stroke:#141414;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:270;animation-name:em-arw}
.emvm .e-arh{fill:none;stroke:#141414;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:62;animation-name:em-arh}
.emvm .e-note{opacity:0;animation-name:em-note}
.emvm .e-hl{background-size:100% .5em;animation-name:em-hl}
.emvm.is-hover .e-a,.emvm.is-hover .e-spin{animation-play-state:paused}
.emvm.is-hover:hover .e-a,.emvm.is-hover:hover .e-spin{animation-play-state:running}
.emvm.is-still .e-a,.emvm.is-still .e-spin{animation:none}
@media (prefers-reduced-motion: reduce){.emvm .e-stage .e-a,.emvm .e-stage .e-spin{animation:none}}

@keyframes em-drift{0%{transform:translateX(2.5cqw)}100%{transform:translateX(-2.5cqw)}}
@keyframes em-letter{0%,2%{opacity:0;transform:translateY(.45em) rotate(4deg)}11%{opacity:1;transform:none}87%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.64,0,.78,0)}93%,100%{opacity:0;transform:translateY(-.35em)}}
@keyframes em-phone{0%,2%{transform:translateY(80cqw) rotate(-7deg);animation-timing-function:cubic-bezier(.34,1.3,.64,1)}12%{transform:none}45.7%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}51.4%{transform:translateX(-9cqw) scale(.95)}68.6%{transform:translateX(-9cqw) scale(.95);animation-timing-function:cubic-bezier(.65,0,.35,1)}74.3%{transform:none}87.9%{transform:none;animation-timing-function:cubic-bezier(.55,0,.75,.2)}95%,100%{transform:translateY(80cqw) rotate(6deg)}}
@keyframes em-lock{0%,29%{opacity:0;transform:scale(.3) rotate(-20deg);animation-timing-function:cubic-bezier(.34,1.6,.64,1)}33%{opacity:1;transform:none}44.3%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.55,0,.75,.2)}47.5%,100%{opacity:0;transform:scale(.3) rotate(10deg)}}
@keyframes em-a{0%,25%{opacity:1;transform:none}29.5%,100%{opacity:0;transform:scale(.92) translateY(-2cqw)}}
@keyframes em-pressA{0%,21%{transform:none}22.2%{transform:scale(.95)}24%,100%{transform:none}}
@keyframes em-b{0%,25%{transform:translateY(101%)}30.5%,100%{transform:none}}
@keyframes em-kidB{0%,27%{opacity:0;transform:translateY(1.4cqw)}32.5%,100%{opacity:1;transform:none}}
@keyframes em-pressB{0%,42.6%{transform:none}43.8%{transform:scale(.95)}45.6%,100%{transform:none}}
@keyframes em-num{0%,73.6%{opacity:1}75%,100%{opacity:0}}
@keyframes em-tick{0%,73.6%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.34,1.6,.64,1)}76%,100%{opacity:1;transform:none}}
@keyframes em-dim{0%,45.7%{opacity:0}51.4%,68.6%{opacity:.28}74.3%,100%{opacity:0}}
@keyframes em-d{0%,75.7%{transform:translateY(101%)}80.7%,100%{transform:none}}
@keyframes em-kidD{0%,79%{opacity:0;transform:translateY(1.4cqw)}83%,100%{opacity:1;transform:none}}
@keyframes em-disc{0%,78.6%{opacity:0;transform:scale(.4)}82%,100%{opacity:1;transform:none}}
@keyframes em-ckc{0%,79.3%{stroke-dashoffset:277}84%,100%{stroke-dashoffset:0}}
@keyframes em-ckt{0%,82.1%{stroke-dashoffset:56}86%,100%{stroke-dashoffset:0}}
@keyframes em-card{0%,46.4%{opacity:0;transform:translate(-14cqw,6cqw) scale(.5) rotate(-6deg);animation-timing-function:cubic-bezier(.34,1.35,.64,1)}52.9%{opacity:1;transform:none}68.6%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.55,0,.75,.2)}72.9%,100%{opacity:0;transform:translate(-14cqw,4cqw) scale(.55) rotate(-4deg)}}
@keyframes em-scan{0%,55%{opacity:0}56.4%,61.4%{opacity:1}62.9%,100%{opacity:0}}
@keyframes em-spin{to{transform:rotate(360deg)}}
@keyframes em-fp{0%,61.4%{opacity:1;transform:none}63%,100%{opacity:0;transform:scale(.6)}}
@keyframes em-ok{0%,61.4%{opacity:0;transform:scale(.2);animation-timing-function:cubic-bezier(.34,1.5,.64,1)}65.7%,100%{opacity:1;transform:none}}
@keyframes em-okp{0%,63.6%{stroke-dashoffset:64}67.9%,100%{stroke-dashoffset:0}}
@keyframes em-lab1{0%,61.4%{opacity:1}63%,100%{opacity:0}}
@keyframes em-lab2{0%,62.5%{opacity:0;transform:translateY(.8cqw)}65%,100%{opacity:1;transform:none}}
@keyframes em-touch{0%,15.7%{opacity:0;transform:translate(58cqw,64cqw) scale(1.3)}19.3%{opacity:1;transform:translate(47.8cqw,49.1cqw) scale(1)}21%{opacity:1;transform:translate(47.8cqw,49.1cqw) scale(1)}22.2%{transform:translate(47.8cqw,49.1cqw) scale(.78)}23.6%{opacity:1;transform:translate(47.8cqw,49.1cqw) scale(1)}25.7%{opacity:0;transform:translate(47.8cqw,49.1cqw) scale(1.1)}37.9%{opacity:0;transform:translate(56cqw,58cqw) scale(1.3)}41.4%{opacity:1;transform:translate(47.8cqw,43.8cqw) scale(1)}42.6%{transform:translate(47.8cqw,43.8cqw) scale(1)}43.8%{transform:translate(47.8cqw,43.8cqw) scale(.78)}45%{opacity:1;transform:translate(47.8cqw,43.8cqw) scale(1)}46.8%{opacity:0;transform:translate(47.8cqw,43.8cqw) scale(1.1)}51.4%{opacity:0;transform:translate(76cqw,52cqw) scale(1.3)}54.3%{opacity:1;transform:translate(66.3cqw,35.4cqw) scale(1)}55.4%{transform:translate(66.3cqw,35.4cqw) scale(.78)}60.7%{opacity:1;transform:translate(66.3cqw,35.4cqw) scale(.78)}62%{opacity:1;transform:translate(66.3cqw,35.4cqw) scale(1)}63.6%,100%{opacity:0;transform:translate(66.3cqw,35.4cqw) scale(1.1)}}
@keyframes em-ripple{0%,22%{opacity:0;transform:scale(1)}22.3%{opacity:.8;transform:scale(1)}25%{opacity:0;transform:scale(2.6)}43.6%{opacity:0;transform:scale(1)}43.9%{opacity:.8;transform:scale(1)}46.6%{opacity:0;transform:scale(2.6)}55.2%{opacity:0;transform:scale(1)}55.5%{opacity:.8;transform:scale(1)}58.5%,100%{opacity:0;transform:scale(2.6)}}
@keyframes em-fadeNote{0%,83.6%{opacity:0}84.3%,88.6%{opacity:1}91.8%,100%{opacity:0}}
@keyframes em-arw{0%,84.3%{stroke-dashoffset:270}87.5%,100%{stroke-dashoffset:0}}
@keyframes em-arh{0%,87.3%{stroke-dashoffset:62}88.6%,100%{stroke-dashoffset:0}}
@keyframes em-note{0%,81.4%{opacity:0;transform:translateY(2.5cqw) rotate(-11deg) scale(.8);animation-timing-function:cubic-bezier(.34,1.4,.64,1)}84.6%{opacity:1;transform:rotate(-5deg)}88.6%{opacity:1;transform:rotate(-5deg);animation-timing-function:cubic-bezier(.55,0,.75,.2)}91.8%,100%{opacity:0;transform:translateY(-2cqw) rotate(-5deg) scale(.9)}}
@keyframes em-hl{0%,83.6%{background-size:0% .5em}86.4%,100%{background-size:100% .5em}}