Develop

.github/workflows/fork-sync-trigger-develop.yml

@@ -44,6 +44,9 @@ jobs:
         with:
           node-version: '20'
 
+      - name: Clean npm cache
+        run: npm cache clean --force
+
       - name: Install Dependencies
         run: npm i --legacy-peer-deps
 

README.md

@@ -15,4 +15,4 @@ npm run dev
 ## Jest Testing
 ```bash
 npm run test
-```
+```

app/globals.css

@@ -609,6 +609,46 @@ button[role="checkbox"]:checked {
   } /* move right */
 }
 
+@keyframes tab-attention-jitter {
+  0%,
+  72%,
+  100% {
+    transform: translateX(0);
+  }
+  76% {
+    transform: translateX(4px);
+  }
+  82% {
+    transform: translateX(-3px);
+  }
+  88% {
+    transform: translateX(4px);
+  }
+  94% {
+    transform: translateX(-2px);
+  }
+}
+
+@keyframes tab-attention-dot-jitter {
+  0%,
+  72%,
+  100% {
+    transform: translateX(0) scale(1);
+  }
+  76% {
+    transform: translateX(4px) scale(1.16);
+  }
+  82% {
+    transform: translateX(-3px) scale(0.92);
+  }
+  88% {
+    transform: translateX(4px) scale(1.16);
+  }
+  94% {
+    transform: translateX(-2px) scale(0.96);
+  }
+}
+
 /* Mobile-specific utilities */
 @layer utilities {
   .pb-safe {
@@ -630,6 +670,14 @@ button[role="checkbox"]:checked {
   .webkit-overflow-scrolling-touch {
     -webkit-overflow-scrolling: touch;
   }
+
+  .tab-attention-jitter {
+    animation: tab-attention-jitter 1.8s ease-in-out infinite;
+  }
+
+  .tab-attention-dot-jitter {
+    animation: tab-attention-dot-jitter 1.8s ease-in-out infinite;
+  }
 }
 
 .input-wrap {
@@ -717,4 +765,239 @@ button[role="checkbox"]:checked {
   .shiny-text {
     animation: none;
   }
+
+  .tab-attention-jitter,
+  .tab-attention-dot-jitter {
+    animation: none;
+  }
+}
+
+/* ─── Super Listing Premium Styles ─── */
+
+@keyframes super-border-glow {
+  0%,
+  100% {
+    border-color: rgba(245, 158, 11, 0.5);
+  }
+  50% {
+    border-color: rgba(249, 115, 22, 0.7);
+  }
+}
+
+@keyframes super-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes float-zap {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 0.7;
+  }
+  50% {
+    transform: translateY(-3px) scale(1.1);
+    opacity: 1;
+  }
+}
+
+@keyframes float-zap-alt {
+  0%,
+  100% {
+    transform: translateY(0) scale(1) rotate(0deg);
+    opacity: 0.5;
+  }
+  33% {
+    transform: translateY(-4px) scale(1.15) rotate(8deg);
+    opacity: 0.9;
+  }
+  66% {
+    transform: translateY(-1px) scale(1.05) rotate(-5deg);
+    opacity: 0.7;
+  }
+}
+
+@keyframes super-cta-pulse {
+  0%,
+  100% {
+    box-shadow: 0 10px 18px rgba(249, 115, 22, 0.24);
+  }
+  50% {
+    box-shadow:
+      0 12px 28px rgba(249, 115, 22, 0.38),
+      0 0 12px rgba(251, 191, 36, 0.2);
+  }
+}
+
+@keyframes badge-shimmer {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Scrapbook sticker bobbing — three offset variants for organic feel */
+@keyframes sticker-bob {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg));
+  }
+  50% {
+    transform: translateY(-3px) rotate(calc(var(--r, 0deg) + 4deg));
+  }
+}
+
+@keyframes sticker-bob-delayed {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg));
+  }
+  40% {
+    transform: translateY(-2.5px) rotate(calc(var(--r, 0deg) - 3deg));
+  }
+  70% {
+    transform: translateY(-1px) rotate(calc(var(--r, 0deg) + 2deg));
+  }
+}
+
+@keyframes sticker-bob-slow {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg)) scale(1);
+  }
+  50% {
+    transform: translateY(-2px) rotate(calc(var(--r, 0deg) + 3deg)) scale(1.05);
+  }
+}
+
+.super-sticker {
+  filter: drop-shadow(0 3px 6px rgba(120, 53, 15, 0.25))
+    drop-shadow(0 0 2px rgba(245, 158, 11, 0.3));
+  animation: sticker-bob 3s ease-in-out infinite;
+}
+
+.super-sticker-delayed {
+  filter: drop-shadow(0 3px 6px rgba(120, 53, 15, 0.25))
+    drop-shadow(0 0 2px rgba(245, 158, 11, 0.3));
+  animation: sticker-bob-delayed 3.4s ease-in-out 0.6s infinite;
+}
+
+.super-sticker-slow {
+  filter: drop-shadow(0 3px 6px rgba(120, 53, 15, 0.25))
+    drop-shadow(0 0 2px rgba(245, 158, 11, 0.3));
+  animation: sticker-bob-slow 4s ease-in-out 1.1s infinite;
+}
+
+.super-card {
+  border: 1.5px solid rgba(245, 158, 11, 0.4);
+  animation: super-border-glow 3s ease-in-out infinite;
+}
+
+.super-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    rgba(251, 191, 36, 0.08) 45%,
+    rgba(251, 191, 36, 0.15) 50%,
+    rgba(251, 191, 36, 0.08) 55%,
+    transparent 60%
+  );
+  background-size: 200% 100%;
+  animation: super-shimmer 4s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.super-badge-shimmer {
+  background: linear-gradient(
+    110deg,
+    rgba(245, 158, 11, 0.08) 0%,
+    rgba(245, 158, 11, 0.08) 40%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(245, 158, 11, 0.08) 60%,
+    rgba(245, 158, 11, 0.08) 100%
+  );
+  background-size: 200% 100%;
+  animation: badge-shimmer 3s ease-in-out infinite;
+}
+
+.super-cta-glow {
+  animation: super-cta-pulse 2.5s ease-in-out infinite;
+}
+
+.super-zap {
+  animation: float-zap 2.5s ease-in-out infinite;
+}
+
+.super-zap-alt {
+  animation: float-zap-alt 3.2s ease-in-out infinite;
+}
+
+.super-zap-delayed {
+  animation: float-zap 2.5s ease-in-out 0.8s infinite;
+}
+
+.super-zap-delayed-alt {
+  animation: float-zap-alt 3.2s ease-in-out 1.2s infinite;
+}
+
+.super-challenge-card {
+  border: 1.5px solid rgba(245, 158, 11, 0.35);
+  animation: super-border-glow 3s ease-in-out infinite;
+  position: relative;
+  overflow: visible;
+}
+
+.super-challenge-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    rgba(251, 191, 36, 0.06) 45%,
+    rgba(251, 191, 36, 0.12) 50%,
+    rgba(251, 191, 36, 0.06) 55%,
+    transparent 60%
+  );
+  background-size: 200% 100%;
+  animation: super-shimmer 5s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.super-header-badge {
+  border: 1px solid rgba(245, 158, 11, 0.35);
+  box-shadow:
+    0 4px 12px rgba(245, 158, 11, 0.14),
+    0 0 0 1px rgba(245, 158, 11, 0.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .super-card,
+  .super-card::before,
+  .super-badge-shimmer,
+  .super-cta-glow,
+  .super-zap,
+  .super-zap-alt,
+  .super-zap-delayed,
+  .super-zap-delayed-alt,
+  .super-challenge-card::before {
+    animation: none;
+  }
+  .super-sticker,
+  .super-sticker-delayed,
+  .super-sticker-slow {
+    animation: none;
+  }
 }