Add shop

frontend/src/index.css

@@ -571,6 +571,125 @@ input:-webkit-autofill:active {
   @apply focus:outline-none focus:ring-2 focus:ring-neon-500 focus:ring-offset-2 focus:ring-offset-dark-900;
 }
 
+/* ========================================
+   Frame Animations (Shop cosmetics)
+   ======================================== */
+/* Fire pulse animation */
+@keyframes fire-pulse {
+  0%, 100% {
+    background-size: 200% 200%;
+    background-position: 0% 50%;
+    filter: brightness(1);
+  }
+  50% {
+    background-size: 220% 220%;
+    background-position: 100% 50%;
+    filter: brightness(1.2);
+  }
+}
+
+.animate-fire-pulse {
+  animation: fire-pulse 2s ease-in-out infinite;
+}
+
+/* Rainbow rotate animation */
+@keyframes rainbow-rotate {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-rainbow-rotate {
+  animation: rainbow-rotate 3s linear infinite;
+  background-size: 400% 400%;
+}
+
+/* Rainbow text color shift */
+@keyframes rainbow-shift {
+  0% { color: #FF0000; }
+  16% { color: #FF7F00; }
+  33% { color: #FFFF00; }
+  50% { color: #00FF00; }
+  66% { color: #0000FF; }
+  83% { color: #9400D3; }
+  100% { color: #FF0000; }
+}
+
+.animate-rainbow-shift {
+  animation: rainbow-shift 4s linear infinite;
+}
+
+/* Fire particles background animation */
+@keyframes fire-particles {
+  0%, 100% {
+    background-position: 0% 100%;
+  }
+  50% {
+    background-position: 100% 0%;
+  }
+}
+
+.animate-fire-particles {
+  animation: fire-particles 3s ease-in-out infinite;
+}
+
+/* Star twinkle animation */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.animate-twinkle {
+  animation: twinkle 2s ease-in-out infinite;
+}
+
+/* Stars background with multiple twinkling layers */
+.bg-stars-animated {
+  position: relative;
+  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #0d1b2a 100%);
+}
+
+.bg-stars-animated::before,
+.bg-stars-animated::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.bg-stars-animated::before {
+  background:
+    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
+    radial-gradient(2px 2px at 80px 60px, rgba(255,255,255,0.9), transparent),
+    radial-gradient(1px 1px at 130px 40px, #fff, transparent),
+    radial-gradient(2px 2px at 180px 90px, rgba(255,255,255,0.8), transparent),
+    radial-gradient(1px 1px at 50px 100px, #fff, transparent),
+    radial-gradient(1.5px 1.5px at 220px 20px, rgba(255,255,255,0.9), transparent);
+  background-size: 250px 150px;
+  animation: twinkle 3s ease-in-out infinite;
+}
+
+.bg-stars-animated::after {
+  background:
+    radial-gradient(1px 1px at 40px 20px, rgba(255,255,255,0.7), transparent),
+    radial-gradient(2px 2px at 100px 80px, #fff, transparent),
+    radial-gradient(1.5px 1.5px at 160px 30px, rgba(255,255,255,0.8), transparent),
+    radial-gradient(1px 1px at 200px 70px, #fff, transparent),
+    radial-gradient(2px 2px at 70px 110px, rgba(255,255,255,0.9), transparent);
+  background-size: 220px 140px;
+  animation: twinkle 4s ease-in-out infinite 1s;
+}
+
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   *,