Spaces:
Running
Running
| @keyframes fade-in { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse-slow { | |
| 0%, 100% { opacity: 0.6; } | |
| 50% { opacity: 0.9; } | |
| } | |
| @keyframes flicker { | |
| 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { | |
| opacity: 0.6; | |
| } | |
| 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { | |
| opacity: 0.2; | |
| } | |
| } | |
| @keyframes button-hover { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1); | |
| background-color: rgba(17, 24, 39, 0.5); | |
| } | |
| 100% { | |
| box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.1); | |
| background-color: #000; | |
| } | |
| } | |
| a.block:hover div { | |
| animation: button-hover 0.5s ease-out forwards; | |
| transform: translateY(-2px); | |
| background-color: #000 ; | |
| } | |
| @keyframes text-glitch { | |
| 0% { text-shadow: 0.05em 0 0 rgba(255,0,0,0.2), -0.05em -0.025em 0 rgba(0,255,0,0.2), -0.025em 0.05em 0 rgba(0,0,255,0.2); } | |
| 14% { text-shadow: 0.05em 0 0 rgba(255,0,0,0.2), -0.05em -0.025em 0 rgba(0,255,0,0.2), -0.025em 0.05em 0 rgba(0,0,255,0.2); } | |
| 15% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,0.2), 0.025em 0.025em 0 rgba(0,255,0,0.2), -0.05em -0.05em 0 rgba(0,0,255,0.2); } | |
| 49% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,0.2), 0.025em 0.025em 0 rgba(0,255,0,0.2), -0.05em -0.05em 0 rgba(0,0,255,0.2); } | |
| 50% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,0.2), 0.05em 0 0 rgba(0,255,0,0.2), 0 -0.05em 0 rgba(0,0,255,0.2); } | |
| 99% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,0.2), 0.05em 0 0 rgba(0,255,0,0.2), 0 -0.05em 0 rgba(0,0,255,0.2); } | |
| 100% { text-shadow: -0.025em 0 0 rgba(255,0,0,0.2), -0.025em -0.025em 0 rgba(0,255,0,0.2), -0.025em -0.05em 0 rgba(0,0,255,0.2); } | |
| } | |
| .animate-fade-in { | |
| animation: fade-in 1.5s ease-out forwards; | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .animate-flicker { | |
| animation: flicker 3s linear infinite; | |
| } | |
| .animate-text-glitch { | |
| animation: text-glitch 650ms infinite; | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 30%, rgba(40,40,40,0.4) 0%, transparent 30%), | |
| radial-gradient(circle at 80% 70%, rgba(40,40,40,0.4) 0%, transparent 30%); | |
| pointer-events: none; | |
| z-index: -2; | |
| } |