/* Velmora Animation Studio. Hidden/animated states exist only while JS marks an element (is-pending / is-run), so without JS everything is visible. */
:root{--vm-anim-ease:cubic-bezier(.22,1,.36,1)}
.vm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- entrance effects: start state ---------- */
.vm-animate.is-pending{opacity:0}
.vm-animate.is-pending.vm-anim-fade-up{transform:translate3d(0,34px,0)}
.vm-animate.is-pending.vm-anim-fade-down{transform:translate3d(0,-34px,0)}
.vm-animate.is-pending.vm-anim-fade-left{transform:translate3d(34px,0,0)}
.vm-animate.is-pending.vm-anim-fade-right{transform:translate3d(-34px,0,0)}
.vm-animate.is-pending.vm-anim-zoom-in{transform:scale(.92)}
.vm-animate.is-pending.vm-anim-zoom-out{transform:scale(1.08)}
.vm-animate.is-pending.vm-anim-slide-up{transform:translate3d(0,70px,0)}
.vm-animate.is-pending.vm-anim-slide-down{transform:translate3d(0,-70px,0)}
.vm-animate.is-pending.vm-anim-slide-left{transform:translate3d(70px,0,0)}
.vm-animate.is-pending.vm-anim-slide-right{transform:translate3d(-70px,0,0)}
.vm-animate.is-pending.vm-anim-blur-in{filter:blur(14px);transform:scale(.98)}
.vm-animate.is-pending.vm-anim-rotate-in{transform:rotate(-5deg) scale(.96)}
.vm-animate.is-pending.vm-anim-flip-x{transform:perspective(900px) rotateX(18deg)}
.vm-animate.is-pending.vm-anim-flip-y{transform:perspective(900px) rotateY(-18deg)}
.vm-animate.is-pending.vm-anim-skew-up{transform:translate3d(0,40px,0) skewY(4deg)}
.vm-animate.is-pending.vm-anim-pop{transform:scale(.8)}
/* RTL: horizontal effects mirror */
html[dir=rtl] .vm-animate.is-pending.vm-anim-fade-left{transform:translate3d(-34px,0,0)}
html[dir=rtl] .vm-animate.is-pending.vm-anim-fade-right{transform:translate3d(34px,0,0)}
html[dir=rtl] .vm-animate.is-pending.vm-anim-slide-left{transform:translate3d(-70px,0,0)}
html[dir=rtl] .vm-animate.is-pending.vm-anim-slide-right{transform:translate3d(70px,0,0)}
/* reveals use mask-size (not clip-path): IntersectionObserver treats a fully clip-path'd element as invisible and would never fire */
.vm-animate.is-pending.vm-anim-reveal-up,.vm-animate.is-run.vm-anim-reveal-up,.vm-animate.is-pending.vm-anim-reveal-down,.vm-animate.is-run.vm-anim-reveal-down,.vm-animate.is-pending.vm-anim-reveal-left,.vm-animate.is-run.vm-anim-reveal-left,.vm-animate.is-pending.vm-anim-reveal-right,.vm-animate.is-run.vm-anim-reveal-right{-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.vm-anim-reveal-up{-webkit-mask-position:0 100%;mask-position:0 100%}
.vm-anim-reveal-down{-webkit-mask-position:0 0;mask-position:0 0}
.vm-anim-reveal-left{-webkit-mask-position:0 0;mask-position:0 0}
.vm-anim-reveal-right{-webkit-mask-position:100% 0;mask-position:100% 0}
html[dir=rtl] .vm-anim-reveal-left{-webkit-mask-position:100% 0;mask-position:100% 0}
html[dir=rtl] .vm-anim-reveal-right{-webkit-mask-position:0 0;mask-position:0 0}
.vm-animate.is-pending.vm-anim-reveal-up{-webkit-mask-size:100% 0%;mask-size:100% 0%;transform:translate3d(0,22px,0)}
.vm-animate.is-pending.vm-anim-reveal-down{-webkit-mask-size:100% 0%;mask-size:100% 0%;transform:translate3d(0,-22px,0)}
.vm-animate.is-pending.vm-anim-reveal-left{-webkit-mask-size:0% 100%;mask-size:0% 100%;transform:translate3d(20px,0,0)}
.vm-animate.is-pending.vm-anim-reveal-right{-webkit-mask-size:0% 100%;mask-size:0% 100%;transform:translate3d(-20px,0,0)}
html[dir=rtl] .vm-animate.is-pending.vm-anim-reveal-left{transform:translate3d(-20px,0,0)}
html[dir=rtl] .vm-animate.is-pending.vm-anim-reveal-right{transform:translate3d(20px,0,0)}
.vm-animate.is-run.vm-anim-reveal-up,.vm-animate.is-run.vm-anim-reveal-down,.vm-animate.is-run.vm-anim-reveal-left,.vm-animate.is-run.vm-anim-reveal-right{-webkit-mask-size:100% 100%;mask-size:100% 100%}
/* run: the transition only exists during the reveal, so it never fights the element's own hover transitions */
.vm-animate.is-run{opacity:1;transform:none;filter:none;transition-property:opacity,transform,filter,mask-size,-webkit-mask-size;transition-duration:var(--vm-d,700ms);transition-delay:var(--vm-dl,0ms);transition-timing-function:var(--vm-anim-ease)}

/* ---------- text effects ---------- */
.vm-animated-text .vm-text-piece{display:inline-block;white-space:pre-wrap}
.vm-animated-text.is-pending .vm-text-piece{opacity:0;transform:translate3d(0,.6em,0);filter:blur(4px)}
.vm-text-letters.is-pending .vm-text-piece{filter:none;transform:translate3d(0,.5em,0)}
.vm-animated-text.is-run .vm-text-piece{opacity:1;transform:none;filter:none;transition:opacity var(--vm-d,700ms) var(--vm-anim-ease),transform var(--vm-d,700ms) var(--vm-anim-ease),filter var(--vm-d,700ms) var(--vm-anim-ease);transition-delay:var(--vm-pd,0ms)}
.vm-text-lines .vm-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.vm-text-lines .vm-line-in{display:block}
.vm-text-lines.is-pending .vm-line-in{transform:translate3d(0,115%,0)}
.vm-text-lines.is-run .vm-line-in{transform:none;transition:transform var(--vm-d,700ms) var(--vm-anim-ease);transition-delay:var(--vm-pd,0ms)}
.vm-type-rest{visibility:hidden}
.vm-text-type .vm-type-caret{display:inline-block;width:0;height:1em;position:relative;vertical-align:baseline}
.vm-text-type .vm-type-caret:after{content:"";position:absolute;inset-inline-start:0;bottom:-.12em;width:1px;height:1.1em;background:currentColor;animation:vm-caret .8s step-end infinite}
@keyframes vm-caret{50%{opacity:0}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .vm-text-gradient{background-image:linear-gradient(90deg,currentColor 0%,var(--demo-accent,#c0392b) 45%,currentColor 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:vm-grad 6s linear infinite}
}
@keyframes vm-grad{to{background-position:-220% 0}}
.vm-text-underline{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:100% .11em;padding-bottom:.08em}
html[dir=rtl] .vm-text-underline{background-position:100% 100%}
.vm-text-underline.is-pending{background-size:0 .11em}
.vm-text-underline.is-run{background-size:100% .11em;transition:background-size var(--vm-d,900ms) var(--vm-anim-ease);transition-delay:var(--vm-dl,0ms)}
.vm-counter{font-variant-numeric:tabular-nums}
.vm-rotator-word{display:inline-block;transition:opacity .35s ease,transform .35s ease}
.vm-rotator-word.is-out{opacity:0;transform:translate3d(0,.45em,0)}

/* ---------- marquee ---------- */
.vm-marquee{display:flex;overflow:hidden;--vm-marquee-speed:30s;--vm-marquee-gap:3rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vm-marquee-track{display:flex;flex:none;align-items:center;gap:var(--vm-marquee-gap);padding-inline-end:var(--vm-marquee-gap);animation:vm-marquee var(--vm-marquee-speed) linear infinite}
.vm-marquee.is-reverse .vm-marquee-track{animation-direction:reverse}
.vm-marquee-pause:hover .vm-marquee-track{animation-play-state:paused}
.vm-marquee-item{white-space:nowrap}
@keyframes vm-marquee{to{transform:translate3d(-100%,0,0)}}
html[dir=rtl] .vm-marquee-track{animation-name:vm-marquee-rtl}
@keyframes vm-marquee-rtl{to{transform:translate3d(100%,0,0)}}

/* ---------- image effects (work on any block or wrapper that contains an img) ---------- */
.vm-animated-image,.vm-animate-shell{position:relative}
.vm-animated-image{margin:0}
.vm-animated-image img{display:block;width:100%;height:auto}
[class*="vm-img-hover-"] img{transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s ease,box-shadow .45s ease}
.vm-img-hover-lift:hover img{transform:translate3d(0,-8px,0)}
.vm-img-hover-zoom,.vm-img-hover-zoom-out,.vm-img-hover-kenburns,.vm-img-hover-parallax,.vm-img-hover-shine{overflow:hidden}
.vm-img-hover-zoom:hover img{transform:scale(1.06)}
.vm-img-hover-zoom-out img{transform:scale(1.1)}
.vm-img-hover-zoom-out:hover img{transform:scale(1)}
.vm-img-hover-tilt{perspective:900px}
.vm-img-hover-tilt:hover img{transform:rotateX(2deg) rotateY(-3deg) scale(1.02)}
.vm-img-hover-tilt3d{perspective:900px}
.vm-img-hover-tilt3d img{transform:rotateX(var(--vm-rx,0deg)) rotateY(var(--vm-ry,0deg));transition:transform .18s ease-out;will-change:transform}
.vm-img-hover-grayscale img{filter:grayscale(1)}
.vm-img-hover-grayscale:hover img{filter:grayscale(0)}
.vm-img-hover-soft-shadow:hover img{box-shadow:0 22px 55px rgba(0,0,0,.18)}
.vm-img-hover-float img{animation:vm-image-float 5s ease-in-out infinite}
.vm-img-hover-kenburns img{animation:vm-kenburns 18s ease-in-out infinite alternate}
.vm-img-hover-parallax img{transform:translate3d(0,var(--vm-py,0px),0) scale(1.18);transition:none;will-change:transform}
.vm-img-hover-shine{position:relative}
.vm-img-hover-shine:after{content:"";position:absolute;top:-25%;inset-inline-start:-75%;width:42%;height:150%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);pointer-events:none}
.vm-img-hover-shine:hover:after{animation:vm-image-shine .75s ease}
@keyframes vm-image-shine{to{inset-inline-start:140%}}
@keyframes vm-image-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@keyframes vm-kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-2%,0)}}

@media(prefers-reduced-motion:reduce){
 .vm-animate.is-pending,.vm-animated-text.is-pending .vm-text-piece,.vm-text-lines.is-pending .vm-line-in{opacity:1!important;transform:none!important;filter:none!important;-webkit-mask:none!important;mask:none!important}
 .vm-animate.is-run,.vm-animated-text.is-run .vm-text-piece,.vm-text-lines.is-run .vm-line-in,.vm-text-underline.is-run{transition:none!important}
 .vm-img-hover-float img,.vm-img-hover-kenburns img,.vm-img-hover-shine:hover:after,.vm-text-type .vm-type-caret:after,.vm-marquee-track,.vm-text-gradient{animation:none!important}
 .vm-img-hover-parallax img,.vm-img-hover-tilt3d img{transform:none!important}
 .vm-text-underline.is-pending{background-size:100% .11em!important}
}
