.sytk-animate {
  --sytk-distance: 24px;
  --sytk-scale-from: 0.94;
  --sytk-blur-from: 12px;
  --sytk-rotate-from: 2deg;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition-property: transform, opacity, filter, box-shadow;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
}

.sytk-animate.is-inview,
.sytk-animate.sytk-no-motion {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.sytk-fade-up { transform: translateY(var(--sytk-distance)); }
.sytk-fade-down { transform: translateY(calc(var(--sytk-distance) * -1)); }
.sytk-fade-left { transform: translateX(var(--sytk-distance)); }
.sytk-fade-right { transform: translateX(calc(var(--sytk-distance) * -1)); }
.sytk-scale-in { transform: scale(var(--sytk-scale-from)); }
.sytk-zoom-soft { transform: translateY(10px) scale(0.97); }
.sytk-blur-in { filter: blur(var(--sytk-blur-from)); transform: translateY(14px) scale(0.985); }
.sytk-rotate-in { transform: translateY(18px) rotate(var(--sytk-rotate-from)) scale(0.985); transform-origin: 50% 100%; }
.sytk-reveal-left { clip-path: inset(0 0 0 100%); opacity: 1; }
.sytk-reveal-right { clip-path: inset(0 100% 0 0); opacity: 1; }
.sytk-reveal-left.is-inview,
.sytk-reveal-right.is-inview,
.sytk-reveal-left.sytk-no-motion,
.sytk-reveal-right.sytk-no-motion { clip-path: inset(0 0 0 0); }

.sytk-hover-lift,
.sytk-hover-zoom,
.sytk-hover-overlay,
.sytk-hover-glow {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
}

.sytk-hover-lift:hover,
.sytk-hover-lift:focus-within { transform: translateY(-6px); }

.sytk-hover-zoom {
  overflow: hidden;
}
.sytk-hover-zoom > img,
.sytk-hover-zoom .uk-image,
.sytk-hover-zoom .el-image,
.sytk-hover-zoom .sytk-hover-zoom-target {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
}
.sytk-hover-zoom:hover > img,
.sytk-hover-zoom:focus-within > img,
.sytk-hover-zoom:hover .uk-image,
.sytk-hover-zoom:focus-within .uk-image,
.sytk-hover-zoom:hover .el-image,
.sytk-hover-zoom:focus-within .el-image,
.sytk-hover-zoom:hover .sytk-hover-zoom-target,
.sytk-hover-zoom:focus-within .sytk-hover-zoom-target {
  transform: scale(1.06);
}

.sytk-hover-overlay {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sytk-hover-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.48), rgba(10, 10, 10, 0.08));
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 0;
  pointer-events: none;
}
.sytk-hover-overlay:hover::after,
.sytk-hover-overlay:focus-within::after { opacity: 1; }
.sytk-hover-overlay > * { position: relative; z-index: 1; }

.sytk-hover-glow:hover,
.sytk-hover-glow:focus-within {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}

[data-sytk-stagger] > .sytk-animate { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .sytk-animate,
  .sytk-hover-lift,
  .sytk-hover-zoom,
  .sytk-hover-overlay,
  .sytk-hover-glow,
  .sytk-hover-zoom > img,
  .sytk-hover-zoom .uk-image,
  .sytk-hover-zoom .el-image,
  .sytk-hover-zoom .sytk-hover-zoom-target {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }

  .sytk-animate {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}