/* CreatuShop Studio runtime: responsive, motion, hover and 3D */
[data-cs-animation] {
    --cs-duration: 760ms;
    --cs-delay: 0ms;
    --cs-ease: cubic-bezier(.2,.8,.2,1);
}

.cs-effects-ready [data-cs-animation="fade"],
.cs-effects-ready [data-cs-animation="fade-up"],
.cs-effects-ready [data-cs-animation="fade-down"],
.cs-effects-ready [data-cs-animation="fade-left"],
.cs-effects-ready [data-cs-animation="fade-right"],
.cs-effects-ready [data-cs-animation="zoom-in"],
.cs-effects-ready [data-cs-animation="reveal"],
.cs-effects-ready [data-cs-animation="blur-in"],
.cs-effects-ready [data-cs-animation="flip-in"],
.cs-effects-ready [data-cs-animation="rotate-in"],
.cs-effects-ready [data-cs-animation="scale-in"],
.cs-effects-ready [data-cs-animation="bounce-in"] {
    opacity: 0;
    transition:
        opacity var(--cs-duration) ease var(--cs-delay),
        transform var(--cs-duration) var(--cs-ease) var(--cs-delay),
        filter var(--cs-duration) var(--cs-ease) var(--cs-delay),
        clip-path var(--cs-duration) var(--cs-ease) var(--cs-delay);
    will-change: opacity, transform;
}

.cs-effects-ready [data-cs-animation="fade-up"] { transform: translateY(38px); }
.cs-effects-ready [data-cs-animation="fade-down"] { transform: translateY(-38px); }
.cs-effects-ready [data-cs-animation="fade-left"] { transform: translateX(-45px); }
.cs-effects-ready [data-cs-animation="fade-right"] { transform: translateX(45px); }
.cs-effects-ready [data-cs-animation="zoom-in"],
.cs-effects-ready [data-cs-animation="scale-in"] { transform: scale(.88); }
.cs-effects-ready [data-cs-animation="reveal"] { clip-path: inset(0 100% 0 0); }
.cs-effects-ready [data-cs-animation="blur-in"] { filter: blur(18px); transform: scale(.96); }
.cs-effects-ready [data-cs-animation="flip-in"] { transform: perspective(900px) rotateY(-70deg); }
.cs-effects-ready [data-cs-animation="rotate-in"] { transform: rotate(-10deg) scale(.92); }
.cs-effects-ready [data-cs-animation="bounce-in"] { transform: scale(.7); }

.cs-effects-ready [data-cs-animation].cs-animation-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
}

[data-cs-animation="float"],
.cs-floating-product { animation: csFloat 4s ease-in-out infinite; }
[data-cs-animation="pulse"] { animation: csPulse 2s ease-in-out infinite; }
[data-cs-animation="bounce-in"].cs-animation-visible { animation: csBounceIn .72s var(--cs-ease) both; }

.cs-hover-lift,
.cs-hover-zoom,
.cs-effect-zoom,
.cs-hover-glow,
.cs-effect-glow,
.cs-hover-rotate,
.cs-hover-shine,
.cs-effect-shine,
.cs-border-animated,
.cs-magnetic,
.cs-3d-tilt,
.cs-3d-depth,
.cs-cursor-follow,
.cs-image-swap {
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        filter .35s ease,
        border-color .35s ease,
        opacity .35s ease;
    transform-origin: center;
}

.cs-hover-lift:hover { transform: translateY(-9px); box-shadow: 0 24px 55px rgba(15,23,42,.18); }
.cs-hover-zoom:hover,
.cs-effect-zoom:hover { transform: scale(1.055); }
.cs-hover-glow:hover,
.cs-effect-glow:hover { box-shadow: 0 0 0 1px rgba(37,99,235,.2), 0 22px 58px rgba(37,99,235,.3); filter: brightness(1.05) saturate(1.06); }
.cs-hover-rotate:hover { transform: rotate(var(--cs-motion-angle, 4deg)) scale(1.025); }

