/*!
 * KNO Animation v3.1.0 (https://kraineuolek.com/)
 * Copyright 2023-2025 by Oleksandr Khrashchevskyi
 * Licensed (https://kraineuolek.com/)
 */
:root {
  --kno-distance: 60px;
  --kno-scale-in: 0.1;
  --kno-scale-out: 1.8;
  --kno-blur: 10px;
  --kno-skew: 20deg;
  --kno-rotate: 360deg;
  --kno-stretch: 1.5;
}




/* KNO + Swiper compatibility fixes */
.kno-animation {
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Prevent layout shift during animation */
.swiper-slide {
  overflow: hidden;
}

/* Optional: ensure smoother transitions */
[kno-position] {
  display: block;
  transform-origin: center center;
}









/**** FADE & ZOOM ANIMATION ****/
[kno-position^="fade"],
[kno-position^="zoom"] {
  opacity: 0;
  transition-property: opacity, transform;
  will-change: opacity, transform;
}
[kno-position^="fade-"].kno-animation,
[kno-position^="zoom-"].kno-animation {
  transform: translateZ(0) scale(1);
  opacity: 1 !important;
}
/* Fade directions */
[kno-position="fade-up"]         { transform: translate3d(0, var(--kno-distance), 0); }
[kno-position="fade-down"]       { transform: translate3d(0, calc(-1 * var(--kno-distance)), 0); }
[kno-position="fade-left"]       { transform: translate3d(var(--kno-distance), 0, 0); }
[kno-position="fade-right"]      { transform: translate3d(calc(-1 * var(--kno-distance)), 0, 0); }
[kno-position="fade-left-up"]    { transform: translate3d(var(--kno-distance), var(--kno-distance), 0); }
[kno-position="fade-left-down"]  { transform: translate3d(var(--kno-distance), calc(-1 * var(--kno-distance)), 0); }
[kno-position="fade-right-up"]   { transform: translate3d(calc(-1 * var(--kno-distance)), var(--kno-distance), 0); }
[kno-position="fade-right-down"] { transform: translate3d(calc(-1 * var(--kno-distance)), calc(-1 * var(--kno-distance)), 0); }
/* Zoom directions */
[kno-position="zoom-in"]         { transform: scale(var(--kno-scale-in)); }
[kno-position="zoom-out"]        { transform: scale(var(--kno-scale-out)); }
[kno-position="zoom-in-up"]      { transform: translate3d(0, var(--kno-distance), 0) scale(var(--kno-scale-in)); }
[kno-position="zoom-in-down"]    { transform: translate3d(0, calc(-1 * var(--kno-distance)), 0) scale(var(--kno-scale-in)); }
[kno-position="zoom-in-left"]    { transform: translate3d(var(--kno-distance), 0, 0) scale(var(--kno-scale-in)); }
[kno-position="zoom-in-right"]   { transform: translate3d(calc(-1 * var(--kno-distance)), 0, 0) scale(var(--kno-scale-in)); }
[kno-position="zoom-out-up"]     { transform: translate3d(0, var(--kno-distance), 0) scale(var(--kno-scale-out)); }
[kno-position="zoom-out-down"]   { transform: translate3d(0, calc(-1 * var(--kno-distance)), 0) scale(var(--kno-scale-out)); }
[kno-position="zoom-out-left"]   { transform: translate3d(var(--kno-distance), 0, 0) scale(var(--kno-scale-out)); }
[kno-position="zoom-out-right"]  { transform: translate3d(calc(-1 * var(--kno-distance)), 0, 0) scale(var(--kno-scale-out)); }

/**** FLIP ANIMATION ****/
[kno-position^="flip"] {
  backface-visibility: hidden;
  transition-property: transform;
  will-change: transform;
}
[kno-position^="flip-"].kno-animation {
  transform: rotateY(0);
}
[kno-position="flip-right"] { transform: rotateY(90deg); }
[kno-position="flip-left"]  { transform: rotateY(-90deg); }
[kno-position="flip-up"]    { transform: rotateX(-90deg); }
[kno-position="flip-down"]  { transform: rotateX(90deg); }

/**** SPIN ANIMATION ****/
[kno-position^="spin"] {
  transform-origin: center;
  transition-property: transform;
  will-change: transform;
}
[kno-position^="spin-"].kno-animation {
  transform: rotate(0deg);
}
[kno-position="spin-right"]     { transform: rotate(var(--kno-rotate)); }
[kno-position="spin-left"]      { transform: rotate(calc(-1 * var(--kno-rotate))); }
[kno-position="spin-up"]        { transform: rotateX(-180deg); }
[kno-position="spin-down"]      { transform: rotateX(180deg); }
[kno-position="spin-diagonal"]  { transform: rotate(720deg); }

/**** SKEW ANIMATION ****/
[kno-position^="skew"] {
  transition-property: transform;
  will-change: transform;
}
[kno-position^="skew-"].kno-animation {
  transform: skew(0deg, 0deg);
}
[kno-position="skew-left"]      { transform: skewX(calc(-1 * var(--kno-skew))); }
[kno-position="skew-right"]     { transform: skewX(var(--kno-skew)); }
[kno-position="skew-up"]        { transform: skewY(calc(-1 * var(--kno-skew))); }
[kno-position="skew-down"]      { transform: skewY(var(--kno-skew)); }
[kno-position="skew-diagonal"]  { transform: skew(var(--kno-skew), var(--kno-skew)); }


/**** STRETCH ANIMATION ****/
[kno-position="stretch-x"] { transform: scaleX(var(--kno-stretch)); }
[kno-position="stretch-y"] { transform: scaleY(var(--kno-stretch)); }
[kno-position="shrink-x"]  { transform: scaleX(0.5); }
[kno-position="shrink-y"]  { transform: scaleY(0.5); }

/**** ROLL & HINGE ANIMATION ****/
[kno-position="roll-in-left"]  { transform: translateX(-100%) rotate(-120deg); }
[kno-position="roll-out-right"]{ transform: translateX(100%) rotate(120deg); }
[kno-position="hinge-top"]     { transform-origin: top left; transform: rotate(90deg); }
[kno-position="hinge-bottom"]  { transform-origin: bottom right; transform: rotate(-90deg); }






/**** EASING ****/
[kno-easing] {
  transition-timing-function: ease;
}

/* Standard CSS */
[kno-easing="ease"]           { transition-timing-function: ease; }
[kno-easing="linear"]         { transition-timing-function: linear; }
[kno-easing="ease-in"]        { transition-timing-function: ease-in; }
[kno-easing="ease-out"]       { transition-timing-function: ease-out; }
[kno-easing="ease-in-out"]    { transition-timing-function: ease-in-out; }

/* Step-based */
[kno-easing="step-start"]     { transition-timing-function: step-start; }
[kno-easing="step-end"]       { transition-timing-function: step-end; }
[kno-easing="steps-3"]        { transition-timing-function: steps(3, end); }
[kno-easing="steps-5"]        { transition-timing-function: steps(5, end); }
[kno-easing="steps-7"]        { transition-timing-function: steps(7, end); }

/* Bounce & Elastic */
[kno-easing="bounce"]         { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
[kno-easing="bounce-soft"]    { transition-timing-function: cubic-bezier(0.72, 1.03, 0.67, -0.24); }
[kno-easing="bounce-hard"]    { transition-timing-function: cubic-bezier(0.22, 1.36, 0.63, 0.66); }
[kno-easing="elastic"]        { transition-timing-function: cubic-bezier(0.36, 2.04, 0.66, 0.74); }
[kno-easing="elastic-soft"]   { transition-timing-function: cubic-bezier(0.68, -0.29, 0.22, 1.35); }
[kno-easing="elastic-hard"]   { transition-timing-function: cubic-bezier(0.7, -0.71, 0.58, 1.31); }

/* Animate.css inspired */
[kno-easing="back-in"]        { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
[kno-easing="back-out"]       { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
[kno-easing="back-in-out"]    { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Stylized / expressive */
[kno-easing="jelly"]          { transition-timing-function: cubic-bezier(0.55, 0.0, 0.15, 1.0); }
[kno-easing="wobble"]         { transition-timing-function: cubic-bezier(0.15, 0.7, 0.35, 1.0); }
[kno-easing="pop"]            { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
[kno-easing="spin"]           { transition-timing-function: cubic-bezier(0.54, -0.49, 0.27, 1.55); }
[kno-easing="flash"]          { transition-timing-function: steps(5, end); }
[kno-easing="blink"]          { transition-timing-function: steps(5, end); }
[kno-easing="pulse"]          { transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
[kno-easing="swing"]          { transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); }
[kno-easing="glide"]          { transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); }
[kno-easing="snap"]           { transition-timing-function: cubic-bezier(0.0, 1.0, 0.0, 1.0); }

/* Framer Motion inspired */
[kno-easing="anticipate"]     { transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
[kno-easing="overshoot"]      { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); }

/* Experimental / custom */
[kno-easing="zigzag-in"]      { transition-timing-function: cubic-bezier(0.175, 0.885, 0.885, 0.32); }
[kno-easing="zigzag-out"]     { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
[kno-easing="flip-in"]        { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
[kno-easing="flip-out"]       { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }