@layer components{.c-swoop-mask{--swoop-background-color:#000;--swoop-icon-color:#fff;--swoop-icon-transform:scale(0);display:block}.c-swoop-mask.is-visible{--swoop-icon-transform:scale(1)}.c-swoop-mask__mask{transition:transform .6s ease}.c-swoop-mask__mask--left{transform:translateX(-100%)}.c-swoop-mask__mask--right{transform:translateX(100%)}.c-swoop-mask__mask--bottom{transform:translateY(100%)}.c-swoop-mask.is-visible .c-swoop-mask__mask{transform:translateX(0)}.c-swoop-mask__background{fill:var(--swoop-background-color)}.c-swoop-mask__icon-holder{transform:var(--swoop-icon-transform);transform-box:fill-box;transform-origin:center;transition:transform .5s ease;transition-delay:.2s}.c-swoop-mask__icon{--icon-color:var(--swoop-icon-color)}}