.cs{--csx-soft: 0;--csx-key-rest: .34;--csx-shade: .58;--csx-bg-x: -10px;--csx-bg-y: -7px;--csx-fg-x: -4px;--csx-fg-y: -3px;transition:--cs-light-x var(--cs-slow) var(--cs-ease-cine),--cs-spot-x var(--cs-slow) var(--cs-ease-cine),--cs-spot-r var(--cs-slow) var(--cs-ease-cine),--csx-soft var(--cs-slow) var(--cs-ease-cine)}.cs-stage__scene{transform:scale(1.03)}.csx-bg,.csx-fg{position:absolute;inset:0;transition:transform var(--cs-slow) var(--cs-ease)}.csx-bg{z-index:1;transform:translate3d(calc(var(--cs-px) * var(--csx-bg-x)),calc(var(--cs-py) * var(--csx-bg-y)),0)}.csx-fg{z-index:3;isolation:isolate;transform:translate3d(calc(var(--cs-px) * var(--csx-fg-x)),calc(var(--cs-py) * var(--csx-fg-y)),0)}.csx-plane{position:absolute;inset:0;display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.csx-plane--soft{z-index:2;opacity:var(--csx-soft);transition:opacity var(--cs-slow) var(--cs-ease-cine)}.csx-plane--people{z-index:1}.csx-key,.csx-shade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-mode:alpha;mask-mode:alpha;transition:opacity var(--cs-slow) var(--cs-ease-cine)}.csx-key{mix-blend-mode:screen}.csx-shade{z-index:3;mix-blend-mode:multiply;background-color:#6e807b}.csx-key--owner{background-image:radial-gradient(44% 58% at 21% 26%,#ffd49666,#ffbc702b 44%,#ffac5c00 78%)}.csx-key--barber{background-image:radial-gradient(46% 62% at 47% 22%,#ffd49666,#ffbc702b 46%,#ffac5c00 80%)}.csx-key--client{background-image:radial-gradient(42% 58% at 84% 24%,#ffd49666,#ffbc702b 44%,#ffac5c00 78%)}.csx-key--owner,.csx-shade--owner{-webkit-mask-image:url(/images/coming-soon/hf-key-owner.webp);mask-image:url(/images/coming-soon/hf-key-owner.webp)}.csx-key--barber,.csx-shade--barber{-webkit-mask-image:url(/images/coming-soon/hf-key-barber.webp);mask-image:url(/images/coming-soon/hf-key-barber.webp)}.csx-key--client,.csx-shade--client{-webkit-mask-image:url(/images/coming-soon/hf-key-client.webp);mask-image:url(/images/coming-soon/hf-key-client.webp)}@supports not ((-webkit-mask-image: url(/images/coming-soon/hf-key-owner.webp)) or (mask-image: url(/images/coming-soon/hf-key-owner.webp))){.csx-key,.csx-shade{display:none}}.cs-stage__light{display:none}.cs-stage__spot{z-index:4;background:#04100d9e;-webkit-mask-image:radial-gradient(78% 118% at 50% 44%,transparent 36%,#000 100%);mask-image:radial-gradient(78% 118% at 50% 44%,transparent 36%,#000 100%)}.cs[data-cs-stage=init] .cs-stage__spot,.cs[data-cs-stage=scene] .cs-stage__spot{opacity:.34}.cs[data-cs-stage=owner] .cs-stage__spot,.cs[data-cs-stage=barber] .cs-stage__spot,.cs[data-cs-stage=client] .cs-stage__spot{opacity:.72}.cs[data-cs-stage=together] .cs-stage__spot,.cs[data-cs-stage=cta] .cs-stage__spot,.cs[data-cs-stage=ambient] .cs-stage__spot{opacity:.4}.cs[data-cs-stage=init],.cs[data-cs-stage=scene]{--csx-soft: 0}.cs[data-cs-stage=owner],.cs[data-cs-stage=barber],.cs[data-cs-stage=client]{--csx-soft: .78}.cs[data-cs-stage=together]{--csx-soft: .24}.cs[data-cs-stage=cta],.cs[data-cs-stage=ambient]{--csx-soft: .2}.cs[data-cs-stage=owner] .csx-key--owner,.cs[data-cs-stage=barber] .csx-key--barber,.cs[data-cs-stage=client] .csx-key--client{opacity:1}.cs[data-cs-stage=owner] .csx-shade--barber,.cs[data-cs-stage=owner] .csx-shade--client,.cs[data-cs-stage=barber] .csx-shade--owner,.cs[data-cs-stage=barber] .csx-shade--client,.cs[data-cs-stage=client] .csx-shade--owner,.cs[data-cs-stage=client] .csx-shade--barber{opacity:var(--csx-shade)}.cs[data-cs-stage=together] .csx-key{opacity:.62}.cs[data-cs-stage=cta] .csx-key,.cs[data-cs-stage=ambient]:not([data-cs-role-active]) .csx-key{opacity:var(--csx-key-rest)}.cs[data-cs-stage=ambient]:not([data-cs-role-active]) .csx-key{animation:csx-breathe 7.2s ease-in-out infinite}@keyframes csx-breathe{0%,to{opacity:calc(var(--csx-key-rest) * .72)}50%{opacity:calc(var(--csx-key-rest) * 1.5)}}.cs[data-cs-role-active=owner] .csx-key--owner,.cs[data-cs-role-active=barber] .csx-key--barber,.cs[data-cs-role-active=client] .csx-key--client{opacity:1;animation:none}.cs[data-cs-role-active=owner] .csx-key:not(.csx-key--owner),.cs[data-cs-role-active=barber] .csx-key:not(.csx-key--barber),.cs[data-cs-role-active=client] .csx-key:not(.csx-key--client){opacity:0;animation:none}.cs[data-cs-role-active=owner] .csx-shade:not(.csx-shade--owner),.cs[data-cs-role-active=barber] .csx-shade:not(.csx-shade--barber),.cs[data-cs-role-active=client] .csx-shade:not(.csx-shade--client){opacity:var(--csx-shade)}.cs[data-cs-role-active]{--csx-soft: .74}@media(max-width:1100px){.csx-plane--soft,.csx-key,.csx-shade{display:none}.csx-bg,.csx-fg{transform:none}}@media(prefers-reduced-motion:reduce){.csx-bg,.csx-fg{transform:none!important}.cs-stage__scene{transform:scale(1.03)!important}.csx-plane--soft{opacity:.18!important}.csx-key{opacity:var(--csx-key-rest)!important;animation:none!important}.csx-shade{opacity:0!important}.cs-stage__spot{opacity:.4!important}}@media(forced-colors:active){.csx-key,.csx-shade,.csx-plane--soft{display:none}}
