feat(ui): add rich coffee-themed decorative elements

- Add floating coffee cups and steam wisps
- Implement coffee drip separators between sections
- Add subtle coffee stain background accents
- Enhance buttons with icons and ripple effects
- Improve scroll progress bar visibility
- Add coffee grounds pattern to footer

styles.css

@@ -107,38 +107,149 @@ body {
     100% { transform: translate(0, 0) rotate(360deg); }
 }
 
-/* Steam Animation */
-.steam-container {
+/* ===== DECORATIVE ELEMENTS ===== */
+.drip-separator {
     position: absolute;
-    top: 40%; /* Adjust based on Hero layout */
-    left: 50%;
-    transform: translateX(-50%);
-    width: 200px;
-    height: 200px;
-    z-index: 0;
+    width: 100%;
+    left: 0;
+    line-height: 0;
+    z-index: 2;
+    overflow: hidden;
     pointer-events: none;
-    opacity: 0.3;
 }
 
-.steam-particle {
+.drip-separator svg {
+    display: block;
+    width: calc(100% + 1.3px);
+    height: 60px;
+}
+
+.drip-separator.bottom {
+    bottom: -1px;
+    transform: rotate(180deg);
+    color: var(--bg-body); /* Match the section below it */
+}
+
+/* Specific background match for where the drip lands */
+/* If the next section is section-alt, we need to match that */
+/* BUT here hero is followed by white/cream section, so bg-body is correct */
+
+/* Floating Cup Animation */
+.floating-cup {
     position: absolute;
-    width: 40px;
-    height: 40px;
-    background: radial-gradient(circle, var(--color-coffee-medium) 0%, transparent 70%);
-    border-radius: 50%;
-    opacity: 0;
-    filter: blur(8px);
-    animation: rise 4s infinite ease-in;
+    opacity: 0.04;
+    color: var(--color-coffee-dark);
+    animation: float-cup 18s infinite ease-in-out;
 }
 
-.steam-particle:nth-child(1) { left: 40%; animation-delay: 0s; }
-.steam-particle:nth-child(2) { left: 60%; animation-delay: 1.5s; width: 30px; height: 30px; }
-.steam-particle:nth-child(3) { left: 50%; animation-delay: 3s; width: 50px; height: 50px; }
+@media (prefers-color-scheme: dark) {
+    .floating-cup {
+        color: var(--color-cream);
+        opacity: 0.06;
+    }
+}
 
-@keyframes rise {
-    0% { transform: translateY(0) scale(1); opacity: 0; }
-    50% { opacity: 0.4; }
-    100% { transform: translateY(-100px) scale(2); opacity: 0; }
+.cup-1 { width: 120px; top: 25%; right: 10%; animation-delay: -2s; }
+
+@keyframes float-cup {
+    0% { transform: translate(0, 0) rotate(-5deg); }
+    50% { transform: translate(-20px, 30px) rotate(5deg); }
+    100% { transform: translate(0, 0) rotate(-5deg); }
+}
+
+/* Coffee Stains */
+.coffee-stain {
+    position: absolute;
+    background-repeat: no-repeat;
+    background-size: contain;
+    opacity: 0.06;
+    pointer-events: none;
+    z-index: 0;
+    /* Inline SVG for stain - ring shape */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236F4E37' d='M100,20 C145,20 180,55 180,100 C180,145 145,180 100,180 C55,180 20,145 20,100 C20,55 55,20 100,20 Z M100,35 C65,35 35,65 35,100 C35,135 65,165 100,165 C135,165 165,135 165,100 C165,65 135,35 100,35 Z'/%3E%3C/svg%3E");
+}
+
+.stain-2 {
+    width: 300px;
+    height: 300px;
+    top: -50px;
+    right: -50px;
+    transform: rotate(45deg);
+}
+
+/* Coffee Grounds Pattern */
+.coffee-grounds-pattern {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+    pointer-events: none;
+    background-image: radial-gradient(var(--color-coffee-medium) 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+
+/* Button Icon Styling */
+.btn-icon {
+    margin-right: 0.5rem;
+    vertical-align: text-bottom;
+    transition: transform 0.3s ease;
+}
+
+.btn-primary:hover .btn-icon {
+    transform: rotate(-10deg) scale(1.1);
+}
+
+/* Ripple/Steam Effect on Buttons (Pseudo-element) */
+.btn-primary::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
+    transform: scale(0);
+    transition: transform 0.6s ease-out;
+    opacity: 0;
+}
+
+/* Corner Accents */
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60px;
+    height: 60px;
+    background: radial-gradient(circle at top right, rgba(212, 165, 116, 0.2), transparent 70%);
+    border-radius: 0 16px 0 100%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.card:hover::before {
+    opacity: 1;
+}
+
+/* Scroll Progress Enhancement */
+.scroll-progress {
+    height: 6px; /* Slightly thicker */
+    background: linear-gradient(
+        to right,
+        var(--color-coffee-dark) 0%,
+        var(--color-gold) var(--scroll-progress, 0%),
+        transparent var(--scroll-progress, 0%)
+    );
+    box-shadow: 0 2px 10px rgba(212, 165, 116, 0.3);
+}
+
+.btn-primary:active::after {
+    transform: scale(1);
+    opacity: 1;
+    transition: 0s;
 }