<div class="loader-grid-container">
  
  <div class="loader-card">
    <span class="name-label">Cyberpunk</span>
    <div class="loader-cyberpunk"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Eco Nature</span>
    <div class="loader-eco"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Space Orbit</span>
    <div class="loader-space"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Cafe Barista</span>
    <div class="loader-cafe"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Science Atom</span>
    <div class="loader-science"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Fitness Power</span>
    <div class="loader-fitness"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Music Vinyl</span>
    <div class="loader-music"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Photo Aperture</span>
    <div class="loader-photo"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Crypto Node</span>
    <div class="loader-crypto"></div>
  </div>

  <div class="loader-card">
    <span class="name-label">Construction Gear</span>
    <div class="loader-gear"></div>
  </div>

</div>

/* Container & Responsive Grid Styles */
.loader-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  padding: 60px 20px;
  background-color: #0f172a; /* Deep slate background */
  min-height: 100vh;
  font-family: 'Inter', system-ui, sans-serif;
  box-sizing: border-box;
}

.loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 30px;
  background-color: #1e293b;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.loader-card:hover {
  transform: translateY(-5px);
}

.name-label {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 600;
}

/* 1. Cyberpunk Loader (Neon Glitch Square) */
.loader-cyberpunk {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 2px solid #ff00ff;
  box-shadow: 0 0 10px #ff00ff, inset 0 0 10px #ff00ff;
  animation: cyber-spin 1.5s linear infinite;
  position: relative;
}
.loader-cyberpunk::before {
  content: "";
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border: 2px solid #00ffff;
  box-shadow: 0 0 10px #00ffff;
  animation: cyber-spin 1s linear infinite reverse;
}
@keyframes cyber-spin {
  100% { transform: rotate(360deg); }
}

/* 2. Eco Nature Loader (Morphing Leaf) */
.loader-eco {
  width: 50px;
  height: 50px;
  background-color: #10b981;
  animation: eco-morph 2s ease-in-out infinite alternate;
}
@keyframes eco-morph {
  0% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: rotate(0deg); }
  100% { border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%; transform: rotate(180deg); background-color: #34d399;}
}

/* 3. Space Orbit Loader (Planet Ring) */
.loader-space {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed #64748b;
  position: relative;
  animation: space-spin 3s linear infinite;
}
.loader-space::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 15px; height: 15px;
  background-color: #eab308; /* Sun */
  border-radius: 50%;
  box-shadow: 0 0 15px #eab308;
}
.loader-space::after {
  content: "";
  position: absolute;
  top: -5px; left: 20px;
  width: 10px; height: 10px;
  background-color: #38bdf8; /* Planet */
  border-radius: 50%;
}
@keyframes space-spin {
  100% { transform: rotate(360deg); }
}

/* 4. Cafe Barista Loader (Coffee Swirl) */
.loader-cafe {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#d97706, #fcd34d, #78350f, #d97706);
  animation: cafe-swirl 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mask-image: radial-gradient(transparent 40%, black 41%);
  -webkit-mask-image: radial-gradient(transparent 40%, black 41%);
}
@keyframes cafe-swirl {
  100% { transform: rotate(360deg); }
}

/* 5. Science Atom Loader (Overlapping Ellipses) */
.loader-science, .loader-science::before, .loader-science::after {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #a855f7;
  border-bottom-color: #a855f7;
  position: absolute;
}
.loader-science {
  position: relative;
  animation: atom-spin 2s linear infinite;
}
.loader-science::before {
  content: "";
  transform: rotate(60deg);
  animation: atom-spin 2s linear infinite;
}
.loader-science::after {
  content: "";
  transform: rotate(120deg);
  animation: atom-spin 2s linear infinite;
}
@keyframes atom-spin {
  100% { transform: rotate(360deg); }
}

/* 6. Fitness Power Loader (Pendulum Block) */
.loader-fitness {
  width: 50px;
  height: 15px;
  background-color: #334155;
  border-radius: 8px;
  position: relative;
}
.loader-fitness::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 25px; height: 25px;
  background-color: #ef4444;
  border-radius: 50%;
  animation: fitness-slide 1s ease-in-out infinite alternate;
}
@keyframes fitness-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(25px); }
}

/* 7. Music Vinyl Loader (Record Spin) */
.loader-music {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e293b 20%, #000000 22%, #000000 30%, #111111 32%, #111111 40%, #000000 42%, #000000 50%, #111111 52%);
  border: 2px solid #334155;
  position: relative;
  animation: vinyl-spin 1.5s linear infinite;
}
.loader-music::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background-color: #f43f5e;
  border-radius: 50%;
  border: 2px solid #0f172a;
}
@keyframes vinyl-spin {
  100% { transform: rotate(360deg); }
}

/* 8. Photo Aperture Loader (Color Slices) */
.loader-photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#ef4444 0 60deg, #f97316 60deg 120deg, #eab308 120deg 180deg, #22c55e 180deg 240deg, #3b82f6 240deg 300deg, #a855f7 300deg 360deg);
  animation: aperture-spin 2s ease-in-out infinite;
  mask-image: radial-gradient(transparent 25%, black 26%);
  -webkit-mask-image: radial-gradient(transparent 25%, black 26%);
}
@keyframes aperture-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 9. Crypto Node Loader (Pulsing Hexagon) */
.loader-crypto {
  width: 50px;
  height: 50px;
  background-color: #f59e0b;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: crypto-pulse 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
@keyframes crypto-pulse {
  0% { transform: scale(0.7) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1) rotate(90deg); opacity: 1; }
  100% { transform: scale(0.7) rotate(180deg); opacity: 0.7; }
}

/* 10. Construction Gear Loader (Rotating Dashes) */
.loader-gear {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 6px dashed #94a3b8;
  position: relative;
  animation: gear-spin 4s linear infinite;
}
.loader-gear::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background-color: #cbd5e1;
  border-radius: 50%;
  border: 4px solid #1e293b;
}
@keyframes gear-spin {
  100% { transform: rotate(360deg); }
}

var difh = 850;