.fp-roll{display:flex;flex-direction:column;background:#fbf8f3}.fp-roll__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:9px 12px 8px;color:#24201d;font-size:12px;font-weight:800;letter-spacing:-.01em}.fp-roll__count{display:inline-block;padding:3px 9px;border-radius:999px;color:#fff;background:#d05a51;font-size:10px;letter-spacing:.02em}.fp-roll__viewport{position:relative;flex:1 1 auto;overflow:hidden}.fp-roll__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding-bottom:58px}.fp-roll__cell{position:relative;aspect-ratio:1;overflow:hidden;background:#e9dfd0}.fp-roll__cell img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.fp-roll__cell i{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:20px;height:20px;border:1.5px solid #fff;border-radius:50%;color:#fff;background:#1815122e;box-shadow:0 1px 4px #00000040;font-size:10px;font-style:normal;font-weight:800;line-height:1}.fp-roll__cell.is-picked img{transform:scale(.9)}.fp-roll__cell.is-picked:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff61;box-shadow:inset 0 0 0 3px #d05a51;pointer-events:none;transition:opacity .3s ease}.fp-roll__cell.is-picked i{z-index:1;background:#d05a51}.fp-roll__tap{position:absolute;z-index:4;width:34px;height:34px;border-radius:50%;background:#ffffff8c;box-shadow:0 0 0 2px #fffc;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}.fp-crop{background:#1d1a18}.fp-crop__photo{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.fp-crop__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:scale(1.05) translate(-1.5%,1.5%)}.fp-crop__frame{position:absolute;z-index:2;top:11%;bottom:11%;left:21.5%;right:21.5%;border:2px solid #fff;box-shadow:0 0 0 999px #18151280,0 10px 28px #0000002e}.fp-crop__frame:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.3;background:linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(255,255,255,.85) calc(33.333% - .5px),rgba(255,255,255,.85) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.85) calc(66.666% - .5px),rgba(255,255,255,.85) calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(255,255,255,.85) calc(33.333% - .5px),rgba(255,255,255,.85) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.85) calc(66.666% - .5px),rgba(255,255,255,.85) calc(66.666% + .5px),transparent calc(66.666% + .5px))}.fp-crop__frame span{position:absolute;width:14px;height:14px;border-color:#fff}.fp-crop__frame span:nth-child(1){left:-3px;top:-3px;border-left:4px solid;border-top:4px solid}.fp-crop__frame span:nth-child(2){right:-3px;top:-3px;border-right:4px solid;border-top:4px solid}.fp-crop__frame span:nth-child(3){right:-3px;bottom:-3px;border-right:4px solid;border-bottom:4px solid}.fp-crop__frame span:nth-child(4){left:-3px;bottom:-3px;border-left:4px solid;border-bottom:4px solid}.fp-crop__sizes{position:absolute;z-index:3;top:10px;left:10px;display:flex;gap:4px;padding:3px;border-radius:999px;background:#fffdf7e6;box-shadow:0 6px 16px #0003}.fp-crop__size{padding:4px 8px;border-radius:999px;color:#24201d;font-size:10px;font-weight:800;line-height:1}.fp-crop__size.is-on{color:#fff;background:#24201d}.fp-crop__touch{position:absolute;z-index:4;left:50%;top:50%;width:30px;height:30px;border-radius:50%;background:#ffffff9e;box-shadow:0 0 0 2px #ffffffd9,0 6px 14px #00000040;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}.fp-crop__touch:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border:2px solid rgba(255,255,255,.9);border-radius:50%;opacity:0}@media(prefers-reduced-motion:no-preference){.fp-steps--motion .fp-steps__journey span{position:relative;background:#fffaf2;transition:background .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}.fp-steps--motion .fp-steps__journey span:after{content:"";position:absolute;top:-9px;right:-9px;bottom:-9px;left:-9px;border-radius:50%;border:2px solid var(--node-color, #315e42);opacity:0;pointer-events:none}.fp-steps--motion .fp-steps__journey span:nth-of-type(1){--node-color: #d05a51}.fp-steps--motion .fp-steps__journey span:nth-of-type(2){--node-color: #efba44}.fp-steps--motion .fp-steps__journey span:nth-of-type(3){--node-color: #315e42}.fp-steps--motion .fp-steps__journey span.is-on{background:#315e42}.fp-steps--motion .fp-steps__journey span.is-current{background:var(--node-color);box-shadow:0 0 0 2px var(--node-color);transform:scale(1.18)}.fp-steps--motion .fp-steps__journey span.is-current:after{animation:fp-motion-node-ping 1.6s cubic-bezier(.2,.8,.2,1) infinite}.fp-steps--motion .fp-steps__journey i{position:relative}.fp-steps--motion .fp-steps__journey i:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#315e42;transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}.fp-steps--motion .fp-steps__journey i.is-filled:after{transform:scaleX(1);transition:transform 1s cubic-bezier(.65,0,.35,1)}.fp-steps--motion .fp-step.is-visible.is-active{border-color:color-mix(in srgb,var(--step-color) 45%,transparent);box-shadow:0 28px 66px #4c372724,0 0 0 4px color-mix(in srgb,var(--step-color) 14%,transparent);transform:translateY(-8px)}.fp-steps--motion .fp-step.is-active .fp-step__num{display:inline-block;animation:fp-motion-num-pop .7s cubic-bezier(.3,1.6,.5,1) both}.fp-steps--motion .fp-step.is-active .fp-step__verb{animation:fp-motion-rise .6s .1s cubic-bezier(.2,.8,.2,1) both}.fp-steps--motion .fp-step__upload-pill,.fp-steps--motion .fp-step__crop-pill,.fp-steps--motion .fp-step__ship-pill,.fp-steps--motion .fp-step__stamp{transition:opacity .45s ease,transform .45s ease}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-step__upload-pill,.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-step__crop-pill,.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-step__ship-pill{opacity:0;transform:translateY(14px)}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-roll__cell img{transform:none}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-roll__cell:after,.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-roll__count{opacity:0}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-roll__cell i{color:transparent;background:#1815122e}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-crop__frame{top:9%;bottom:9%;left:29.5%;right:29.5%}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-crop__photo img{transform:scale(1.12) translate(5%,-2%)}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-crop__size--portrait{color:#fff;background:#24201d}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-crop__size--square{color:#24201d;background:#fffdf7e6}.fp-steps--motion .fp-step:not(.is-active):not(.is-done) .fp-step__stamp{opacity:0;transform:rotate(10deg) scale(1.5);animation:none}.fp-step.is-active .fp-step__upload-pill{animation:fp-motion-pill-in .6s 5.85s cubic-bezier(.2,.8,.2,1) both}.fp-steps--motion .fp-step__upload-pill{overflow:hidden}.fp-steps--motion .fp-step__upload-pill svg{flex:0 0 auto;transition:background .35s ease,stroke .35s ease}.fp-step__upload-pill.is-complete svg{background:#d3e8da;stroke:#315e42;animation:fp-motion-num-pop .5s cubic-bezier(.3,1.6,.5,1)}.fp-steps-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#d05a51;transform:scaleX(var(--fp-progress, 1));transform-origin:left center}.fp-step__upload-pill.is-complete .fp-steps-progress{background:#315e42;transition:background .35s ease}.fp-steps--motion .fp-roll__grid{transition:transform .9s cubic-bezier(.45,0,.2,1)}.fp-roll__cell.is-popping img{animation:fp-motion-cell-press .32s ease-out}.fp-roll__cell.is-popping i{animation:fp-motion-check .4s cubic-bezier(.3,1.6,.5,1) both}.fp-roll__tap.is-tapping{animation:fp-motion-tap .42s ease-out}.fp-roll__count.is-tick{animation:fp-motion-tick .3s cubic-bezier(.2,.8,.2,1)}.fp-step.is-active .fp-crop__frame{animation:fp-motion-crop-frame 3.6s cubic-bezier(.45,0,.2,1) both}.fp-step.is-active .fp-crop__frame:before{animation:fp-motion-crop-grid 3.6s ease both}.fp-step.is-active .fp-crop__frame span{animation:fp-motion-corner .5s 1.1s cubic-bezier(.3,1.6,.5,1) both}.fp-step.is-active .fp-crop__photo img{animation:fp-motion-crop-photo 3.6s cubic-bezier(.45,0,.2,1) both}.fp-step.is-active .fp-crop__size--portrait{animation:fp-motion-chip-off 3.6s step-end both}.fp-step.is-active .fp-crop__size--square{animation:fp-motion-chip-on 3.6s step-end both}.fp-step.is-active .fp-crop__touch{animation:fp-motion-crop-touch 3.6s ease-in-out both}.fp-step.is-active .fp-crop__touch:after{animation:fp-motion-crop-ripple 3.6s ease-out both}.fp-step.is-active .fp-step__crop-pill{animation:fp-motion-pill-in .5s 2.95s cubic-bezier(.2,.8,.2,1) both}.fp-step.is-active .fp-step__crop-pill i{animation:fp-motion-check .55s 3.25s cubic-bezier(.3,1.6,.5,1) both}.fp-step.is-active .fp-step__ship-pill{animation:fp-motion-pill-in .5s .1s cubic-bezier(.2,.8,.2,1) both}.fp-step__ship-pill strong.is-tick{animation:fp-motion-tick .4s cubic-bezier(.2,.8,.2,1)}.fp-step.is-active .fp-step__stamp{animation:fp-motion-stamp .6s 1.95s cubic-bezier(.5,0,.3,1.3) both,fp-steps-stamp 4.8s 2.6s ease-in-out infinite}.fp-steps--motion .fp-step--ship.is-active .fp-step__visual{animation:fp-motion-thud .35s 2.35s ease-out}.fp-steps--motion .fp-steps__footer .fp-btn{position:relative;overflow:hidden}.fp-steps--motion .fp-steps__footer .fp-btn:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skew(-18deg);pointer-events:none}.fp-steps--motion.is-complete .fp-steps__footer .fp-btn:after{animation:fp-motion-shine 1.1s .2s ease both}.fp-steps--motion.is-complete .fp-steps__footer{animation:fp-motion-footer .8s ease both}}@keyframes fp-motion-node-ping{0%{opacity:.7;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}@keyframes fp-motion-num-pop{0%{transform:scale(1)}45%{transform:scale(1.28) rotate(-4deg)}to{transform:scale(1)}}@keyframes fp-motion-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes fp-motion-pill-in{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}@keyframes fp-motion-corner{0%{transform:scale(1)}50%{transform:scale(1.6)}to{transform:scale(1)}}@keyframes fp-motion-check{0%{transform:scale(0) rotate(-45deg)}to{transform:scale(1) rotate(0)}}@keyframes fp-motion-tick{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes fp-motion-stamp{0%{opacity:0;transform:rotate(-12deg) scale(2.3)}70%{opacity:1;transform:rotate(12deg) scale(.9)}to{opacity:1;transform:rotate(10deg) scale(1)}}@keyframes fp-motion-thud{0%,to{transform:none}30%{transform:translateY(2px) scale(.992)}60%{transform:translateY(-1px)}}@keyframes fp-motion-shine{0%{left:-60%}to{left:130%}}@keyframes fp-motion-footer{0%{box-shadow:0 0 #315e4238}to{box-shadow:0 0 0 14px #315e4200}}@keyframes fp-motion-cell-press{0%{transform:scale(1)}40%{transform:scale(.86)}to{transform:scale(.9)}}@keyframes fp-motion-tap{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}@keyframes fp-motion-crop-frame{0%,22%{top:9%;bottom:9%;left:29.5%;right:29.5%}30%{top:10.4%;bottom:10.4%;left:20.8%;right:20.8%}36%,to{top:11%;bottom:11%;left:21.5%;right:21.5%}}@keyframes fp-motion-crop-grid{0%,36%{opacity:0}42%,66%{opacity:.95}74%,84%{opacity:.7}to{opacity:.3}}@keyframes fp-motion-crop-photo{0%,38%{transform:scale(1.12) translate(5%,-2%)}62%{transform:scale(1.12) translate(-2.2%,1.8%)}68%,72%{transform:scale(1.12) translate(-1.5%,1.5%)}86%,to{transform:scale(1.05) translate(-1.5%,1.5%)}}@keyframes fp-motion-chip-off{0%{color:#fff;background:#24201d}20%,to{color:#24201d;background:#fffdf7e6}}@keyframes fp-motion-chip-on{0%{color:#24201d;background:#fffdf7e6}20%,to{color:#fff;background:#24201d}}@keyframes fp-motion-crop-touch{0%{opacity:0;left:52%;top:64%;transform:translate(-50%,-50%) scale(1)}8%{opacity:1;left:40%;top:44%}17%{left:var(--chip-x, 30%);top:var(--chip-y, 13%);transform:translate(-50%,-50%) scale(1)}20%{transform:translate(-50%,-50%) scale(.72)}24%{opacity:1;left:var(--chip-x, 30%);top:var(--chip-y, 13%);transform:translate(-50%,-50%) scale(1)}30%{opacity:0}36%{opacity:0;left:64%;top:56%;transform:translate(-50%,-50%) scale(1)}40%{opacity:1;left:64%;top:56%;transform:translate(-50%,-50%) scale(.84)}62%{opacity:1;left:45%;top:55%;transform:translate(-50%,-50%) scale(.84)}67%,to{opacity:0;left:45%;top:55%;transform:translate(-50%,-50%) scale(1)}}@keyframes fp-motion-crop-ripple{0%,19%{opacity:0;transform:scale(.5)}20%{opacity:.8;transform:scale(.6)}28%,to{opacity:0;transform:scale(1.9)}}
/*# sourceMappingURL=/cdn/shop/t/68/assets/fp-steps-motion.css.map */