body.template-index .galix-how[data-how-motion]{--how-progress: 0;--how-accent: #6d55d9;isolation:isolate}body.template-index [data-how-motion] .galix-how__steps{isolation:isolate}body.template-index [data-how-motion] .galix-how__steps:before,body.template-index [data-how-motion] .galix-how__steps:after{content:"";position:absolute;pointer-events:none;left:5%;right:5%;bottom:-21px;height:2px;border-radius:2px;background:#c9dbef;opacity:.18}body.template-index [data-how-motion] .galix-how__steps:after{opacity:1;background:var(--how-accent);box-shadow:0 0 12px #6d55d9;transform:scaleX(var(--how-progress));transform-origin:left center}body.template-index [data-how-motion] [data-how-step]{position:relative;min-width:0;transform-origin:center bottom;transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .32s ease}body.template-index [data-how-motion] [data-how-step] img{transform-origin:center bottom;scale:1}body.template-index [data-how-motion] [data-how-step]>div{position:relative;z-index:2;background:#fafafa}body.template-index [data-how-motion] [data-how-step] span{transition:color .32s ease}body.template-index [data-how-motion] [data-how-step].is-lit{border-color:var(--how-accent)}body.template-index [data-how-motion] [data-how-step].is-lit span{color:var(--how-accent)}body.template-index [data-how-motion] .galix-how__glow{pointer-events:none;transform:translate3d(calc(-140px * var(--how-progress)),0,0);opacity:calc(.25 + var(--how-progress) * .4)}@media(min-width:990px){body.template-index .galix-how[data-how-motion]{grid-template-columns:minmax(280px,390px) minmax(0,1fr);padding-right:max(39px,calc((100vw - 1440px)/2 + 39px));align-items:center}body.template-index [data-how-motion] .galix-how__intro{padding-top:0}body.template-index [data-how-motion] .galix-how__intro h2{max-width:100%}body.template-index [data-how-motion] .galix-how__steps{position:absolute;inset:auto max(24px,calc((100% - 1440px)/2 + 39px)) auto auto;top:113.777px;width:909px;height:295.445px;grid-template-columns:repeat(3,291px)}body.template-index [data-how-motion] [data-how-step]{width:291px;height:295.445px;min-height:0}body.template-index [data-how-motion] [data-how-step] img{height:216px;aspect-ratio:auto}}@media(min-width:990px)and (max-width:1399px){body.template-index .galix-how[data-how-motion]{grid-template-columns:minmax(0,1fr);padding-right:40px}body.template-index [data-how-motion] .galix-how__steps{position:relative;inset:auto;width:min(100%,909px);height:auto;grid-template-columns:repeat(3,minmax(0,1fr))}body.template-index [data-how-motion] [data-how-step]{width:auto;height:auto;min-height:270px}body.template-index [data-how-motion] [data-how-step] img{height:auto;aspect-ratio:4 / 3}}@media(hover:hover)and (pointer:fine)and (prefers-reduced-motion:no-preference){body.template-index [data-how-motion] [data-how-step]{--how-card-tilt: -1.5deg;transition:transform .26s cubic-bezier(.22,1,.36,1),border-color .26s ease}body.template-index [data-how-motion] [data-how-step]:nth-child(2){--how-card-tilt: 0deg}body.template-index [data-how-motion] [data-how-step]:last-child{--how-card-tilt: 1.5deg}body.template-index [data-how-motion] [data-how-step] img{transition:scale .28s cubic-bezier(.22,1,.36,1)}body.template-index [data-how-motion] [data-how-step]:before,body.template-index [data-how-motion] [data-how-step]:after{content:"";position:absolute;z-index:1;pointer-events:none;opacity:0}body.template-index [data-how-motion] [data-how-step]:before{top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #c6b5ff99,inset 0 0 32px #9475ff40;transition:opacity .26s ease}body.template-index [data-how-motion] [data-how-step]:after{top:-20%;bottom:-20%;left:-60%;width:45%;background:linear-gradient(90deg,transparent,#ffffff30 48%,transparent);transform:translate(0) skew(-14deg);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .26s ease}body.template-index [data-how-motion] [data-how-step]:hover{transform:perspective(1000px) translateY(-8px) rotateX(2deg) rotateY(var(--how-card-tilt));border-color:#c6b5ff}body.template-index [data-how-motion] [data-how-step]:hover img{scale:1.045}body.template-index [data-how-motion] [data-how-step]:hover:before{opacity:1}body.template-index [data-how-motion] [data-how-step]:hover:after{opacity:1;transform:translate(390%) skew(-14deg)}}@media(max-width:989px){body.template-index [data-how-motion] .galix-how__steps{position:relative;inset:auto;width:100%;height:auto;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}}@media(max-width:600px){body.template-index [data-how-motion] .galix-how__intro h2{width:100%}body.template-index [data-how-motion] .galix-how__intro .galix-button{left:50%;transform:translate(-50%);max-width:calc(100% - 40px)}body.template-index [data-how-motion] .galix-how__steps{position:absolute;left:8px;top:204px;width:calc(100% - 16px);gap:7.44px}body.template-index [data-how-motion] [data-how-step]{width:auto}body.template-index [data-how-motion] .galix-how__steps:before,body.template-index [data-how-motion] .galix-how__steps:after{bottom:-12px}}@media(prefers-reduced-motion:reduce){body.template-index [data-how-motion] [data-how-step],body.template-index [data-how-motion] [data-how-step] img,body.template-index [data-how-motion] [data-how-step] span,body.template-index [data-how-motion] .galix-how__glow{transform:none!important;transition:none!important;animation:none!important}body.template-index [data-how-motion] .galix-how__steps:after{transform:none}}body.template-index .galix-how[data-how-motion]{height:auto;min-height:560px;grid-template-columns:minmax(0,330px) minmax(0,1fr);align-items:center;gap:44px;padding:72px max(40px,calc((100vw - 1440px)/2 + 64px));background:#191a24}body.template-index .galix-how[data-how-motion] .galix-how__glow,body.template-index .galix-how[data-how-motion] .galix-how__steps:before,body.template-index .galix-how[data-how-motion] .galix-how__steps:after,body.template-index .galix-how[data-how-motion] [data-how-step]:before,body.template-index .galix-how[data-how-motion] [data-how-step]:after{display:none}body.template-index .galix-how[data-how-motion] .galix-how__intro{padding:0}body.template-index .galix-how[data-how-motion] .galix-how__intro h2{width:auto;max-width:330px;margin:24px 0 28px}body.template-index .galix-how[data-how-motion] .galix-how__title-emphasis{display:block;color:#a7b5ff;font-weight:600}body.template-index .galix-how[data-how-motion] .galix-how__intro .galix-button{width:min(100%,279px);min-height:52px}body.template-index .galix-how[data-how-motion] .galix-how__steps{position:relative;inset:auto;display:grid;width:100%;height:auto;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:16px;overflow:visible}body.template-index .galix-how[data-how-motion] [data-how-step]{display:flex;width:auto;height:auto;min-height:344px;flex-direction:column;overflow:hidden;border:1px solid rgba(167,181,255,.48);border-radius:20px;background:#f8f8fc;color:#20235c;transform:none;transition:border-color .22s ease,transform .22s cubic-bezier(.23,1,.32,1)}body.template-index .galix-how[data-how-motion] [data-how-step].is-lit{border-color:#a7b5ffb3}body.template-index .galix-how[data-how-motion] [data-how-step] img{width:100%;height:205px;flex:0 0 205px;object-fit:cover;scale:1;transition:none}body.template-index .galix-how[data-how-motion] [data-how-step]>div{display:flex;min-height:138px;flex:1;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px 18px;background:#f8f8fc}body.template-index .galix-how[data-how-motion] [data-how-step] span{color:#6d55d9;font-family:Poppins,sans-serif;font-size:11px;font-weight:700;line-height:16px;letter-spacing:1.1px;text-transform:uppercase}body.template-index .galix-how[data-how-motion] [data-how-step] strong{color:#20235c;font-size:21px;line-height:24px}body.template-index .galix-how[data-how-motion] [data-how-step] p{margin-top:3px;color:#5e6782;font-size:12px;line-height:17px}@media(hover:hover)and (pointer:fine)and (prefers-reduced-motion:no-preference){body.template-index .galix-how[data-how-motion] [data-how-step]:hover{border-color:#a7b5ff;transform:translateY(-4px)}body.template-index .galix-how[data-how-motion] [data-how-step]:hover img{scale:1}}@media(max-width:1199px){body.template-index .galix-how[data-how-motion]{display:block;min-height:0;padding:64px 32px}body.template-index .galix-how[data-how-motion] .galix-how__intro h2{max-width:620px}body.template-index .galix-how[data-how-motion] .galix-how__steps{margin-top:34px}body.template-index .galix-how[data-how-motion] [data-how-step] img{height:auto;flex:none;aspect-ratio:4 / 3}}@media(max-width:700px){body.template-index .galix-how[data-how-motion]{padding:56px 20px 64px}body.template-index .galix-how[data-how-motion] .galix-how__intro{position:relative;text-align:left}body.template-index .galix-how[data-how-motion] .galix-how__intro h2{width:auto;max-width:100%;margin:18px 0 24px}body.template-index .galix-how[data-how-motion] .galix-how__intro .galix-button{position:static;width:100%;max-width:none;height:48px;min-height:48px;transform:none}body.template-index .galix-how[data-how-motion] .galix-how__steps{position:relative;inset:auto;width:100%;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:28px}body.template-index .galix-how[data-how-motion] [data-how-step]{display:flex;min-height:0;border-radius:16px}body.template-index .galix-how[data-how-motion] [data-how-step] img{width:100%;height:auto;aspect-ratio:16 / 9}body.template-index .galix-how[data-how-motion] [data-how-step]>div{min-height:0;padding:15px 16px 17px}body.template-index .galix-how[data-how-motion] [data-how-step] strong{font-size:18px;line-height:21px}body.template-index .galix-how[data-how-motion] [data-how-step] p{font-size:11px;line-height:15px}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/galix-how-motion.css.map */