.social-video{position:relative;display:block;overflow-x:clip;padding:6.4rem var(--page-padding) 9.6rem;color:rgb(var(--color-foreground));background:linear-gradient(180deg,rgb(var(--color-secondary-background)),rgba(var(--color-secondary-background),0) 2.88%)}.social-video__inner{display:flex;flex-direction:column;align-items:center;gap:6.4rem;width:100%;max-width:var(--page-width);margin:0 auto}.social-video__header,.social-video__heading-group{display:flex;flex-direction:column;align-items:center}.social-video__header{gap:1.6rem;text-align:center}.social-video__heading-group{gap:.8rem}.social-video__eyebrow{margin:0;font-family:var(--font-body-family);font-size:1.4rem;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}.social-video__heading{width:min(65rem,100%);font-size:clamp(4.8rem,5.28vw,7.6rem)}.social-video__description{width:min(39.8rem,100%);margin:0 auto;color:rgba(var(--color-foreground),.78);font-family:var(--font-body-family);font-size:var(--font-body-size);font-weight:500;line-height:1.5;text-align:center;text-wrap:balance}.social-video__stage{position:relative;isolation:isolate;width:min(84rem,100%);padding:0 0 16rem;perspective:120rem;perspective-origin:50% 45%}.social-video__background{position:absolute;z-index:1;top:14rem;left:50%;display:block;width:min(65.6rem,calc(100vw + 8rem));max-width:none;height:auto;mix-blend-mode:multiply;pointer-events:none;translate:-50% 0;rotate:-10.81deg;transform-origin:center;will-change:transform,opacity}.social-video__device{position:relative;z-index:2;width:min(33.6rem,calc(100vw - 4.8rem));margin:0 auto}.social-video__media{position:relative;aspect-ratio:var(--video-ratio, .5625);overflow:hidden;border-radius:3.75rem;background:rgba(var(--color-foreground),.04);box-shadow:5.3rem 18.4rem 3.8rem rgba(var(--color-foreground),.01),3rem 10.3rem 3.2rem rgba(var(--color-foreground),.05),1.3rem 4.6rem 2.4rem rgba(var(--color-foreground),.09),.3rem 1.1rem 1.3rem rgba(var(--color-foreground),.1);transform-style:flat;transform-origin:center;backface-visibility:hidden;will-change:transform}.social-video__video,.social-video__video video-element{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.social-video__media .media__play-button{--play-button-size: 6.8rem;--play-button-icon-size: 2.4rem}.social-video__expand{position:absolute;z-index:1;top:1.6rem;right:1.6rem;display:flex;align-items:center;justify-content:center;width:3.8rem;height:3.8rem;padding:0;border:0;border-radius:50%;color:rgb(var(--color-foreground));background:rgba(var(--color-background),.6);opacity:0;visibility:hidden;cursor:zoom-in;transition:opacity var(--animation-fast),visibility var(--animation-fast)}.social-video__media:has(video-element[loaded]) .social-video__expand{visibility:visible;opacity:1}@media(hover:hover){.social-video__media:has(video-element[loaded]) .social-video__expand{opacity:0}.social-video__media:has(video-element[loaded]):hover .social-video__expand,.social-video__expand:focus-visible{opacity:1}}.social-video__expand:focus-visible{outline:.2rem solid rgb(var(--color-keyboard-focus));outline-offset:.3rem}.social-video__callout{position:absolute;top:calc(100% - .9rem);left:calc(50% - .8rem);width:16rem;min-height:12rem;padding:0;border:0;color:rgb(var(--color-foreground));font-family:var(--font-body-family);font-size:1.6rem;font-weight:500;line-height:1;text-align:center;white-space:normal;background:transparent;cursor:pointer}.social-video__callout-text{display:block;text-transform:none}.social-video__callout-arrow{position:absolute;top:6.6rem;left:15rem;display:block;transition:transform var(--animation-fast)}.social-video__callout-arrow .icon-arrow-hand-drawn{width:3.44rem;height:11.88rem}.social-video__callout:hover .social-video__callout-arrow,.social-video__callout:focus-visible .social-video__callout-arrow{transform:translate3d(.3rem,.3rem,0)}.social-video__callout:focus-visible{outline:.2rem solid rgb(var(--color-keyboard-focus));outline-offset:.4rem}.social-video__lightbox .drawer__inner{display:flex;align-items:center;justify-content:center;width:auto;height:calc(100dvh - 6.4rem);aspect-ratio:var(--video-ratio, .5625);max-width:calc(100vw - 3.2rem);background:transparent;border-radius:2.4rem}.social-video__lightbox .drawer__body{position:relative;width:100%;height:100%;padding:0;overflow:hidden;border-radius:2.4rem}.social-video__lightbox .fixed-overlay{background-color:rgba(var(--color-foreground),.86)}.social-video__lightbox-close{z-index:2;top:1.6rem;right:1.6rem;background:rgba(var(--color-background),.88);color:rgb(var(--color-foreground))}@media(max-width:767.98px){.social-video{padding:4.8rem var(--page-padding) 6.4rem}.social-video__inner{gap:4.8rem}.social-video__eyebrow{font-size:1.2rem}.social-video__description{width:min(34rem,100%)}.social-video__stage{padding-bottom:23.2rem}.social-video__background{width:min(52rem,calc(100vw + 9rem))}.social-video__media{border-radius:3rem}.social-video__callout{left:calc(50% - 6.2rem);top:calc(100% + 4.4rem);font-size:1.4rem}}
/*# sourceMappingURL=/cdn/shop/t/42/assets/section-stjohnwa-social-video.css.map */