/* From Uiverse.io by bociKond */ 
.spinner {
    width: 35.2px;
    height: 35.2px;
    --clr: rgb(0, 0, 0);
    --clr-alpha: rgba(0, 0, 0, 0.1);
    --neon-glow: rgba(0, 255, 255, 0.8);
    --neon-glow-intense: rgba(0, 255, 255, 1);
    --particle-color: #000000;
    animation: spinner 1.6s infinite ease;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .spinner > div {
    background-color: var(--clr-alpha);
    height: 100%;
    position: absolute;
    width: 100%;
    border: 2px solid var(--clr);
  }
  
  /* إضافة جزيئات مشعة تتحرك بشكل عشوائي داخل المكعب */
  .cube-container .inner-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    transform-style: preserve-3d;
    pointer-events: none;
  }
  
  /* تعريف حركة الجزيئات الرئيسية */
  @keyframes particle {
    0% {
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }
    20% {
      transform: translate(3px, -3px) scale(0.9);
      opacity: 1;
    }
    40% {
      transform: translate(6px, 3px) scale(0.8);
      opacity: 1;
    }
    60% {
      transform: translate(-3px, 6px) scale(0.7);
      opacity: 1;
    }
    80% {
      transform: translate(-6px, -3px) scale(0.6);
      opacity: 1;
    }
    100% {
      transform: translate(5px, 5px) scale(0.5);
      opacity: 0;
    }
  }
  
  .spinner div:nth-of-type(1) {
    transform: translateZ(-17.6px) rotateY(180deg);
  }
  
  .spinner div:nth-of-type(2) {
    transform: rotateY(-270deg) translateX(50%);
    transform-origin: top right;
  }
  
  .spinner div:nth-of-type(3) {
    transform: rotateY(270deg) translateX(-50%);
    transform-origin: center left;
  }
  
  .spinner div:nth-of-type(4) {
    transform: rotateX(90deg) translateY(-50%);
    transform-origin: top center;
  }
  
  .spinner div:nth-of-type(5) {
    transform: rotateX(-90deg) translateY(50%);
    transform-origin: bottom center;
  }
  
  .spinner div:nth-of-type(6) {
    transform: translateZ(17.6px);
  }
  
  @keyframes spinner {
    0% {
      transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
    }
  
    50% {
      transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
    }
  
    100% {
      transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
    }
  }

  /* إضافة تنسيقات جديدة لحاوية المكعب */
  .cube-container {
    perspective: 800px;
    width: 35.2px;
    height: 35.2px;
    position: absolute;
    transform-style: preserve-3d;
  }
  
  /* إضافة المزيد من الجزيئات بأحجام وسرعات مختلفة */
  .cube-container .particle1, 
  .cube-container .particle2, 
  .cube-container .particle3, 
  .cube-container .particle4, 
  .cube-container .particle5, 
  .cube-container .particle6,
  .cube-container .particle7,
  .cube-container .particle8,
  .cube-container .particle9,
  .cube-container .particle10,
  .cube-container .particle11,
  .cube-container .particle12,
  .cube-container .particle13,
  .cube-container .particle14,
  .cube-container .particle15,
  .cube-container .particle16,
  .cube-container .particle17,
  .cube-container .particle18,
  .cube-container .particle19,
  .cube-container .particle20,
  .cube-container .particle21,
  .cube-container .particle22,
  .cube-container .particle23,
  .cube-container .particle24,
  .cube-container .particle25,
  .cube-container .particle26,
  .cube-container .particle27,
  .cube-container .particle28,
  .cube-container .particle29,
  .cube-container .particle30 {
    content: '';
    position: absolute;
    background-color: #000000;
    border-radius: 50%;
    z-index: 25;
    box-shadow: 0 0 8px #000000;
  }
  
  /* الجزيئات الأصلية - تم تعديلها لتكون أكثر وضوحًا */
  .cube-container .particle1 {
    width: 4px;
    height: 4px;
    top: 15px;
    left: 20px;
    box-shadow: 0 0 8px #000000;
    animation: particle1 1.5s infinite ease-out;
  }
  
  .cube-container .particle2 {
    width: 3.5px;
    height: 3.5px;
    top: 18px;
    left: 12px;
    box-shadow: 0 0 8px #000000;
    animation: particle2 1.2s infinite ease-out 0.3s;
  }
  
  .cube-container .particle3 {
    width: 3px;
    height: 3px;
    top: 10px;
    left: 15px;
    box-shadow: 0 0 8px #000000;
    animation: particle3 1.4s infinite ease-out 0.7s;
  }
  
  .cube-container .particle4 {
    width: 3.5px;
    height: 3.5px;
    top: 15px;
    left: 8px;
    box-shadow: 0 0 8px #000000;
    animation: particle4 1.3s infinite ease-out 0.5s;
  }
  
  .cube-container .particle5 {
    width: 3px;
    height: 3px;
    top: 8px;
    left: 12px;
    box-shadow: 0 0 8px #000000;
    animation: particle5 1.1s infinite ease-out 0.2s;
  }
  
  .cube-container .particle6 {
    width: 4px;
    height: 4px;
    top: 20px;
    left: 18px;
    box-shadow: 0 0 8px #000000;
    animation: particle6 1.5s infinite ease-out 0.9s;
  }
  
  /* الجزيئات الإضافية - تم تعديلها لتكون أكثر وضوحًا وتتحرك بشكل عشوائي داخل المكعب */
  .cube-container .particle7 {
    width: 3.5px;
    height: 3.5px;
    top: 10px;
    left: 20px;
    box-shadow: 0 0 8px #000000;
    animation: particle7 1.3s infinite ease-out 0.1s;
  }
  
  .cube-container .particle8 {
    width: 3px;
    height: 3px;
    top: 20px;
    left: 15px;
    box-shadow: 0 0 8px #000000;
    animation: particle8 1.2s infinite ease-out 0.4s;
  }
  
  .cube-container .particle9 {
    width: 2.5px;
    height: 2.5px;
    top: 15px;
    left: 22px;
    box-shadow: 0 0 8px #000000;
    animation: particle9 1.4s infinite ease-out 0.6s;
  }
  
  .cube-container .particle10 {
    width: 3.5px;
    height: 3.5px;
    top: 22px;
    left: 18px;
    box-shadow: 0 0 8px #000000;
    animation: particle10 1.3s infinite ease-out 0.8s;
  }
  
  .cube-container .particle11 {
    width: 3px;
    height: 3px;
    top: 8px;
    left: 18px;
    box-shadow: 0 0 8px #000000;
    animation: particle11 1.1s infinite ease-out 0.25s;
  }
  
  .cube-container .particle12 {
    width: 4px;
    height: 4px;
    top: 17px;
    left: 8px;
    box-shadow: 0 0 8px #000000;
    animation: particle12 1.6s infinite ease-out 0.95s;
  }
  
  .cube-container .particle13 {
    width: 2.5px;
    height: 2.5px;
    top: 12px;
    left: 22px;
    box-shadow: 0 0 8px #000000;
    animation: particle13 1s infinite ease-out 0.15s;
  }
  
  .cube-container .particle14 {
    width: 3.5px;
    height: 3.5px;
    top: 22px;
    left: 15px;
    box-shadow: 0 0 8px #000000;
    animation: particle14 1.4s infinite ease-out 0.35s;
  }
  
  .cube-container .particle15 {
    width: 3px;
    height: 3px;
    top: 15px;
    left: 24px;
    box-shadow: 0 0 8px #000000;
    animation: particle15 1.2s infinite ease-out 0.55s;
  }
  
  .cube-container .particle16 {
    width: 2.5px;
    height: 2.5px;
    top: 24px;
    left: 15px;
    box-shadow: 0 0 8px #000000;
    animation: particle16 1.3s infinite ease-out 0.75s;
  }
  
  .cube-container .particle17 {
    width: 3.5px;
    height: 3.5px;
    top: 8px;
    left: 12px;
    box-shadow: 0 0 8px #000000;
    animation: particle17 1.1s infinite ease-out 0.05s;
  }
  
  .cube-container .particle18 {
    width: 3px;
    height: 3px;
    top: 20px;
    left: 10px;
    box-shadow: 0 0 8px #000000;
    animation: particle18 1.4s infinite ease-out 0.45s;
  }
  
  .cube-container .particle19 {
    width: 2.5px;
    height: 2.5px;
    top: 10px;
    left: 20px;
    box-shadow: 0 0 8px #000000;
    animation: particle19 1.2s infinite ease-out 0.65s;
  }
  
  .cube-container .particle20 {
    width: 3.5px;
    height: 3.5px;
    top: 22px;
    left: 20px;
    box-shadow: 0 0 8px #000000;
    animation: particle20 1.5s infinite ease-out 0.85s;
  }
  
  .cube-container .particle21 {
    width: 3px;
    height: 3px;
    top: 8px;
    left: 8px;
    box-shadow: 0 0 8px #000000;
    animation: particle21 1s infinite ease-out 0.12s;
  }
  
  .cube-container .particle22 {
    width: 2.5px;
    height: 2.5px;
    top: 22px;
    left: 22px;
    box-shadow: 0 0 8px #000000;
    animation: particle22 1.3s infinite ease-out 0.32s;
  }
  
  .cube-container .particle23 {
    width: 3.5px;
    height: 3.5px;
    top: 12px;
    left: 8px;
    box-shadow: 0 0 8px #000000;
    animation: particle23 1.2s infinite ease-out 0.52s;
  }
  
  .cube-container .particle24 {
    width: 3px;
    height: 3px;
    top: 8px;
    left: 18px;
    box-shadow: 0 0 8px #000000;
    animation: particle24 1.5s infinite ease-out 0.72s;
  }
  
  .cube-container .particle25 {
    width: 2.5px;
    height: 2.5px;
    top: 18px;
    left: 24px;
    box-shadow: 0 0 8px #000000;
    animation: particle25 1.1s infinite ease-out 0.92s;
  }
  
  .cube-container .particle26 {
    width: 3.5px;
    height: 3.5px;
    top: 24px;
    left: 12px;
    box-shadow: 0 0 8px #000000;
    animation: particle26 1.4s infinite ease-out 0.18s;
  }
  
  .cube-container .particle27 {
    width: 3px;
    height: 3px;
    top: 14px;
    left: 14px;
    box-shadow: 0 0 8px #000000;
    animation: particle27 1.1s infinite ease-out 0.38s;
  }
  
  .cube-container .particle28 {
    width: 2.5px;
    height: 2.5px;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 8px #000000;
    animation: particle28 1.4s infinite ease-out 0.58s;
  }
  
  .cube-container .particle29 {
    width: 3.5px;
    height: 3.5px;
    top: 16px;
    left: 16px;
    box-shadow: 0 0 8px #000000;
    animation: particle29 1.2s infinite ease-out 0.78s;
  }
  
  .cube-container .particle30 {
    width: 3px;
    height: 3px;
    top: 18px;
    left: 18px;
    box-shadow: 0 0 8px #000000;
    animation: particle30 1.3s infinite ease-out 0.98s;
  }
  
  /* حركات الجزيئات الأصلية - تم تعديلها لتكون أكثر وضوحًا */
  @keyframes particle1 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translate3d(-8px, 5px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle2 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(6px, 8px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle3 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(5px, -6px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle4 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translate3d(-5px, -8px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle5 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(8px, 3px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle6 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-4px, 8px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  /* حركات الجزيئات الإضافية - تم تعديلها لتكون أكثر وضوحًا */
  @keyframes particle7 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-9px, -4px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle8 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(8px, -5px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle9 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(5px, 9px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle10 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-6px, -6px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  @keyframes particle11 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(8px, -4px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle12 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translate3d(9px, 4px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle13 {
    0% {
      transform: translate3d(0, 0, 5px) scale(0.9);
      opacity: 1;
    }
    100% {
      transform: translate3d(-4px, 9px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle14 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-8px, -4px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  @keyframes particle15 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(6px, 6px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle16 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(5px, -9px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle17 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-5px, 5px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  @keyframes particle18 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(9px, -3px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle19 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-3px, 9px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle20 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translate3d(-9px, -3px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  @keyframes particle21 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(6px, 8px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle22 {
    0% {
      transform: translate3d(0, 0, 5px) scale(0.9);
      opacity: 1;
    }
    100% {
      transform: translate3d(4px, -8px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle23 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-8px, -5px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  @keyframes particle24 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(5px, 8px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle25 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-9px, 3px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle26 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translate3d(3px, -9px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  @keyframes particle27 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate3d(9px, 3px, -5px) scale(0.3);
      opacity: 0;
    }
  }
  
  @keyframes particle28 {
    0% {
      transform: translate3d(0, 0, 5px) scale(0.9);
      opacity: 1;
    }
    100% {
      transform: translate3d(-6px, -8px, -5px) scale(0.4);
      opacity: 0;
    }
  }
  
  @keyframes particle29 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(-4px, 8px, -5px) scale(0.2);
      opacity: 0;
    }
  }
  
  @keyframes particle30 {
    0% {
      transform: translate3d(0, 0, 5px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translate3d(8px, -4px, -5px) scale(0.3);
      opacity: 0;
    }
  }