.spotlight{opacity:0;visibility:hidden;justify-content:center;align-items:center;width:100vw;height:100svh;transition:opacity .5s;display:flex;position:relative;overflow:hidden}.spotlight.is-initialized{opacity:1;visibility:visible}@media (max-width:768px){.pin-spacer{height:auto!important;max-height:300vh!important;padding-top:0!important;padding-bottom:0!important}.spotlight{height:100vh!important;min-height:100vh!important;top:0!important}}.spotlight-outline{border:1rem solid var(--base-500);z-index:2;border-radius:3rem;width:100%;height:100%;position:absolute;top:0;left:0}.spotlight-outline:after{content:"";border:1rem solid var(--base-500);z-index:1;width:100%;height:100%;position:absolute;top:-1rem;left:-1rem}.spotlight-inner{background-color:var(--base-450);border-radius:3rem;width:calc(100% - 2rem);height:calc(100% - 2rem);position:relative;overflow:hidden}.spotlight-intro-text-wrapper{gap:.5rem;width:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.spotlight-intro-text{will-change:transform;color:var(--base-300);flex:1;position:relative}.spotlight-intro-text p{font-size:2.5rem}.spotlight-intro-text:first-child{justify-content:flex-end;display:flex}.spotlight-video{will-change:transform;transform-origin:50%;border-radius:2rem;width:100%;height:100%;position:absolute;overflow:hidden;transform:scale(0)}.spotlight-video .demo-video{border:0;border-radius:2rem;width:100%;height:100%;display:block}.video-controls{opacity:0;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000b3;border-radius:3rem;gap:1rem;padding:.75rem 1.5rem;transition:opacity .3s;display:flex;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)}.video-controls.visible{opacity:1}.control-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:3rem;height:3rem;padding:.5rem;font-size:1.5rem;transition:all .2s;display:flex}.control-btn:hover{background:#fff3;transform:scale(1.1)}.control-btn:active{transform:scale(.95)}.spotlight-titles-container{clip-path:polygon(50svh 0,0 50%,50svh 100%,100% calc(100% + 100svh),100% -100svh);--before-opacity:0;--after-opacity:0;width:100%;height:100%;position:absolute;top:0;left:15vw;overflow:hidden}.spotlight-titles-container:before,.spotlight-titles-container:after{content:"";background:var(--base-100);pointer-events:none;z-index:10;width:100svh;height:2px;transition:opacity .3s;position:absolute}.spotlight-titles-container:before{opacity:var(--before-opacity);top:0;left:0;transform:rotate(-45deg)translate(-7rem)}.spotlight-titles-container:after{opacity:var(--after-opacity);bottom:0;left:0;transform:rotate(45deg)translate(-7rem)}.spotlight-titles{z-index:2;flex-direction:column;gap:5rem;width:75%;height:100%;display:flex;position:relative;left:15%;transform:translateY(100%)}.spotlight-titles h1{color:var(--base-100);opacity:.35;font-size:4rem;font-weight:500;line-height:1;transition:opacity .3s}.spotlight-images{z-index:1;pointer-events:none;width:50%;min-width:300px;height:100%;position:absolute;top:0;right:0}.spotlight-img{will-change:transform;border-radius:1rem;width:200px;height:150px;position:absolute;overflow:hidden}.spotlight-img img{object-fit:cover;width:100%;height:100%}.spotlight-header{color:var(--base-100);z-index:2;opacity:0;transition:opacity .3s;position:absolute;top:50%;left:10%;transform:translateY(-50%)}.spotlight-header p{color:var(--base-100);font-size:1.25rem;font-weight:500;line-height:1}@media (max-width:1000px){.spotlight-titles,.spotlight-titles-container:before,.spotlight-titles-container:after{display:none}.spotlight-images{right:-4rem}}