@property --vell-intro-wipe{syntax: "<percentage>"; inherits: false; initial-value: 0%;}vell-intro{--vell-intro-x: 0;--vell-intro-y: 0;--vell-intro-ease: cubic-bezier(.22, 1, .36, 1);display:grid;gap:22px}.vell-intro__stage{position:relative;display:grid;place-items:center;aspect-ratio:1 / 1.02;border-radius:var(--vell-radius-large, 28px);background:var(--vell-stone, #ece7dc);overflow:hidden}.vell-intro__product{position:relative;width:min(100%,720px);aspect-ratio:1;mix-blend-mode:multiply;opacity:0;transform:scale(1.045);transition:opacity 1s var(--vell-intro-ease),transform 2.2s var(--vell-intro-ease)}vell-intro[data-reached~=blank] .vell-intro__product{opacity:1;transform:translate3d(calc(var(--vell-intro-x) * -8px),calc(var(--vell-intro-y) * -6px),0)}vell-intro[data-reached~=done] .vell-intro__product{transition:transform .6s ease-out}.vell-intro__layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.vell-intro__layer--art{--vell-intro-wipe: 0%;opacity:0;-webkit-mask-image:linear-gradient(112deg,#000 calc(var(--vell-intro-wipe) - 26%),transparent var(--vell-intro-wipe));mask-image:linear-gradient(112deg,#000 calc(var(--vell-intro-wipe) - 26%),transparent var(--vell-intro-wipe));transition:opacity .7s ease-out,--vell-intro-wipe 1.5s cubic-bezier(.45,0,.2,1)}vell-intro[data-reached~=art] .vell-intro__layer--art{--vell-intro-wipe: 130%;opacity:1}.vell-intro__layer--complete{opacity:0;transition:opacity 1.2s ease-in-out}vell-intro[data-reached~=base] .vell-intro__layer--complete{opacity:1}.vell-intro__heart{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate3d(calc(var(--vell-intro-x) * -7px),calc(var(--vell-intro-y) * -4px),0);transition:transform .6s ease-out}.vell-intro__layer--heart{opacity:0;transform:translate3d(-7%,2.5%,0);transition:opacity .5s ease-out,transform 1s cubic-bezier(.3,1.25,.5,1)}vell-intro[data-reached~=heart] .vell-intro__layer--heart{opacity:1;transform:none}.vell-intro__shine{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-mask:var(--vell-intro-mask) center / 100% 100% no-repeat;mask:var(--vell-intro-mask) center / 100% 100% no-repeat;overflow:hidden;pointer-events:none}.vell-intro__shine:before{position:absolute;top:-10%;right:0;bottom:-10%;left:0;background:linear-gradient(108deg,transparent 40%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.5) 49.5%,rgba(255,255,255,.16) 53%,transparent 58%);content:"";opacity:0;transform:translate3d(-75%,0,0)}vell-intro[data-reached~=shine] .vell-intro__shine:before{animation:vell-intro-shine 1.5s cubic-bezier(.4,0,.2,1) both}@keyframes vell-intro-shine{0%{opacity:0;transform:translate3d(-75%,0,0)}18%,80%{opacity:1}to{opacity:0;transform:translate3d(75%,0,0)}}.vell-intro__replay{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#ffffffdb;color:var(--vell-ink, #0c0c0c);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s,transform .4s var(--vell-intro-ease);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.vell-intro__replay svg{width:16px;height:16px}vell-intro[data-reached~=done] .vell-intro__replay{opacity:1;pointer-events:auto}.vell-intro__copy{display:grid;align-content:center;gap:18px}.vell-intro__copy .vell-display{font-size:clamp(34px,9vw,68px)}.vell-intro__lines{display:grid;gap:2px;margin:0;padding:0;list-style:none}.vell-intro__line{font-family:var(--font-heading--family, "Helvetica Neue", Arial, sans-serif);font-size:clamp(22px,6vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.04em;text-transform:uppercase;opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s var(--vell-intro-ease),transform .9s var(--vell-intro-ease),color .6s}.vell-intro__line--final{color:var(--vell-accent, #8a163c)}vell-intro[data-reached~=art] .vell-intro__line--art,vell-intro[data-reached~=heart] .vell-intro__line--heart,vell-intro[data-reached~=base] .vell-intro__line--base,vell-intro[data-reached~=shine] .vell-intro__line--final{opacity:1;transform:none}vell-intro:not([data-reached~=shine]) .vell-intro__line:not(.vell-intro__line--final){color:#11111147}vell-intro[data-step=art] .vell-intro__line--art,vell-intro[data-step=heart] .vell-intro__line--heart,vell-intro[data-step=base] .vell-intro__line--base{color:inherit}.vell-intro__cta{justify-self:start;margin-top:6px;opacity:0;transition:opacity .8s .2s}vell-intro[data-reached~=done] .vell-intro__cta{opacity:1}vell-intro.is-resetting *,vell-intro.is-resetting *:before{animation:none!important;transition:none!important}@media(min-width:900px){vell-intro{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:stretch;gap:clamp(28px,4vw,64px)}.vell-intro__stage{order:2;aspect-ratio:auto;height:min(calc(100svh - 150px),720px);min-height:460px}.vell-intro__product{width:min(100%,min(100svh - 150px,720px))}}@media(prefers-reduced-motion:reduce){vell-intro *,vell-intro *:before{animation:none!important;transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/vell-intro.css.map */