@keyframes xtrim-float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
.xtrim-animate-float {
  animation: xtrim-float 3s ease-in-out infinite;
}

@keyframes xtrim-float-horizontal {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-15px);
  }
  100% {
    transform: translateX(0px);
  }
}
.xtrim-animate-float-horizontal {
  animation: xtrim-float-horizontal 3s ease-in-out infinite;
}

@keyframes xtrim-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}
.xtrim-animate-shake {
  animation: xtrim-shake 0.5s ease-in-out infinite;
}

@keyframes xtrim-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.xtrim-animate-pulse {
  animation: xtrim-pulse 2s ease-in-out infinite;
}

@keyframes xtrim-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.xtrim-animate-blink {
  animation: xtrim-blink 1.5s ease-in-out infinite;
}

@keyframes xtrim-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.xtrim-animate-spin {
  animation: xtrim-spin 2s linear infinite;
}

@keyframes xtrim-spin-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.xtrim-animate-spin-reverse {
  animation: xtrim-spin-reverse 2s linear infinite;
}

@keyframes xtrim-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.xtrim-animate-bounce {
  animation: xtrim-bounce 1s ease-in-out infinite;
}

@keyframes xtrim-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.xtrim-animate-fade-in {
  animation: xtrim-fade-in 1s ease forwards;
}

@keyframes xtrim-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.xtrim-animate-fade-out {
  animation: xtrim-fade-out 1s ease forwards;
}

@keyframes xtrim-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.xtrim-animate-slide-in-left {
  animation: xtrim-slide-in-left 0.6s ease-out forwards;
}

@keyframes xtrim-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.xtrim-animate-slide-in-right {
  animation: xtrim-slide-in-right 0.6s ease-out forwards;
}

@keyframes xtrim-slide-in-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.xtrim-animate-slide-in-up {
  animation: xtrim-slide-in-up 0.6s ease-out forwards;
}

@keyframes xtrim-slide-in-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.xtrim-animate-slide-in-down {
  animation: xtrim-slide-in-down 0.6s ease-out forwards;
}

@keyframes xtrim-zoom-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.xtrim-animate-zoom-in {
  animation: xtrim-zoom-in 0.5s ease-out forwards;
}

@keyframes xtrim-zoom-out {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.xtrim-animate-zoom-out {
  animation: xtrim-zoom-out 0.5s ease-out forwards;
}

@keyframes xtrim-swing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}
.xtrim-animate-swing {
  animation: xtrim-swing 0.8s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes xtrim-wobble {
  0%,
  100% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%);
  }
  30% {
    transform: translateX(20%);
  }
  45% {
    transform: translateX(-15%);
  }
  60% {
    transform: translateX(10%);
  }
  75% {
    transform: translateX(-5%);
  }
}
.xtrim-animate-wobble {
  animation: xtrim-wobble 1s ease-in-out infinite;
}

@keyframes xtrim-color-cycle {
  0% {
    color: #4361ee;
  }
  33% {
    color: #f12711;
  }
  66% {
    color: #10b981;
  }
  100% {
    color: #4361ee;
  }
}
.xtrim-animate-color-cycle {
  animation: xtrim-color-cycle 4s ease infinite;
}

@keyframes xtrim-glow {
  0% {
    box-shadow: 0 0 0px 0px rgba(67, 97, 238, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(67, 97, 238, 0.5);
  }
  100% {
    box-shadow: 0 0 0px 0px rgba(67, 97, 238, 0.3);
  }
}
.xtrim-animate-glow {
  animation: xtrim-glow 2s ease-in-out infinite;
}

.xtrim-animate-pause-on-hover:hover {
  animation-play-state: paused;
}

.xtrim-animate-fast {
  animation-duration: 0.5s !important;
}
.xtrim-animate-slow {
  animation-duration: 4s !important;
}
.xtrim-animate-delay-1 {
  animation-delay: 0.5s !important;
}
.xtrim-animate-delay-2 {
  animation-delay: 1s !important;
}
.xtrim-animate-once {
  animation-iteration-count: 1 !important;
}
.xtrim-animate-alternate {
  animation-direction: alternate !important;
}
.xtrim-animate-running {
  animation-play-state: running !important;
}
.xtrim-animate-paused {
  animation-play-state: paused !important;
}

.xtrim-gray img {
  filter: grayscale(100%);
  transition: filter 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.xtrim-gray img:hover {
  filter: grayscale(0%);
}

.xtrim-blure-40 {
  backdrop-filter: blur(6.9px) !important;
  -webkit-backdrop-filter: blur(6.9px) !important;
}

body:not(.dark-mode) {
  --xtrim-blur-bg: rgba(255, 255, 255, 0.4);
}

body.dark-mode {
  --xtrim-blur-bg: rgba(15, 23, 42, 0.5);
}

.xtrim-blur-10 {
  background-color: var(--xtrim-blur-bg);
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.xtrim-blur-20 {
  background-color: var(--xtrim-blur-bg);
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.xtrim-blur-30 {
  background-color: var(--xtrim-blur-bg);
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
}

/* binbibnbibnb */
body:not(.dark-mode) {
  --xtrim-lib-p1: rgba(67, 97, 238, 0.45);
  --xtrim-lib-p2: rgba(168, 85, 247, 0.4);
}

body.dark-mode {
  --xtrim-lib-p1: rgba(255, 255, 255, 0.5);
  --xtrim-lib-p2: rgba(99, 102, 241, 0.4);
}

@keyframes xtrim-lib-move-1 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-40px) translateX(20px);
    opacity: 0.9;
  }
}

@keyframes xtrim-lib-move-2 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(35px) translateX(-25px);
    opacity: 0.3;
  }
}

