VR/style.css at main · kaizo-x/VR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* -- BACKGROUNDS -- */
.bg-grid-pattern {
    background-size: 50px 50px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
#particle-canvas, #matrix-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

/* -- CUSTOM CURSOR -- */
.cursor-none { cursor: none; }
#cursor-dot, #cursor-ring { pointer-events: none; }

/* -- ANIMATIONS -- */
.animate-fade-in-right { animation: fadeInRight 1s ease-out forwards; }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.animate-marquee { animation: marquee 20s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

/* -- UI ELEMENTS -- */
.clip-path-button { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.magnetic-btn, .magnetic-item { display: inline-block; transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* -- RGB BORDER -- */
.rgb-border-btn {
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #06b6d4, #d946ef, #06b6d4) 1;
    animation: borderRotate 4s linear infinite;
}
@keyframes borderRotate { 0% { border-image-source: linear-gradient(45deg, #06b6d4, #d946ef, #06b6d4); } 50% { border-image-source: linear-gradient(180deg, #06b6d4, #d946ef, #06b6d4); } 100% { border-image-source: linear-gradient(45deg, #06b6d4, #d946ef, #06b6d4); } }

/* -- 3D TILT CARD & GLARE -- */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: transform 0.1s ease-out;
}
.tilt-card::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0) 100%);
    opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 50;
}
.tilt-card:hover::after { opacity: 1; }

@media (max-width: 768px) {
    .tilt-card { animation: float 4s ease-in-out infinite; transform: none !important; }
    .cursor-none { cursor: auto; }
    #cursor-dot, #cursor-ring { display: none; }
}

/* -- SCROLLBAR -- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #0891b2; }