aboutsummaryrefslogtreecommitdiff
path: root/hg.css
diff options
context:
space:
mode:
Diffstat (limited to 'hg.css')
-rw-r--r--hg.css365
1 files changed, 338 insertions, 27 deletions
diff --git a/hg.css b/hg.css
index 5451dec..f856199 100644
--- a/hg.css
+++ b/hg.css
@@ -69,6 +69,19 @@ body {
transform: perspective(1000px) rotateX(5deg) rotateY(-2deg);
transform-style: preserve-3d;
animation: playerFloat 6s ease-in-out infinite, playerPulse 4s ease-in-out infinite alternate;
+
+ /* Initially hidden */
+ opacity: 0;
+ visibility: hidden;
+ transform: perspective(1000px) rotateX(5deg) rotateY(-2deg) scale(0.8);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Show player after modal is closed */
+.music-player.show {
+ opacity: 1;
+ visibility: visible;
+ transform: perspective(1000px) rotateX(5deg) rotateY(-2deg) scale(1);
}
.music-player .color-overlay {
@@ -261,14 +274,81 @@ dialog::backdrop {
visibility: visible;
opacity: 1;
transition-delay: 0s;
+ animation: modalGlitchIn 1.5s ease-out forwards;
}
-.modal-bg {
- position: absolute;
- background: rgba(0, 0, 0, 0.8);
- backdrop-filter: blur(2px);
- width: 100%;
- height: 100%;
+@keyframes modalGlitchIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.8) translateX(0);
+ filter: hue-rotate(0deg) saturate(1);
+ }
+
+ 10% {
+ opacity: 0.3;
+ transform: scale(0.9) translateX(-20px);
+ filter: hue-rotate(90deg) saturate(3);
+ }
+
+ 15% {
+ opacity: 0.7;
+ transform: scale(1.1) translateX(15px);
+ filter: hue-rotate(-45deg) saturate(2);
+ }
+
+ 20% {
+ opacity: 0.4;
+ transform: scale(0.85) translateX(-10px);
+ filter: hue-rotate(180deg) saturate(4);
+ }
+
+ 25% {
+ opacity: 0.8;
+ transform: scale(1.05) translateX(8px);
+ filter: hue-rotate(-90deg) saturate(1.5);
+ }
+
+ 30% {
+ opacity: 0.6;
+ transform: scale(0.95) translateX(-5px);
+ filter: hue-rotate(45deg) saturate(3);
+ }
+
+ 40% {
+ opacity: 0.9;
+ transform: scale(1.02) translateX(3px);
+ filter: hue-rotate(-30deg) saturate(2);
+ }
+
+ 50% {
+ opacity: 0.7;
+ transform: scale(0.98) translateX(-2px);
+ filter: hue-rotate(60deg) saturate(2.5);
+ }
+
+ 65% {
+ opacity: 0.95;
+ transform: scale(1.01) translateX(1px);
+ filter: hue-rotate(-15deg) saturate(1.2);
+ }
+
+ 80% {
+ opacity: 0.85;
+ transform: scale(0.99) translateX(-1px);
+ filter: hue-rotate(15deg) saturate(1.8);
+ }
+
+ 90% {
+ opacity: 0.98;
+ transform: scale(1.005) translateX(0.5px);
+ filter: hue-rotate(-5deg) saturate(1.1);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1) translateX(0);
+ filter: hue-rotate(0deg) saturate(1);
+ }
}
.modal-container {
@@ -286,16 +366,119 @@ dialog::backdrop {
color: #00ffff;
font-family: 'VCR', 'Consolas', 'Courier New', monospace;
transform: perspective(800px) rotateX(2deg);
+ overflow: hidden;
+}
+
+.modal-container::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ rgba(255, 41, 117, 0.1) 25%,
+ rgba(0, 255, 255, 0.1) 50%,
+ rgba(255, 41, 117, 0.1) 75%,
+ transparent 100%);
+ animation: modalScanline 3s linear infinite;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.modal-container::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ repeating-linear-gradient(
+ 0deg,
+ transparent,
+ transparent 2px,
+ rgba(0, 255, 255, 0.03) 2px,
+ rgba(0, 255, 255, 0.03) 4px
+ );
+ pointer-events: none;
+ z-index: 2;
+}
+
+.modal-container > * {
+ position: relative;
+ z-index: 3;
+}
+
+@keyframes modalScanline {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
}
.modal-container h3 {
color: #ff2975;
text-shadow: 0 0 12px rgba(255, 41, 117, 0.8);
- font-family: 'VCR', 'Consolas', 'Courier New', monospace;
- font-size: 1.1em;
- margin-bottom: 1em;
- padding-bottom: 0.4em;
- border-bottom: 1px solid rgba(255, 41, 117, 0.4);
+ font-size: 24px;
+ margin-bottom: 20px;
+ font-weight: bold;
+ animation: titleGlitch 0.8s ease-out 0.5s;
+}
+
+@keyframes titleGlitch {
+ 0% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ 10% {
+ transform: translateX(-3px);
+ opacity: 0.8;
+ text-shadow:
+ -3px 0 #ff2975,
+ 3px 0 #00ffff,
+ 0 0 12px rgba(255, 41, 117, 0.8);
+ }
+ 20% {
+ transform: translateX(2px);
+ opacity: 0.9;
+ text-shadow:
+ 2px 0 #00ffff,
+ -2px 0 #ff2975,
+ 0 0 12px rgba(0, 255, 255, 0.8);
+ }
+ 30% {
+ transform: translateX(-1px);
+ opacity: 0.85;
+ text-shadow:
+ 1px 0 #ff2975,
+ -1px 0 #00ffff,
+ 0 0 12px rgba(255, 41, 117, 0.8);
+ }
+ 50% {
+ transform: translateX(1px);
+ opacity: 0.95;
+ text-shadow:
+ -1px 0 #00ffff,
+ 1px 0 #ff2975,
+ 0 0 12px rgba(0, 255, 255, 0.8);
+ }
+ 70% {
+ transform: translateX(-0.5px);
+ opacity: 0.98;
+ text-shadow:
+ 0.5px 0 #ff2975,
+ -0.5px 0 #00ffff,
+ 0 0 12px rgba(255, 41, 117, 0.8);
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ text-shadow: 0 0 12px rgba(255, 41, 117, 0.8);
+ }
}
.modal-container h4 {
@@ -304,6 +487,75 @@ dialog::backdrop {
font-family: 'VCR', 'Consolas', 'Courier New', monospace;
font-size: 0.9em;
margin: 0.8em 0;
+ animation: contentGlitchIn 0.6s ease-out 1s both;
+}
+
+#warning {
+ color: #ffff00;
+ text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
+ font-weight: bold;
+ text-align: center;
+ margin: 15px 0;
+ padding: 8px;
+ border: 1px solid rgba(255, 255, 0, 0.3);
+ background: rgba(255, 255, 0, 0.1);
+ animation: warningGlitch 0.8s ease-out 0.8s both;
+}
+
+@keyframes contentGlitchIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(10px);
+ filter: blur(2px);
+ }
+ 30% {
+ opacity: 0.6;
+ transform: translateY(-2px);
+ filter: blur(1px);
+ }
+ 60% {
+ opacity: 0.8;
+ transform: translateY(1px);
+ filter: blur(0.5px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ filter: blur(0);
+ }
+}
+
+@keyframes warningGlitch {
+ 0% {
+ opacity: 0;
+ transform: scale(0.8);
+ filter: hue-rotate(0deg);
+ }
+ 20% {
+ opacity: 0.7;
+ transform: scale(1.1);
+ filter: hue-rotate(45deg);
+ }
+ 40% {
+ opacity: 0.9;
+ transform: scale(0.95);
+ filter: hue-rotate(-30deg);
+ }
+ 60% {
+ opacity: 0.8;
+ transform: scale(1.05);
+ filter: hue-rotate(60deg);
+ }
+ 80% {
+ opacity: 0.95;
+ transform: scale(0.98);
+ filter: hue-rotate(-15deg);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ filter: hue-rotate(0deg);
+ }
}
.modal-container p {
@@ -319,6 +571,7 @@ dialog::backdrop {
text-shadow: 0 0 8px rgba(255, 41, 117, 0.8);
font-style: normal;
font-weight: bold;
+ animation: contentGlitchIn 0.6s ease-out 1.2s both;
}
.modal-close {
@@ -348,7 +601,34 @@ dialog::backdrop {
color: #00ffff;
text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
transform: scale(1.1);
- background: rgba(255, 41, 117, 0.1);
+ animation: buttonGlitch 0.5s ease-in-out;
+}
+
+@keyframes buttonGlitch {
+ 0%, 100% {
+ transform: scale(1.1);
+ }
+ 25% {
+ transform: scale(1.1) translateX(-2px);
+ text-shadow:
+ -2px 0 #ff2975,
+ 2px 0 #00ffff,
+ 0 0 15px rgba(0, 255, 255, 0.8);
+ }
+ 50% {
+ transform: scale(1.1) translateX(2px);
+ text-shadow:
+ 2px 0 #ff2975,
+ -2px 0 #00ffff,
+ 0 0 15px rgba(255, 41, 117, 0.8);
+ }
+ 75% {
+ transform: scale(1.1) translateX(-1px);
+ text-shadow:
+ -1px 0 #00ffff,
+ 1px 0 #ff2975,
+ 0 0 15px rgba(0, 255, 255, 0.8);
+ }
}
.text-center {
@@ -440,6 +720,19 @@ canvas {
box-shadow:
0 -2px 10px rgba(0, 0, 0, 0.6),
0 0 15px rgba(255, 41, 117, 0.2);
+
+ /* Initially hidden */
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(100%);
+ transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Show progress bar after modal is closed */
+.progress-bar-container.show {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
}
.progress-info {
@@ -856,23 +1149,37 @@ canvas {
}
.terminal-close:hover {
- color: #ff2975;
- text-shadow: 0 0 15px rgba(255, 41, 117, 1);
- border-color: #ff2975;
- background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(255, 41, 117, 0.2));
- box-shadow:
- inset 0 1px 0 rgba(255, 41, 117, 0.3),
- inset 0 -1px 0 rgba(0, 0, 0, 0.5),
- 0 0 20px rgba(255, 41, 117, 0.4),
- 0 2px 4px rgba(0, 0, 0, 0.3);
- transform: translateY(-1px);
+ color: #00ffff;
+ text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
+ transform: scale(1.1);
+ animation: buttonGlitch 0.5s ease-in-out;
}
-.terminal-close:active {
- transform: translateY(1px);
- box-shadow:
- inset 0 2px 4px rgba(0, 0, 0, 0.5),
- 0 0 5px rgba(255, 41, 117, 0.3);
+@keyframes buttonGlitch {
+ 0%, 100% {
+ transform: scale(1.1);
+ }
+ 25% {
+ transform: scale(1.1) translateX(-2px);
+ text-shadow:
+ -2px 0 #ff2975,
+ 2px 0 #00ffff,
+ 0 0 15px rgba(0, 255, 255, 0.8);
+ }
+ 50% {
+ transform: scale(1.1) translateX(2px);
+ text-shadow:
+ 2px 0 #ff2975,
+ -2px 0 #00ffff,
+ 0 0 15px rgba(255, 41, 117, 0.8);
+ }
+ 75% {
+ transform: scale(1.1) translateX(-1px);
+ text-shadow:
+ -1px 0 #00ffff,
+ 1px 0 #ff2975,
+ 0 0 15px rgba(0, 255, 255, 0.8);
+ }
}
.terminal-content {
@@ -1006,6 +1313,7 @@ canvas {
display: flex;
gap: 1em;
margin: 1em 0;
+ animation: contentGlitchIn 0.8s ease-out 1.4s both;
}
.controls-section {
@@ -1025,6 +1333,7 @@ canvas {
display: flex;
flex-direction: column;
gap: 0.3em;
+ animation: contentGlitchIn 0.6s ease-out 1.6s both;
}
.touch-grid {
@@ -1058,6 +1367,7 @@ canvas {
.features-compact {
text-align: center;
margin: 0.8em 0;
+ animation: contentGlitchIn 0.6s ease-out 1.8s both;
}
.features-compact p {
@@ -1071,6 +1381,7 @@ canvas {
.credit-compact {
text-align: center;
margin-top: 0.5em;
+ animation: contentGlitchIn 0.6s ease-out 2s both;
}
.credit-compact small {