.xtrim-ambient {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.xtrim-ambient::before,
.xtrim-ambient::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: -1 !important;
  will-change: transform, opacity;
}

.xtrim-ambient-particles::before,
.xtrim-ambient-particles::after {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  filter: blur(0.5px) !important;
}

.xtrim-ambient-particles::before {
  top: 10%;
  left: 5%;
  background: var(--xtrim-lib-p1) !important;
  box-shadow:
    90px 60px 0 1px var(--xtrim-lib-p2),
    210px 140px 0 0px var(--xtrim-lib-p1),
    320px -20px 0 2px var(--xtrim-lib-p2),
    460px 90px 0 2.5px var(--xtrim-lib-p2),
    610px 220px 0 1px var(--xtrim-lib-p1),
    780px 50px 0 1.5px var(--xtrim-lib-p1);
  animation: xtrim-lib-move-1 15s ease-in-out infinite !important;
}

.xtrim-ambient-particles::after {
  bottom: 10%;
  right: 5%;
  background: var(--xtrim-lib-p2) !important;
  box-shadow:
    -80px -100px 0 2px var(--xtrim-lib-p1),
    -220px 50px 0 0px var(--xtrim-lib-p2),
    -410px 110px 0 1px var(--xtrim-lib-p2),
    -590px -70px 0 2px var(--xtrim-lib-p1),
    -740px 140px 0 1.5px var(--xtrim-lib-p2);
  animation: xtrim-lib-move-2 19s ease-in-out infinite !important;
}

/* Dust Particle Effect (اصلاح شده) */
.xtrim-particle-dust {
  position: relative;
  overflow: hidden !important;
  border-radius: 33px;
  isolation: isolate;
  background-color: transparent;
}
.xtrim-particle-dust::before,
.xtrim-particle-dust::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.xtrim-particle-dust::before {
  background-image: radial-gradient(
    circle at 20% 30%,
    rgba(255, 255, 200, 0.25) 1px,
    transparent 1px
  );
  background-size: 35px 35px;
  background-repeat: repeat;
  animation: dustDrift 25s linear infinite;
}
.xtrim-particle-dust::after {
  background-image: radial-gradient(
    circle at 80% 70%,
    rgba(220, 220, 240, 0.2) 1.2px,
    transparent 1.2px
  );
  background-size: 50px 50px;
  background-repeat: repeat;
  animation: dustDriftReverse 30s linear infinite;
}
@keyframes dustDrift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 350px 250px;
  }
}
@keyframes dustDriftReverse {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -300px -200px;
  }
}

/* Circle and Square Particles */
.xtrim-particle-csq {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: transparent;
}
.xtrim-particle-csq::before,
.xtrim-particle-csq::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.xtrim-particle-csq::before {
  background-image:
    radial-gradient(
      circle at 30% 50%,
      rgba(255, 99, 132, 0.25) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 70% 20%,
      rgba(54, 162, 235, 0.2) 2px,
      transparent 2px
    );
  background-size:
    70px 70px,
    100px 100px;
  background-repeat: no-repeat, repeat;
  background-position:
    10% 20%,
    0 0;
  animation: csqMove 16s infinite alternate;
}
.xtrim-particle-csq::after {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(75, 192, 192, 0.12) 0px,
    rgba(75, 192, 192, 0.12) 2px,
    transparent 2px,
    transparent 8px
  );
  background-size: 30px 30px;
  animation: csqMoveReverse 20s infinite alternate;
}
@keyframes csqMove {
  0% {
    background-position: 0% 0%;
    transform: scale(1);
  }
  100% {
    background-position: 100% 100%;
    transform: scale(1.05);
  }
}
@keyframes csqMoveReverse {
  0% {
    background-position: 0% 0%;
    transform: scale(1);
  }
  100% {
    background-position: -20% -20%;
    transform: scale(1.08);
  }
}