.cs-hover-shine,
.cs-effect-shine { position: relative; overflow: hidden; isolation: isolate; }
.cs-hover-shine::after,
.cs-effect-shine::after {
    position: absolute;
    top: -45%;
    left: -80%;
    z-index: 5;
    width: 46%;
    height: 190%;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),rgba(255,255,255,.82),rgba(255,255,255,.2),transparent);
    transform: skewX(-22deg);
    transition: left .85s cubic-bezier(.2,.7,.2,1);
}
.cs-hover-shine:hover::after,
.cs-effect-shine:hover::after { left: 145%; }

.cs-border-animated { position: relative; isolation: isolate; }
.cs-border-animated::before {
    position: absolute;
    inset: -2px;
    z-index: -1;
    content: "";
    border-radius: inherit;
    background: conic-gradient(from var(--cs-border-angle,0deg),#2563eb,#7c3aed,#ec4899,#2563eb);
    animation: csBorderSpin 3s linear infinite;
}

.cs-3d-tilt,
.cs-3d-depth,
.cs-cursor-follow {
    --cs-pointer-x: 0deg;
    --cs-pointer-y: 0deg;
    --cs-pointer-move-x: 0px;
    --cs-pointer-move-y: 0px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: perspective(var(--cs-perspective,1000px)) rotateX(var(--cs-pointer-x)) rotateY(var(--cs-pointer-y)) translate3d(var(--cs-pointer-move-x),var(--cs-pointer-move-y),0) scale(var(--cs-scale,1));
}
.cs-3d-tilt:hover { box-shadow: 0 28px 65px rgba(15,23,42,.2); }
.cs-3d-depth > * { transform: translateZ(var(--cs-depth,24px)); transform-style: preserve-3d; }
.cs-magnetic { --cs-magnetic-x: 0px; --cs-magnetic-y: 0px; transform: translate3d(var(--cs-magnetic-x),var(--cs-magnetic-y),0); }
.cs-parallax { --cs-parallax-y: 0px; transform: translate3d(0,var(--cs-parallax-y),0); will-change: transform; }

.cs-flip-card { position: relative; transform-style: preserve-3d; perspective: 1100px; }
.cs-flip-card > :first-child,
.cs-flip-card > :last-child { backface-visibility: hidden; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.cs-flip-card > :last-child { position: absolute; inset: 0; transform: rotateY(180deg); }
.cs-flip-card:hover > :first-child { transform: rotateY(180deg); }
.cs-flip-card:hover > :last-child { transform: rotateY(360deg); }

.cs-image-swap { overflow: hidden; }
.cs-image-swap img,
img.cs-image-swap { transition: opacity .24s ease, transform .35s ease; }

.cs-glass { background: rgba(255,255,255,.68) !important; border: 1px solid rgba(255,255,255,.6) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.cs-bg-mesh { background: radial-gradient(circle at 15% 15%,rgba(37,99,235,.24),transparent 32%), radial-gradient(circle at 85% 25%,rgba(236,72,153,.2),transparent 32%), radial-gradient(circle at 55% 90%,rgba(124,58,237,.22),transparent 35%), #f8fafc; }
.cs-spotlight { background-image: radial-gradient(circle at var(--cs-spot-x,50%) var(--cs-spot-y,50%),rgba(255,255,255,.38),transparent 32%); }

@media (min-width: 992px) { .cs-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .cs-hide-tablet { display: none !important; } }
@media (max-width: 767px) {
    .cs-hide-mobile { display: none !important; }
    [data-cs-disable-mobile="1"].cs-3d-tilt,
    [data-cs-disable-mobile="1"].cs-3d-depth,
    [data-cs-disable-mobile="1"].cs-parallax,
    [data-cs-disable-mobile="1"].cs-magnetic,
    [data-cs-disable-mobile="1"].cs-cursor-follow {
        transform: none !important;
        animation: none !important;
    }
}

@keyframes csFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes csPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes csBounceIn { 0%{opacity:0;transform:scale(.7)} 70%{opacity:1;transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
@property --cs-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes csBorderSpin { to { --cs-border-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    [data-cs-animation],
    .cs-hover-lift,.cs-hover-zoom,.cs-effect-zoom,.cs-hover-glow,.cs-effect-glow,.cs-hover-rotate,
    .cs-hover-shine,.cs-effect-shine,.cs-border-animated,.cs-magnetic,.cs-3d-tilt,.cs-3d-depth,
    .cs-cursor-follow,.cs-parallax,.cs-floating-product,.cs-image-swap {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}