web/style.css at main · Gunterlie/web · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05040a;
  font-family: 'Space Mono', 'Courier New', monospace;
}

.stage { position: relative; width: 100vw; height: 100vh; }

.float {
  position: absolute;
  white-space: nowrap;
  letter-spacing: 0.1em;
  color: #9977bb;
  user-select: none;
  pointer-events: none;
  animation: drift linear infinite;
}

@keyframes drift {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(var(--dx), calc(var(--dy)*.6)) rotate(calc(var(--dr)*.4)); }
  50%  { transform: translate(calc(var(--dx)*1.4), var(--dy)) rotate(var(--dr)); }
  75%  { transform: translate(calc(var(--dx)*.3), calc(var(--dy)*1.5)) rotate(calc(var(--dr)*-.5)); }
  100% { transform: translate(0,0) rotate(0deg); }
}

.avatar-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  animation: pulse 8s ease-in-out infinite;
  cursor: pointer;
}

.avatar-wrap.burst {
  animation: burst 0.9s ease-out, pulse 8s ease-in-out infinite;
}

.avatar-wrap svg { width: 100%; height: 100%; display: block; }

.tagline {
  position: fixed;
  top: calc(50% + 130px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(200,180,230,0.75);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 1.2s ease;
  z-index: 100;
  pointer-events: none;
}
.tagline.hidden { opacity: 0; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 16px 4px rgba(100,0,180,.55), 0 0 50px 10px rgba(60,0,120,.30), 0 0 100px 20px rgba(40,0,80,.15); }
  50%       { box-shadow: 0 0 30px 8px rgba(150,0,255,.80), 0 0 80px 20px rgba(100,0,180,.50), 0 0 160px 40px rgba(60,0,120,.25); }
}

/* click tricks */
@keyframes spin    { 0%{transform:translate(-50%,-50%) rotate(0)}    100%{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes wobble  { 0%,100%{transform:translate(-50%,-50%) rotate(0)} 20%{transform:translate(-50%,-50%) rotate(-18deg)} 40%{transform:translate(-50%,-50%) rotate(14deg)} 60%{transform:translate(-50%,-50%) rotate(-10deg)} 80%{transform:translate(-50%,-50%) rotate(6deg)} }
@keyframes bounce  { 0%,100%{transform:translate(-50%,-50%) scale(1)} 30%{transform:translate(-50%,-65%) scale(1.1)} 60%{transform:translate(-50%,-45%) scale(0.95)} 80%{transform:translate(-50%,-53%) scale(1.03)} }
@keyframes flip    { 0%{transform:translate(-50%,-50%) rotateY(0)}    50%{transform:translate(-50%,-50%) rotateY(180deg)} 100%{transform:translate(-50%,-50%) rotateY(360deg)} }
@keyframes glitch  { 0%,100%{transform:translate(-50%,-50%)} 15%{transform:translate(-46%,-50%) skewX(8deg)} 30%{transform:translate(-54%,-50%) skewX(-8deg)} 45%{transform:translate(-48%,-52%) skewX(5deg)} 60%{transform:translate(-52%,-48%) skewX(-4deg)} 75%{transform:translate(-50%,-50%) skewX(2deg)} }
@keyframes shrink  { 0%,100%{transform:translate(-50%,-50%) scale(1)} 40%{transform:translate(-50%,-50%) scale(0.35)} 70%{transform:translate(-50%,-50%) scale(1.15)} }
@keyframes shake   { 0%,100%{transform:translate(-50%,-50%)} 20%{transform:translate(-44%,-50%)} 40%{transform:translate(-56%,-50%)} 60%{transform:translate(-45%,-50%)} 80%{transform:translate(-55%,-50%)} }
@keyframes tilt    { 0%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)} 25%{transform:translate(-50%,-50%) rotate(-25deg) scale(1.1)} 75%{transform:translate(-50%,-50%) rotate(25deg) scale(1.1)} }
@keyframes burst   { 0%{box-shadow:0 0 16px 4px var(--glow,.5),0 0 50px 10px var(--glow,.3)} 50%{box-shadow:0 0 60px 20px var(--glow,.9),0 0 120px 40px var(--glow,.6),0 0 200px 60px var(--glow,.3)} 100%{box-shadow:0 0 16px 4px rgba(100,0,180,.55),0 0 50px 10px rgba(60,0,120,.30)} }