body {
  margin: 0;
  background: black;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(0, 0, 0), transparent 50%);
  z-index: -1;
}

canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.glitch-flip { font-size: 2.5rem; white-space: nowrap; }



nav a {
  position: relative;
  padding-bottom: 0.3rem;
  transition: color 0.3s ease;
  text-decoration: none;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0%;
  background-color: #22c55e; /* أخضر Tailwind color green-500 */
  transition: width 0.3s ease;
  border-radius: 2px;
}

nav a:hover::after {
  width: 100%;
}

nav a.active,
nav a.active::after {
  width: 100%;
  background-color: #22c55e;
}

nav a.active {
  color: #22c55e; /* يمكن تغيير لون النص للرابط النشط */
}
section#stats {
    background: #000500e8;
}


.animated-image {
      animation: ultraRealisticMotion 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
      transition: transform 0.3s;
      display: block;
      max-width: 100%;
      will-change: transform;
    }
@media (max-width: 768px) {
      .animated-image {
        display: none;
      }
    }
@keyframes ultraRealisticMotion {
      0% {
        transform: translateY(0px) rotate(0deg) scale(1);
      }
      10% {
        transform: translateY(-3px) rotate(-0.5deg) scale(1.02);
      }
      20% {
        transform: translateY(2px) rotate(0.4deg) scale(1.01);
      }
      30% {
        transform: translateY(-4px) rotate(-0.6deg) scale(1.025);
      }
      40% {
        transform: translateY(3px) rotate(0.3deg) scale(1.015);
      }
      50% {
        transform: translateY(-2px) rotate(-0.2deg) scale(1.02);
      }
      60% {
        transform: translateY(1px) rotate(0.2deg) scale(1.01);
      }
      70% {
        transform: translateY(-3px) rotate(-0.4deg) scale(1.02);
      }
      80% {
        transform: translateY(2px) rotate(0.3deg) scale(1.015);
      }
      90% {
        transform: translateY(-1px) rotate(-0.2deg) scale(1.01);
      }
      100% {
        transform: translateY(0px) rotate(0deg) scale(1);
      }
    }

/** glitch-card */
.product-card-ghost {
      position: relative;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.75);
      transition: all 0.3s ease;
      perspective: 1000px;
    }

    .product-card-ghost::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 0, 0.02) 0px,
        rgba(0, 255, 0, 0.05) 2px,
        transparent 3px,
        transparent 6px
      );
      animation: matrixFlow 8s linear infinite;
      z-index: 1;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .product-card-ghost > div {
      position: relative;
      z-index: 2;
      transition: transform 0.6s ease;
    }

    .product-card-ghost:hover > div {
      transform: scale(1.03) rotateX(5deg) rotateY(-5deg);
      box-shadow:
        0 0 10px #00ff00aa,
        inset 0 0 30px #00ff0033;
    }

    .product-card-ghost:hover h3 {
      color: #00ff00;
      text-shadow:
        0 0 4px #00ff00,
        0 0 8px #00ff00aa;
    }

    @keyframes matrixFlow {
      0% {
        transform: translateY(-10%) rotate(0deg);
      }
      100% {
        transform: translateY(10%) rotate(0deg);
      }
    }