.custom-animation{padding:50px 0;background-color:var(--background-color, #ffffff);position:relative;overflow:hidden;background-image:linear-gradient(to bottom,#f900c008,#fff0)}.custom-animation:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(249,0,192,.05) 0%,rgba(123,0,224,.04) 30%,transparent 70%);z-index:0;animation:pulse 18s infinite alternate ease-in-out}@keyframes pulse{0%{transform:scale(1);opacity:.5}50%{transform:scale(1.05);opacity:.7}to{transform:scale(1);opacity:.5}}.custom-animation__heading{text-align:center;margin-bottom:1.8rem;font-size:2.5rem;font-weight:800;color:#222;position:relative;letter-spacing:-.5px;padding-bottom:15px;font-family:Montserrat,Helvetica Neue,sans-serif;background:linear-gradient(90deg,#333,var(--gradient-start, #f900c0) 30%,var(--gradient-end, #7b00e0) 60%,#333 90%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 10px 25px rgba(123,0,224,.1);opacity:0;will-change:transform,opacity,background-position;transform:translateY(20px);animation:headerFadeInUp .8s cubic-bezier(.19,1,.22,1) forwards,headerFloat 6s ease-in-out infinite .8s,headerGradientFlow 8s linear infinite}@keyframes headerFadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes headerFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes headerGradientFlow{0%{background-position:0% center}to{background-position:200% center}}.custom-animation__heading:after{content:"";display:block;width:80px;height:5px;margin:15px auto 0;background:linear-gradient(90deg,var(--gradient-start, #f900c0),var(--gradient-end, #7b00e0));border-radius:5px;transform-origin:center;box-shadow:0 5px 15px #f900c04d;opacity:0;transform:scaleX(.5);will-change:transform,opacity,width,box-shadow;animation:underlineFadeIn 1s cubic-bezier(.19,1,.22,1) forwards .5s,underlineGlow 3s ease-in-out infinite alternate 1.5s}@keyframes underlineFadeIn{0%{opacity:0;transform:scaleX(.5)}to{opacity:1;transform:scaleX(1)}}@keyframes underlineGlow{0%{width:60px;box-shadow:0 5px 10px #f900c04d}to{width:120px;box-shadow:0 5px 20px #f900c080}}.custom-animation__heading:before{content:"";position:absolute;top:-30%;left:50%;transform:translate(-50%) scale(.8);width:200px;height:200px;background:radial-gradient(circle,rgba(249,0,192,.1) 0%,rgba(123,0,224,.08) 40%,transparent 70%);border-radius:50%;z-index:-1;opacity:0;animation:headingGlowFadeIn 1.5s ease-in-out forwards .2s,headingGlowPulse 5s infinite alternate ease-in-out 1.5s}@keyframes headingGlowFadeIn{0%{opacity:0;transform:translate(-50%) scale(.8)}to{opacity:.7;transform:translate(-50%) scale(1)}}@keyframes headingGlowPulse{0%{transform:translate(-50%) scale(.9);opacity:.5}to{transform:translate(-50%) scale(1.2);opacity:.8}}.custom-animation__subheading{text-align:center;margin-bottom:3.5rem;font-size:1.25rem;color:#555;max-width:700px;margin-left:auto;margin-right:auto;position:relative;font-weight:300;line-height:1.6}.custom-animation__container{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;max-width:1200px;margin:0 auto;position:relative}.animation-sample__item{background:#fff;border-radius:16px;box-shadow:0 10px 30px #0000000d;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;opacity:0;transform:translateY(20px);animation:fadeInUp .6s forwards;animation-delay:calc(var(--item-index, 0) * .15s + .3s);border:1px solid rgba(240,240,240,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.animation-sample__item:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px #7b00e026;border-bottom:3px solid var(--gradient-start, #f900c0)}.animation-sample__item:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--gradient-start, #f900c0),var(--gradient-end, #7b00e0));transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:10}.animation-sample__item:hover:before{transform:scaleX(1)}.animation-sample__item:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 0%,rgba(249,0,192,.04),transparent 70%);z-index:-1;opacity:0;transition:opacity .5s}.animation-sample__item:hover:after{opacity:1;animation:sparkle 2s infinite ease-in-out}@keyframes sparkle{0%,to{background-position:50% 0%}50%{background-position:51% 1%}}.animation-sample__content-wrapper{padding:0 0 20px;height:100%;display:flex;flex-direction:column}.animation-sample__thumbnail{position:relative;overflow:hidden;border-radius:12px 12px 0 0;aspect-ratio:9 / 16;background:#f5f5f5;cursor:pointer;transition:all .3s ease}.animation-sample__thumbnail:hover{background:#eaeaea}.animation-sample__image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;will-change:transform,filter}.animation-sample__thumbnail:hover .animation-sample__image{transform:scale(1.05);filter:brightness(.9)}.animation-sample__thumbnail-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0003;opacity:0;display:flex;justify-content:center;align-items:center;transition:opacity .3s ease,background .3s ease;z-index:2;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.animation-sample__thumbnail:hover .animation-sample__thumbnail-overlay{opacity:1;background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.animation-sample__thumbnail-overlay.playing{opacity:1;background:#00000040;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.animation-sample__play-overlay{width:60px;height:60px;background:#ffffffe6;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;transition:all .3s cubic-bezier(.19,1,.22,1);box-shadow:0 0 20px #0003;opacity:0;transform:scale(.9);will-change:transform,opacity,box-shadow;animation:buttonPop .4s forwards .5s,buttonGlow 3s infinite alternate 1s}@keyframes buttonPop{to{opacity:1;transform:scale(1)}}@keyframes buttonGlow{0%{box-shadow:0 0 20px #0003}to{box-shadow:0 0 30px #f900c066}}.animation-sample__thumbnail:hover .animation-sample__play-overlay{transform:scale(1.1);background:#fff;box-shadow:0 0 30px #f900c04d}.animation-sample__play-overlay:active{transform:scale(.95);box-shadow:0 0 15px #0000004d}.animation-sample__play-overlay i{color:var(--gradient-start, #f900c0);font-size:20px;transition:all .3s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.animation-sample__play-overlay .fa-play{opacity:1;transform:translate(-40%,-50%)}.animation-sample__play-overlay .fa-pause{opacity:0;transform:translate(-50%,-50%) scale(.8)}.animation-sample__play-overlay.paused .fa-play{opacity:0;transform:translate(-40%,-50%) scale(.8)}.animation-sample__play-overlay.paused .fa-pause{opacity:1;transform:translate(-50%,-50%) scale(1)}.animation-sample__thumbnail-overlay.playing .animation-sample__play-overlay{background:linear-gradient(135deg,var(--gradient-start, #f900c0),var(--gradient-end, #7b00e0));box-shadow:0 0 30px #7b00e066;animation:pulse-play 2s infinite ease-in-out}@keyframes pulse-play{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.animation-sample__effect{position:absolute;bottom:10px;left:50%;transform:translate(-50%) translateY(10px);width:80px;height:40px;display:flex;justify-content:space-between;align-items:center;opacity:0;transition:all .5s ease;z-index:3}.animation-sample__thumbnail:hover .animation-sample__effect{opacity:.7;transform:translate(-50%) translateY(0)}.animation-sample__thumbnail-overlay.playing .animation-sample__effect{opacity:1}.animation-dot{background:#fff;border-radius:50%;width:6px;height:6px;position:absolute;opacity:.8}.animation-dot.dot1{left:15%;animation:dot-pulse 1.5s infinite ease-in-out .2s}.animation-dot.dot2{left:38%;animation:dot-pulse 1.5s infinite ease-in-out .4s}.animation-dot.dot3{left:62%;animation:dot-pulse 1.5s infinite ease-in-out .6s}.animation-dot.dot4{left:85%;animation:dot-pulse 1.5s infinite ease-in-out .8s}@keyframes dot-pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.8);opacity:1}}.animation-ring{position:absolute;width:100%;height:100%;border:2px solid rgba(255,255,255,.3);border-radius:50%;transform:scale(0);opacity:0;left:0;top:0;animation:ring-pulse 3s infinite ease-out}@keyframes ring-pulse{0%{transform:scale(0);opacity:.8}to{transform:scale(2);opacity:0}}@keyframes pulse-animation{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.animation-sample__header{padding:20px 20px 10px;position:relative}.animation-sample__title{font-size:1.3rem;font-weight:700;color:#222;margin-bottom:10px;line-height:1.3;position:relative;transition:all .3s ease;padding-bottom:10px;background:linear-gradient(135deg,#333,var(--gradient-start, #f900c0));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 5px 15px rgba(123,0,224,.1);letter-spacing:-.5px;transform:translateZ(0)}.animation-sample__title:after{content:"";position:absolute;bottom:0;left:0;width:40px;height:3px;background:linear-gradient(90deg,var(--gradient-start, #f900c0),var(--gradient-end, #7b00e0));transition:width .3s ease,opacity .3s ease;opacity:.8;border-radius:3px;box-shadow:0 2px 8px #f900c04d}.animation-sample__item:hover .animation-sample__title:after{width:80px}.animation-sample__item:hover .animation-sample__title{color:var(--gradient-start, #f900c0);transform:translateY(-2px)}.animation-sample__description{font-size:.95rem;color:#666;line-height:1.6;margin-bottom:15px}.animation-sample__preview-container{margin:10px 20px;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 5px 15px #0000001a}.animation-sample__video-container{position:relative;width:100%;border-radius:12px;overflow:hidden;aspect-ratio:9 / 16}.animation-sample__preview{width:100%;height:100%;object-fit:cover;display:block}.animation-sample__video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000001a;cursor:pointer;transition:background .3s ease}.animation-sample__video-overlay:hover{background:#0003}.animation-sample__image-preview img{width:100%;border-radius:12px;transition:transform .3s ease;aspect-ratio:9 / 16;object-fit:cover}.animation-sample__image-preview:hover img{transform:scale(1.03)}.animation-sample__details{padding:15px 20px;background:#f8f8f8;margin:10px 20px 0;border-radius:12px;display:flex;flex-wrap:wrap;justify-content:space-between;font-size:.85rem;color:#666}.animation-sample__client,.animation-sample__project-type,.animation-sample__duration{margin-bottom:5px;flex:0 0 auto}.detail-label{font-weight:600;color:#444}.premium-glow-effect{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden;border-radius:16px}.premium-glow-effect .inner-glow{position:absolute;width:200%;height:200%;top:-50%;left:-50%;background:conic-gradient(transparent,rgba(249,0,192,.1),rgba(123,0,224,.1),transparent,transparent);animation:rotate-glow 10s linear infinite}@keyframes rotate-glow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animation-sample__item.now-playing{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 50px #7b00e033;animation:pulse-shadow 3s infinite alternate ease-in-out}@keyframes pulse-shadow{0%{box-shadow:0 20px 50px #7b00e033}to{box-shadow:0 20px 70px #f900c04d}}.animation-sample__item.now-playing .animation-sample__image{animation:subtle-zoom 5s infinite alternate ease-in-out}@keyframes subtle-zoom{0%{transform:scale(1)}to{transform:scale(1.05)}}.animation-sample__item{transition:all .5s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;perspective:1000px}.animation-sample__item:hover .animation-sample__thumbnail:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 70%,rgba(0,0,0,.3));z-index:1;opacity:.6;transition:opacity .3s ease}@media screen and (max-width: 1180px){.custom-animation__container{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width: 990px){.custom-animation__container{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 749px){.custom-animation__container{grid-template-columns:repeat(2,1fr);max-width:600px;gap:15px}.custom-animation{padding:40px 0}.custom-animation__heading{font-size:2.2rem;line-height:1.2}.custom-animation__heading:after{animation:headingUnderlineGlow 2s ease-in-out infinite alternate 1s}@keyframes headingUnderlineGlow{0%{width:60px;opacity:.8}to{width:100px;opacity:1}}.custom-animation__subheading{font-size:1.1rem;margin-bottom:2.5rem}.animation-sample__content-wrapper{padding:0 0 15px}.animation-sample__header{padding:15px 15px 5px}.animation-sample__preview-container{margin:10px 15px}.animation-sample__play-overlay{width:50px;height:50px}.animation-sample__play-overlay i{font-size:18px}.animation-sample__title{font-size:1.2rem;padding-bottom:8px;margin-bottom:8px;letter-spacing:-.3px}.animation-sample__title:after{height:2px;width:30px}.animation-sample__item:hover .animation-sample__title:after{width:60px}.animation-sample__description{font-size:.85rem;line-height:1.5;margin-bottom:10px}.animation-sample__details{padding:10px;margin:8px 12px 0;font-size:.8rem}}@media screen and (max-width: 580px){.custom-animation__container{grid-template-columns:1fr;max-width:350px}.animation-sample__thumbnail,.animation-sample__video-container{aspect-ratio:9 / 16}.custom-animation__heading{font-size:1.8rem;padding-bottom:10px}.animation-sample__details{flex-direction:column;padding:12px 15px}.animation-sample__client,.animation-sample__project-type,.animation-sample__duration{margin-bottom:5px}.animation-sample__description{font-size:.9rem}.animation-sample__play-overlay{opacity:.9!important;transform:scale(.9)!important}}.youtube-container{position:relative;overflow:hidden;width:100%;aspect-ratio:9 / 16}.animation-sample__youtube-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.animation-sample__youtube{position:absolute;top:0;left:0;width:100%;height:100%;border:0;z-index:1}.animation-sample__video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000001a;cursor:pointer;transition:background .3s ease;z-index:2}.animation-sample__item.now-playing .animation-sample__youtube-wrapper{z-index:3}.animation-sample__item.now-playing .animation-sample__video-overlay{opacity:0;pointer-events:none}.animation-sample__play-overlay:after{content:"\130zle";position:absolute;bottom:-25px;left:50%;transform:translate(-50%);color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease}.animation-sample__thumbnail:hover .animation-sample__play-overlay:after{opacity:1}.animation-sample__play-overlay.click-animation{animation:click-pulse .5s cubic-bezier(.19,1,.22,1)}@keyframes click-pulse{0%{transform:scale(1)}50%{transform:scale(.85)}to{transform:scale(1)}}.animation-sample__item{opacity:0;transform:translateY(20px);animation:fadeInUp .6s forwards;animation-delay:calc(var(--item-index, 0) * .15s + .3s)}.animation-sample__item.show-item{animation:showItem .8s cubic-bezier(.19,1,.22,1) forwards}@keyframes showItem{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animation-sample__title{position:relative;z-index:1}.animation-sample__title:before{content:"";position:absolute;top:-5px;left:-10px;width:calc(100% + 20px);height:calc(100% + 15px);background:linear-gradient(135deg,#f900c00d,#7b00e00d);border-radius:8px;z-index:-1;opacity:0;transform:scaleX(.9);transform-origin:left;transition:all .3s ease}.animation-sample__item:hover .animation-sample__title:before{opacity:1;transform:scaleX(1)}.animation-sample__item.now-playing .animation-sample__title{color:var(--gradient-start, #f900c0);text-shadow:0 5px 15px rgba(249,0,192,.2)}.animation-sample__item.now-playing .animation-sample__title:after{width:100%;opacity:1;box-shadow:0 2px 10px #f900c066}@media screen and (max-width: 580px){.animation-sample__title{font-size:1.1rem}.animation-sample__title:before{display:none}.animation-sample__item{box-shadow:0 5px 15px #0000000d}.animation-sample__item:hover{transform:translateY(-5px)}.custom-animation__container{gap:15px}}
/*# sourceMappingURL=/cdn/shop/t/1/assets/custom-animation.css.map */