From a44c75d2d47fbf32aee8f40044406dc49870db98 Mon Sep 17 00:00:00 2001
From: Alexander Heldt <me@alexanderheldt.se>
Date: Sat, 1 Aug 2026 18:28:40 +0000
Subject: [PATCH] Let the confetti fade at its peak instead of falling back

Drop the descent phase: each emoji now rises to its peak, slows (ease-out) and
fades out at the top rather than arcing back down. Removes the now-unused --endY.
---
 src/app.js    |  5 ++---
 src/style.css | 11 ++++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app.js b/src/app.js
index 6971e7e..5b0dc20 100644
--- a/src/app.js
+++ b/src/app.js
@@ -3213,14 +3213,13 @@
       const piece = document.createElement("span");
       piece.className = "confetti-piece";
       piece.textContent = emoji;
-      // Launch from a point across the bottom, shoot up to a random peak, drift
-      // sideways, then arc back down (endY is below the peak) while fading.
+      // Launch from a point across the bottom, shoot up to a random peak while
+      // drifting sideways, slowing and fading out as it reaches the top.
       const peakY = -Math.round(H * (0.45 + Math.random() * 0.45));
       piece.style.left = `${Math.round(W * (0.1 + Math.random() * 0.8))}px`;
       piece.style.top = `${H + 20}px`;
       piece.style.setProperty("--peakY", `${peakY}px`);
       piece.style.setProperty("--dx", `${Math.round((Math.random() * 2 - 1) * W * 0.22)}px`);
-      piece.style.setProperty("--endY", `${peakY + Math.round(H * 0.35)}px`);
       piece.style.setProperty("--rot", `${Math.round(Math.random() * 720 - 360)}deg`);
       piece.style.fontSize = `${Math.round(16 + Math.random() * 18)}px`;
       piece.style.animationDuration = `${Math.round(1100 + Math.random() * 700)}ms`;
diff --git a/src/style.css b/src/style.css
index bcb139a..2704d7c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1367,13 +1367,14 @@ section.collapsed > :not(h2) { display: none; }
      per-piece launch delay — no flash before it takes off. */
   animation-fill-mode: both;
 }
-/* Launch up from the bottom, rise to a peak (spreading sideways), then arc back
-   down while fading — a firework fountain. Distances come from JS custom props. */
+/* Launch up from the bottom, rise to a peak while spreading sideways, slowing
+   (ease-out) and fading out as it reaches the top — a firework fountain.
+   Distances come from JS custom props. */
 @keyframes potty-firework {
   0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
-  8%   { opacity: 1; }
-  60%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.7), calc(-50% + var(--peakY))) scale(1) rotate(calc(var(--rot) * 0.7)); }
-  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--endY))) scale(0.9) rotate(var(--rot)); }
+  10%  { opacity: 1; }
+  70%  { opacity: 1; }
+  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--peakY))) scale(1) rotate(var(--rot)); }
 }
 @media (prefers-reduced-motion: reduce) {
   .confetti-piece { display: none; }