@charset "UTF-8";
.page-social-video .commerce-hero.commerce-hero-showcase{min-height:530px;padding:18px 0 38px}
.page-social-video .commerce-hero-showcase:before{inset:6% -7%;background:radial-gradient(ellipse at 50% 52%,#d7e4d1c7,transparent 71%)}
.social-video-visual{position:relative;width:min(100%,720px);height:510px;margin:auto;display:grid;place-items:center;isolation:isolate}
.social-video-orbit{position:absolute;z-index:-1;width:65%;aspect-ratio:1;border:1px solid #9ab1969e;border-radius:50%;box-shadow:0 0 0 40px #cdddc845,0 0 0 86px #cdddc82e;transform:rotate(-23deg)}
.social-video-side{position:absolute;top:49%;width:28%;aspect-ratio:.71;overflow:hidden;border:5px solid #fff;border-radius:18px;background:#203026;box-shadow:0 28px 46px -23px #14291aa8}
.social-video-side img,.social-video-screen-images img{display:block;width:100%;height:100%;object-fit:cover}
.social-video-side img{filter:saturate(.82)}
.social-video-side:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#071710b8)}
.social-video-side span{position:absolute;z-index:1;left:13px;bottom:15px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.13em}
.social-video-side-left{left:2%;transform:translateY(-48%) rotate(-9deg);animation:social-side-left 7s ease-in-out infinite alternate}
.social-video-side-right{right:2%;transform:translateY(-42%) rotate(9deg);animation:social-side-right 8s ease-in-out infinite alternate}
.social-video-phone{position:relative;z-index:3;width:38%;max-width:242px;aspect-ratio:.54;padding:7px;border:2px solid #222a25;border-radius:36px;background:#111813;box-shadow:0 34px 55px -22px #102416bb,0 0 0 5px #f0f3ec;transform:rotate(-2deg)}
.social-video-phone-button{position:absolute;right:-5px;top:26%;height:52px;width:3px;border-radius:3px;background:#4e594d}
.social-video-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:28px;background:#233122;color:#fff}
.social-video-notch{position:absolute;z-index:5;top:0;left:32%;width:36%;height:17px;border-radius:0 0 15px 15px;background:#101712}
.social-video-screen-images,.social-video-screen-images img{position:absolute;inset:0}
.social-video-screen-images img{opacity:0;animation:social-scene-cycle 15s ease-in-out infinite,social-scene-zoom 15s ease-in-out infinite}
.social-video-screen-images img:nth-child(2){animation-delay:-5s}.social-video-screen-images img:nth-child(3){animation-delay:-10s}
.social-video-screen-shade{position:absolute;inset:0;background:linear-gradient(#07110e91,#07110e4f 42%,#07110ecb 100%)}
.social-video-screen-top{position:absolute;left:16px;right:16px;top:25px;display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:8px;letter-spacing:.07em}.social-video-screen-top b{font-size:9px}.social-video-screen-top span{border:1px solid #ffffff91;border-radius:30px;padding:4px 6px}
.social-video-screen-copy{position:absolute;left:17px;right:17px;bottom:31px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-shadow:0 2px 12px #000b}
.social-video-screen-copy small{font-size:8px;letter-spacing:.13em;font-weight:800}.social-video-screen-copy strong{font-size:clamp(25px,2.6vw,38px);line-height:.98;letter-spacing:-.06em}.social-video-screen-copy>span{font-size:7px;font-weight:800;letter-spacing:.12em}
.social-video-screen-progress{position:absolute;bottom:15px;left:17px;right:17px;height:2px;background:#ffffff85}.social-video-screen-progress i{display:block;width:100%;height:100%;background:#d8f477;transform-origin:left;animation:social-progress 15s linear infinite}
.social-video-visual-note{position:absolute;left:3%;bottom:5px;color:#677e67;font-size:9px;font-weight:800;letter-spacing:.16em}
.social-video-gallery{background:#edf1e9}
.social-video-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.social-video-gallery-card{position:relative;min-width:0;aspect-ratio:.78;overflow:hidden;margin:0;border-radius:17px;background:#1c2c22;color:#fff}
.social-video-gallery-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.social-video-gallery-card:hover img{transform:scale(1.05)}
.social-video-gallery-card:after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,#071410d9)}
.social-video-gallery-card figcaption{position:absolute;z-index:1;left:26px;right:20px;bottom:25px;display:flex;flex-direction:column;gap:9px}
.social-video-gallery-card figcaption span{font-size:10px;font-weight:800;letter-spacing:.16em;color:#d8f477}
.social-video-gallery-card figcaption strong{font-size:clamp(24px,2.15vw,35px);line-height:1.1;letter-spacing:-.05em}
.social-video-gallery-card figcaption small{font-size:13px;color:#e2eae2;line-height:1.45}
.social-video-gallery-foot{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:25px;color:#687c69;font-size:12px;line-height:1.5}
.social-video-gallery-foot a{display:inline-flex;align-items:center;gap:18px;flex-shrink:0;padding-bottom:6px;border-bottom:1px solid #7a9277;color:#243528;text-decoration:none;font-weight:750}
.social-video-gallery-foot a:hover{color:#567b3a}
@keyframes social-scene-cycle{0%,26%{opacity:1}33%,94%{opacity:0}100%{opacity:1}}
@keyframes social-scene-zoom{0%{transform:scale(1)}33%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes social-progress{to{transform:scaleX(0)}}
@keyframes social-side-left{to{transform:translateY(-52%) rotate(-7deg)}}
@keyframes social-side-right{to{transform:translateY(-46%) rotate(7deg)}}
@media(max-width:1000px){.page-social-video .commerce-hero.commerce-hero-showcase{min-height:440px}.social-video-visual{height:420px}.social-video-phone{max-width:195px}.social-video-screen-copy strong{font-size:27px}.social-video-side span{font-size:7px}}
@media(max-width:900px){.social-video-gallery-grid{grid-auto-flow:column;grid-auto-columns:58vw;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin}.social-video-gallery-card{scroll-snap-align:start}.social-video-gallery-foot{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.page-social-video .commerce-hero.commerce-hero-showcase{min-height:450px;padding:8px 0 36px}.social-video-visual{height:420px;max-width:620px}.social-video-phone{width:36%;max-width:220px}.social-video-side{width:28%}}
@media(max-width:430px){.page-social-video .commerce-hero.commerce-hero-showcase{min-height:328px;padding:5px 0 30px}.social-video-visual{height:315px}.social-video-phone{width:40%;max-width:155px;padding:4px;border-radius:25px;box-shadow:0 25px 37px -20px #102416b8,0 0 0 3px #f0f3ec}.social-video-screen{border-radius:20px}.social-video-notch{height:10px}.social-video-side{width:30%;border-width:3px;border-radius:12px}.social-video-side span{font-size:5px;left:7px;bottom:8px}.social-video-screen-top{top:17px;left:8px;right:8px;font-size:5px}.social-video-screen-top b{font-size:6px}.social-video-screen-top span{padding:3px 4px}.social-video-screen-copy{left:9px;right:9px;bottom:21px;gap:5px}.social-video-screen-copy small,.social-video-screen-copy>span{font-size:5px}.social-video-screen-copy strong{font-size:20px}.social-video-screen-progress{left:9px;right:9px;bottom:10px}.social-video-visual-note{font-size:6px;bottom:0}.social-video-gallery-grid{grid-auto-columns:72vw;gap:12px}.social-video-gallery-card{border-radius:11px}.social-video-gallery-card figcaption{left:18px;right:14px;bottom:18px}.social-video-gallery-card figcaption small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.social-video-side,.social-video-screen-images img,.social-video-screen-progress i{animation:none}.social-video-screen-images img{opacity:0}.social-video-screen-images img:first-child{opacity:1}.social-video-gallery-card img{transition:none}}
