style: Improve CSS formatting and animation adjustments

frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css

@@ -33,8 +33,12 @@ body {
   animation: spin 1s linear infinite;
 }
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* Open button styling */
@@ -65,24 +69,30 @@ body {
 .case-indicator {
   position: absolute;
   top: 50%;
-  left: 50%;
-  transform: translateY(-50%);
-  width: 6px;
+  left: 50%; /* Back to center - we'll adjust the animation instead */
+  transform: translate(-50%, -50%); /* Center precisely */
+  width: 4px;
   height: 100%;
-  background: #facc15;
-  box-shadow: 0 0 10px #facc15, 0 0 15px rgba(255, 255, 255, 0.5);
+  background: #ff0000; /* Bright red for debugging */
+  box-shadow:
+    0 0 10px #ff0000,
+    0 0 15px rgba(255, 0, 0, 0.5);
   z-index: 3;
-  animation: indicator-pulse 1.5s ease-in-out 3s infinite alternate;
+  animation: indicator-pulse 1.5s ease-in-out 10s infinite alternate;
 }
 
 @keyframes indicator-pulse {
   0% {
     opacity: 0.6;
-    box-shadow: 0 0 10px #facc15, 0 0 15px rgba(255, 255, 255, 0.3);
+    box-shadow:
+      0 0 10px #ff0000,
+      0 0 15px rgba(255, 0, 0, 0.3);
   }
   100% {
     opacity: 1;
-    box-shadow: 0 0 15px #facc15, 0 0 20px rgba(255, 255, 255, 0.7);
+    box-shadow:
+      0 0 15px #ff0000,
+      0 0 20px rgba(255, 0, 0, 0.7);
   }
 }
 
@@ -94,6 +104,9 @@ body {
   width: 100%;
   height: 150px; /* Fixed height for the horizontal row */
   overflow: hidden; /* Hide scrollbar */
+  display: flex;
+  justify-content: center; /* Center the items container */
+  align-items: center;
 }
 
 .case-items {
@@ -102,70 +115,123 @@ body {
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 5px;
+  padding: 5px 0px; /* Remove horizontal padding */
   height: 100%;
   width: 100%;
-  animation: slide-in 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  transform: translateX(120%); /* Initial position far to the right */
+  animation: slide-in 10s cubic-bezier(0.05, 0.82, 0.17, 1) forwards;
+  transform: translateX(3000%); /* Extremely far initial position for 200 items */
+  position: relative; /* Ensure positioning context */
 }
 
 @keyframes slide-in {
   0% {
-    transform: translateX(120%);
+    transform: translateX(2000%);
   }
   90% {
-    transform: translateX(-5%); /* Slight overshoot */
+    transform: translateX(-16%); /* Single overshoot for dramatic effect */
   }
   100% {
-    transform: translateX(0%); /* Final centered position */
+    transform: translateX(-8%); /* Centered position */
   }
 }
 
 .case-item {
   transition: all 0.2s ease;
   padding: 2px;
+  animation: item-flash 0.3s ease-out forwards;
+  animation-play-state: paused;
+}
+
+@keyframes item-flash {
+  0% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.8);
+  }
+  100% {
+    filter: brightness(1.2);
+  }
 }
 
 .case-item-inner {
   background: #232c43;
   border: 2px solid #2d3748;
   border-radius: 8px;
-  padding: 12px 8px;
+  padding: 10px 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100px;
+  width: 65px;
   height: 100%;
 }
 
 .case-item-won {
   z-index: 2;
-  animation: highlight-winner 0.5s ease-out 3s forwards;
+  animation: highlight-winner 1s ease-out 10s forwards;
 }
 
 .case-item-won .case-item-inner {
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
   background: linear-gradient(to right, #232c43, #2a3354, #232c43);
+  border: 3px solid #ff0000 !important; /* Bright red border for debugging */
+}
+
+/* Specific ID for the winning item to ensure it's visible */
+#winning-item {
+  z-index: 5; /* Higher than indicator */
 }
 
 @keyframes highlight-winner {
   0% {
     transform: scale(1);
+    filter: brightness(1);
+  }
+  10% {
+    transform: scale(1.3);
+    filter: brightness(2);
+  }
+  20% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
+  }
+  30% {
+    transform: scale(1.25);
+    filter: brightness(2);
+  }
+  40% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
   }
   50% {
-    transform: scale(1.15);
+    transform: scale(1.25);
+    filter: brightness(2);
   }
-  75% {
-    transform: scale(1.1);
+  60% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
+  }
+  70% {
+    transform: scale(1.25);
+    filter: brightness(2);
+  }
+  80% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
+  }
+  90% {
+    transform: scale(1.25);
+    filter: brightness(2);
   }
   100% {
-    transform: scale(1.05);
+    transform: scale(1.2);
+    filter: brightness(1.5);
   }
 }
 
 .amount {
-  font-size: 1.2rem;
+  font-size: 1rem;
   font-weight: bold;
   margin-bottom: 4px;
 }
@@ -173,4 +239,4 @@ body {
 .rarity {
   font-size: 0.75rem;
   opacity: 0.7;
-} 
+}