diff --git a/assets/css/style.css b/assets/css/style.css index a11a990..1bf04c9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1559,43 +1559,46 @@ a { background: #fffdf5; color: #e0b400; z-index: 2; + box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35); } @media (prefers-reduced-motion: no-preference) { .merged-storyline .story-node::before { - animation: timeline-diamond-enter 0.55s ease-out backwards; + animation: + timeline-diamond-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards, + timeline-diamond-glow 2.1s ease-in-out 0.65s infinite; } .merged-storyline .story-node:nth-of-type(1)::before { - animation-delay: 0.06s; + animation-delay: 0.05s, 0.7s; } .merged-storyline .story-node:nth-of-type(2)::before { - animation-delay: 0.14s; + animation-delay: 0.12s, 0.9s; } .merged-storyline .story-node:nth-of-type(3)::before { - animation-delay: 0.22s; + animation-delay: 0.19s, 1.1s; } .merged-storyline .story-node:nth-of-type(4)::before { - animation-delay: 0.3s; + animation-delay: 0.26s, 1.3s; } .merged-storyline .story-node:nth-of-type(5)::before { - animation-delay: 0.38s; + animation-delay: 0.33s, 1.5s; } .merged-storyline .story-node:nth-of-type(6)::before { - animation-delay: 0.46s; + animation-delay: 0.4s, 1.7s; } .merged-storyline .story-node:nth-of-type(7)::before { - animation-delay: 0.54s; + animation-delay: 0.47s, 1.9s; } .merged-storyline .story-node:nth-of-type(8)::before { - animation-delay: 0.62s; + animation-delay: 0.54s, 2.1s; } } @@ -1766,14 +1769,44 @@ a { } @keyframes timeline-diamond-enter { - from { + 0% { opacity: 0; - transform: scale(0.72); + transform: scale(0.45); + box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); + color: #c9a000; } - to { + 70% { + transform: scale(1.18); + box-shadow: + 0 0 0 3px rgba(255, 204, 0, 0.55), + 0 0 16px 4px rgba(255, 204, 0, 0.45); + color: #ffdd33; + } + + 100% { opacity: 1; transform: scale(1); + box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35); + color: #e0b400; + } +} + +@keyframes timeline-diamond-glow { + + 0%, + 100% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.3); + color: #e0b400; + } + + 50% { + transform: scale(1.14); + box-shadow: + 0 0 0 3px rgba(255, 204, 0, 0.5), + 0 0 14px 5px rgba(255, 204, 0, 0.55); + color: #ffea4d; } }