101 lines
1.8 KiB
CSS
101 lines
1.8 KiB
CSS
|
/* === NEBULA BACKGROUND === */
|
||
|
|
.slidev-layout {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
background: radial-gradient(circle at 30% 30%, #1b2735, #090a0f);
|
||
|
|
}
|
||
|
|
|
||
|
|
.slidev-layout::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -50%;
|
||
|
|
left: -50%;
|
||
|
|
width: 200%;
|
||
|
|
height: 200%;
|
||
|
|
background: conic-gradient(
|
||
|
|
from 180deg,
|
||
|
|
#800020,
|
||
|
|
#0066cc,
|
||
|
|
#b22222,
|
||
|
|
#0f0f1a,
|
||
|
|
#800020
|
||
|
|
);
|
||
|
|
animation: nebula-shift 60s linear infinite;
|
||
|
|
opacity: 0.07;
|
||
|
|
z-index: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes nebula-shift {
|
||
|
|
0% { transform: rotate(0deg) scale(1.2); }
|
||
|
|
100% { transform: rotate(360deg) scale(1.2); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === HUD CIRCLES === */
|
||
|
|
.hud-element {
|
||
|
|
position: absolute;
|
||
|
|
border: 1px solid rgba(0, 255, 255, 0.08);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: pulse-ring 6s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-element.circle-small {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: 20%;
|
||
|
|
left: 10%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-element.circle-big {
|
||
|
|
width: 180px;
|
||
|
|
height: 180px;
|
||
|
|
top: 60%;
|
||
|
|
left: 75%;
|
||
|
|
animation-delay: 2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-ring {
|
||
|
|
0%, 100% { transform: scale(1); opacity: 0.06; }
|
||
|
|
50% { transform: scale(1.2); opacity: 0.12; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === HUD SCANNING LINES === */
|
||
|
|
.hud-lines::before,
|
||
|
|
.hud-lines::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
height: 2px;
|
||
|
|
width: 100vw;
|
||
|
|
background: linear-gradient(
|
||
|
|
to right,
|
||
|
|
rgba(0, 102, 204, 0) 0%,
|
||
|
|
rgba(0, 102, 204, 0.12) 50%,
|
||
|
|
rgba(0, 102, 204, 0) 100%
|
||
|
|
);
|
||
|
|
animation: scanline 20s linear infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-lines::before {
|
||
|
|
top: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-lines::after {
|
||
|
|
top: 75%;
|
||
|
|
animation-delay: 10s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scanline {
|
||
|
|
0% { transform: translateX(-100%); }
|
||
|
|
100% { transform: translateX(100%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === SAFEGUARDING MAIN CONTENT === */
|
||
|
|
.slidev-layout > * {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|