refactor(tip): improve coffee tip presentation

src/app/tip/tip-screen.module.css

@@ -57,7 +57,6 @@
 .header,
 .hero,
 .productCard,
-.summaryCard,
 .statusMessage,
 .successCard,
 .checkoutSlot {
@@ -180,82 +179,48 @@
   display: grid;
   min-height: 172px;
   place-items: center;
+  overflow: hidden;
   border-radius: 30px;
   background:
-    radial-gradient(circle at 52% 36%, rgba(255, 197, 123, 0.32), transparent 28%),
+    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.82), transparent 34%),
     linear-gradient(145deg, #fff8ed, #ffe1cc);
   box-shadow: inset 0 0 0 1px rgba(126, 66, 57, 0.06);
+  isolation: isolate;
 }
 
-.cup {
-  position: relative;
-  width: 92px;
-  height: 76px;
-  margin-top: 28px;
-  border-radius: 0 0 30px 30px;
-  background: linear-gradient(145deg, #ffffff, #ffe8dd);
+.coffeeStage::before {
+  position: absolute;
+  width: clamp(112px, 30vw, 148px);
+  aspect-ratio: 1;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 198, 151, 0.3));
   box-shadow:
-    0 18px 30px rgba(108, 63, 56, 0.15),
-    inset -10px -12px 22px rgba(255, 137, 105, 0.12);
+    0 20px 42px rgba(174, 91, 60, 0.13),
+    inset 0 1px 0 rgba(255, 255, 255, 0.96);
+  content: "";
+  transform: rotate(-8deg);
 }
 
-.coffeeSurface {
+.coffeeStage::after {
   position: absolute;
-  top: -13px;
-  left: 8px;
-  width: 76px;
-  height: 28px;
-  border: 7px solid #fff8f3;
-  border-radius: 999px;
-  background: radial-gradient(circle at 35% 40%, #d4905d, #7f4b32 72%);
+  bottom: 24px;
+  width: clamp(72px, 18vw, 98px);
+  height: 15px;
+  border-radius: 50%;
+  background: rgba(111, 58, 44, 0.12);
+  content: "";
+  filter: blur(7px);
+  transform: scaleX(1.08);
 }
 
-.cupHandle {
-  position: absolute;
-  top: 18px;
-  right: -25px;
-  width: 34px;
-  height: 38px;
-  border: 8px solid #ffe8dd;
-  border-left: 0;
-  border-radius: 0 999px 999px 0;
-}
-
-.saucer {
-  position: absolute;
-  bottom: 34px;
-  width: 118px;
-  height: 20px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.74);
-  box-shadow: 0 12px 22px rgba(105, 59, 48, 0.12);
-}
-
-.steamOne,
-.steamTwo,
-.steamThree {
-  position: absolute;
-  top: 34px;
-  width: 10px;
-  height: 44px;
-  border-radius: 999px;
-  background: linear-gradient(180deg, rgba(255, 137, 128, 0), rgba(255, 137, 128, 0.42));
-  filter: blur(0.2px);
-  animation: steam 2.4s ease-in-out infinite;
-}
-
-.steamOne {
-  left: 48%;
-}
-
-.steamTwo {
-  left: 38%;
-  animation-delay: 0.28s;
-}
-
-.steamThree {
-  left: 58%;
-  animation-delay: 0.56s;
+.coffeeIcon {
+  z-index: 1;
+  width: clamp(82px, 22vw, 108px);
+  height: auto;
+  color: #7e4535;
+  filter: drop-shadow(0 12px 12px rgba(102, 53, 39, 0.18));
+  animation: coffeeFloat 3.2s ease-in-out infinite;
 }
 
 .productCopy {
@@ -291,7 +256,6 @@
   letter-spacing: -0.04em;
 }
 
-.summaryCard,
 .successCard {
   display: flex;
   align-items: center;
@@ -306,27 +270,12 @@
   backdrop-filter: blur(16px);
 }
 
-.summaryLabel,
-.summaryValue,
 .statusMessage,
 .successTitle,
 .successText {
   margin: 0;
 }
 
-.summaryLabel {
-  color: #a18181;
-  font-size: 12px;
-  font-weight: 780;
-}
-
-.summaryValue {
-  margin-top: 4px;
-  color: #2a1b1e;
-  font-size: clamp(14px, 3.519vw, 17px);
-  font-weight: 880;
-}
-
 .statusMessage {
   margin-top: 14px;
   color: #b2474f;
@@ -443,15 +392,19 @@
   }
 }
 
-@keyframes steam {
+@keyframes coffeeFloat {
   0%,
   100% {
-    opacity: 0.34;
-    transform: translateY(8px) scaleY(0.82);
+    transform: translateY(3px) rotate(-1deg);
   }
 
   50% {
-    opacity: 0.76;
-    transform: translateY(-8px) scaleY(1.08);
+    transform: translateY(-5px) rotate(1deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .coffeeIcon {
+    animation: none;
   }
 }