@media (min-width: 992px) {
.radial-container { display: none !important; }
}
@media (max-width: 991px) {
.ink-wrapper { display: none !important; }
#avillis-cursor { display: none !important; }
}
.radial-container {
position: fixed;
inset: 0;
z-index: 9999;
background: transparent;
touch-action: none;
}
.center-stage {
position: fixed; 
top: auto; 
left: auto;
bottom: 95px; 
right: 15px; 
transform: none;
width: 245px; 
height: 310px; 
z-index: 10000;
overflow: hidden;
border-radius: 12px;
display: block;
pointer-events: auto !important;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
background: transparent;
box-shadow: 0px 10px 30px rgba(0,0,0,0.15); 
}
@media (max-width: 767px) {
body.single .center-stage,
body.single-projeto .center-stage,
body.single-post .center-stage,
body.single.no-credits .center-stage,
body.single-projeto.no-credits .center-stage,
body.single-post.no-credits .center-stage {
right: 15px !important; 
}
}
.center-stage img, .center-stage video {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
will-change: clip-path;
pointer-events: none;
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.radial-gallery {
position: fixed;
width: 100%; height: 100%;
left: 0; top: 0;
pointer-events: none;
}
.radial-center-logo {
position: absolute; 
top: 0; left: 0;
width: 575px; 
height: 575px;
background-color: #0a0a0a;
-webkit-mask-image: url("https://caioavillis.com/media/2022/04/logo-avillis-2.sv");
mask-image: url("https://caioavillis.com/media/2022/04/logo-avillis-2.sv");
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
pointer-events: none;
z-index: 1; 
}
.radial-item {
position: absolute; top: 0; left: 0;
transform: translate(-50%, -50%);
width: 400px; 
height: 100px;
cursor: pointer;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
z-index: 10;
}
.radial-item p {
font-family: "Brockmann", sans-serif;
font-size: 32px;
letter-spacing: -0.05rem; 
font-weight: 500;
color: #0a0a0a;
opacity: 0.15;
margin: 0;
transition: opacity 0.3s, color 0.3s;
white-space: nowrap;
}
.radial-item.active p { 
color: #000 !important; 
opacity: 1 !important; 
font-weight: 600; 
}
.ink-wrapper {
position: relative;
width: 100%; height: 100vh; min-height: 700px;
overflow: hidden;
background-color: transparent;
font-family: "Brockmann", sans-serif;
cursor: auto; 
}
#avillis-cursor {
position: fixed; top: 0; left: 0;
box-sizing: border-box; height: 26px; padding: 0 12px;
background-color: #0a0a0a; color: #f7f7f7;
font-family: "Brockmann", sans-serif; font-size: 10px; font-weight: 800;
letter-spacing: 0.2px; pointer-events: none; 
z-index: 2147483647 !important; white-space: nowrap;
border-radius: 5px; display: flex; align-items: center; justify-content: center;
opacity: 1; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
will-change: transform, clip-path, width, opacity;
text-transform: uppercase; 
}
.ink-gallery-container {
position: relative; width: 100%; height: 100%;
display: flex; justify-content: center; align-items: center;
transform-style: preserve-3d; perspective: 2000px; z-index: 2;
}
.ink-center-logo {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 180px; height: 180px; z-index: 1; pointer-events: none; 
background-color: #0a0a0a; 
-webkit-mask-image: url("https://caioavillis.com/media/2022/04/logo-avillis-2.svg");
mask-image: url("https://caioavillis.com/media/2022/04/logo-avillis-2.svg");
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.ink-gallery {
position: relative; width: 600px; height: 600px;
display: flex; justify-content: center; align-items: center;
transform-origin: center; transform-style: preserve-3d; 
}
a.ink-card {
display: block;
}
.ink-card {
position: absolute; 
top: 50%; left: 50%;
width: 864px; 
height: 1080px;
margin-top: -540px; 
margin-left: -432px;
border-radius: 64px; 
backface-visibility: visible; 
will-change: transform; 
-webkit-font-smoothing: antialiased;
transform-origin: center; 
transform-style: preserve-3d;
overflow: hidden;
background-color: #e5e5e5;
text-decoration: none;
}
.ink-card img, .ink-card video {
width: 100%; height: 100%; object-fit: cover;
backface-visibility: visible; pointer-events: none;
image-rendering: high-quality; 
}
.ink-skeleton {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, #e5e5e5 25%, #f2f2f2 50%, #e5e5e5 75%);
background-size: 200% 100%; animation: ink-shimmer 1.5s infinite linear;
z-index: 2; transition: opacity 0.5s ease; pointer-events: none;
}
@keyframes ink-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}