.marketecture-wrapper{& .section-header{padding-bottom:50px;& .splunk2-h2,& .title{padding-bottom:30px}
}
& #animation{display:grid;order:1;& #marketecture-anime,& .images-hotspots{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2}
}
& #marketecture-anime{display:grid;& video,& #lottie-animation,& #rive-animation{width:100%;aspect-ratio:var(--data-asset-aspect-ratio-desktop);grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2}
&.hideContent{animation:marketecture-hide 1s;animation-fill-mode:forwards}
}
& .text-boxes{order:2}
& .text-box:not(.default){position:relative;padding:35px 24px 0 24px;background-color:#F4F4F5;border-radius:16px;& .splunk2-h4{padding-bottom:24px}
& p{padding-bottom:42px}
& .text-box-bottom{border-top:1px solid #babcc4}
& .splunk-btn.sp-btn-borderless.multiline{padding-top:30px !important;padding-bottom:25px !important}
& .close-btn{position:absolute;top:8px;right:8px;& svg{width:24px;height:24px}
}
}
& .images-hotspots{position:relative}
& .state-image{width:100%;display:block;position:absolute;opacity:0;&.showing{opacity:1;animation:marketecture-show 1s;animation-fill-mode:forwards}
}
& .state-image.image-default{&.showing{opacity:1;animation:marketecture-show 1s;animation-fill-mode:forwards}
}
& .hotspot{position:absolute;z-index:10;opacity:0;border:0 solid blue;display:inline-block;width:40px;height:40px;&.showing{opacity:1;animation:marketecture-show 1s;animation-fill-mode:forwards}
&:before{content:" ";position:absolute;width:40px;height:40px;background:#fff;filter:blur(8px);z-index:11}
& .hotspot-link{position:absolute;width:24px;height:24px;display:inline-block;text-indent:-50000px;background:#ED0080;z-index:12;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:hotspot-pulse-static 1.8s cubic-bezier(0.215,0.61,0.355,1) infinite;&:before{content:" ";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
&:hover{width:32px;height:32px;animation:hotspot-pulse-hover 1.8s cubic-bezier(0.215,0.61,0.355,1) infinite}
&.active{width:32px;height:32px;animation:hotspot-pulse-selected 1.8s cubic-bezier(0.215,0.61,0.355,1) infinite}
}
}
& .text-box{position:absolute;display:none;opacity:0;&.default{opacity:1;display:block;padding-top:35px;&.showContent{display:block;animation:marketecture-show 1s;animation-fill-mode:forwards}
&.hideContent{animation:marketecture-hide 1s;animation-fill-mode:forwards}
}
&.showContent{display:block;animation:marketecture-show 1s;animation-fill-mode:forwards}
&.hideContent{animation:marketecture-hide 1s;animation-fill-mode:forwards}
}
}
@media(max-width:767px){.marketecture-wrapper{& #marketecture-anime{& video,& #lottie-animation,& #rive-animation{aspect-ratio:var(--data-asset-aspect-ratio-mobile)}
}
& .section-header{padding-bottom:0;& .splunk2-h2,& .title{padding-bottom:20px}
}
& #animation{order:2}
& .text-boxes{order:1;& .default{position:static}
}
& .text-box{opacity:0;&.default{padding-top:26px;padding-bottom:25px}
}
& .text-boxes,& #animation{position:relative;padding:0}
& .text-box.default{display:block !important;opacity:1 !important}
& .text-box:not(.default){aspect-ratio:var(--data-asset-aspect-ratio-mobile);position:absolute;z-index:15}
& .text-box-bottom{border-top:1px solid #babcc4;position:absolute;bottom:0;width:calc(100% - 50px)}
}
}
@keyframes marketecture-show{from{opacity:0}
to{opacity:1}
}
@keyframes marketecture-hide{from{opacity:1}
to{opacity:0}
}
@keyframes hotspot-pulse-static{0{width:24px;height:24px}
50%{width:28px;height:28px}
100%{width:24px;height:24px}
}
@keyframes hotspot-pulse-hover{0{width:32px;height:32px}
50%{width:32px;height:32px}
100%{width:32px;height:32px}
}
@keyframes hotspot-pulse-selected{0{width:32px;height:32px}
50%{width:32px;height:32px}
100%{width:32px;height:32px}
}