/* Custom Cyberpunk & Neon Glow Styling for Mizuki Digital Store */

@layer utilities {
  .cyber-grid {
    background-size: 40px 40px;
    background-image: 
      linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 0, 127, 0.05) 1px, transparent 1px);
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Glassmorphism Card Hover Effects */
.product-card {
  background: rgba(18, 23, 38, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.15);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 10px 30px -10px rgba(0, 240, 255, 0.25), 0 0 15px rgba(255, 0, 127, 0.15);
}

/* Neon Glow Badge Pulsing */
@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 0, 127, 0.7);
  }
}

.neon-glow-badge {
  animation: neonPulse 3s infinite ease-in-out;
}

/* Custom Scrollbar for Drawer & Body */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0B0E17;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00F0FF;
}

/* Modal Open Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-anim-enter {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Holographic Cyberpunk Preloader Animations */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 10s linear infinite;
}

@keyframes logoPop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.cyber-logo-pop {
  animation: logoPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scanlineMove {
  0% { top: -40%; }
  100% { top: 140%; }
}

.cyber-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, rgba(0, 240, 255, 0.5), transparent);
  animation: scanlineMove 1.6s ease-in-out infinite;
  pointer-events: none;
}