html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background:black;
}
#page {
position:relative;
width:100vw;
height:100vh;
}
/* MAIN PHOTO */
#photo {
position:absolute;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}
/* WORD LAYER */
#menu {
position:absolute;
inset:0;
z-index:2;
}
/* WORDS */
.word {
position:absolute;
color:#2d4334;
font-family:"Cormorant Garamond", serif;
font-size:30px;
font-weight:400;
text-decoration:none;
opacity:1;
}
/* WORD POSITIONS */
.bio{
top:34%;
}
.projects{
top:42%;
}
.events{
top:50%;
}
.recordings{
top:58%;
}
/* GLITCH CIRCLE */
#glass {
position:absolute;
width:90px;
height:90px;
border-radius:50%;
overflow:hidden;
pointer-events:none;
z-index:5;
display:none;
border:1px solid rgba(255,255,255,0.5);
}
/* IMAGE INSIDE GLITCH CIRCLE */
#glass img {
position:absolute;
width:100vw;
height:100vh;
object-fit:cover;
filter:
contrast(1.7)
saturate(2)
hue-rotate(90deg);
animation:glitch 0.15s infinite;
}
/* GLITCH MOVEMENT */
@keyframes glitch {
0% {
transform:translate(0,0);
}
25% {
transform:translate(5px,-3px);
}
50% {
transform:translate(-5px,4px);
}
75% {
transform:translate(3px,2px);
}
100% {
transform:translate(0,0);
}
}
@keyframes wordGlitch {
0% {
color:#4f8f5b;
text-shadow:
0 0 5px rgba(80,150,90,0.8),
0 0 15px rgba(50,100,60,0.5);
}
50% {
color:#7aa66b;
text-shadow:
2px 0 rgba(90,180,120,0.5),
-2px 0 rgba(30,90,60,0.5),
0 0 12px rgba(80,160,100,0.7);
}
100% {
color:#355d42;
text-shadow:
0 0 8px rgba(70,130,80,0.8),
0 0 18px rgba(30,80,40,0.5);
}
}
.word.active {
color:#72b27f;
text-shadow:
0 0 5px rgba(114,178,127,.8),
0 0 12px rgba(114,178,127,.5);
transform:translateX(6px);
}