diff --git a/index.html b/index.html
index ca20e5e..09a0eca 100644
--- a/index.html
+++ b/index.html
@@ -227,6 +227,59 @@
}
}
+ .explosion {
+ position: fixed;
+ z-index: 2;
+ font-size: clamp(80px, 14vw, 140px);
+ line-height: 1;
+ pointer-events: none;
+ transform: translate(-50%, -50%) scale(0.2);
+ opacity: 1;
+ animation: explode 800ms ease-out forwards;
+ will-change: transform, opacity;
+ }
+
+ .explosion-particle {
+ position: fixed;
+ z-index: 2;
+ font-size: clamp(24px, 3.5vw, 36px);
+ line-height: 1;
+ pointer-events: none;
+ transform: translate(-50%, -50%);
+ opacity: 1;
+ animation: particle-fly 900ms ease-out forwards;
+ will-change: transform, opacity;
+ }
+
+ @keyframes explode {
+ 0% {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(0.2);
+ }
+
+ 40% {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(2);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translate(-50%, -50%) scale(2.5);
+ }
+ }
+
+ @keyframes particle-fly {
+ 0% {
+ opacity: 1;
+ transform: translate(-50%, -50%) translate(0, 0) scale(0.6);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.2);
+ }
+ }
+
@media (prefers-reduced-motion: reduce) {
.hero,
.train-emoji:hover {
@@ -234,10 +287,15 @@
transition: none;
}
- .steam {
+ .steam,
+ .explosion-particle {
display: none;
}
+ .explosion {
+ animation-duration: 500ms;
+ }
+
.train.ltr,
.train.rtl {
left: 50%;
@@ -289,6 +347,8 @@