.walrus-eyes{
display:flex;
gap:20px;
margin-bottom:2px;
pointer-events:none;
}
.walrus-eye{
width:var(--eye);
height:var(--eye);
border-radius:50%;
background:linear-gradient(135deg,#00f148,#00aa33);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),inset 0 -1px 1px rgba(255,255,255,0.15),0 2px 4px rgba(0,0,0,0.2);
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
transition:transform 0.15s ease;
will-change:transform;
user-select:none;
}
.walrus-eye::before{
content:'';
width:calc(var(--eye) * 0.45);
height:calc(var(--eye) * 0.45);
border-radius:50%;
background:radial-gradient(circle at 30% 30%,#333,#000 70%);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.8);
transition:transform 0.05s ease;
transform:translate3d(var(--pupil-x,0),var(--pupil-y,0),0);
will-change:transform;
}
.light-theme .walrus-eye{
background:linear-gradient(135deg,#cd3928,#a52e1e);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.2),inset 0 -1px 1px rgba(255,255,255,0.2),0 2px 4px rgba(0,0,0,0.15);
}
.light-theme .walrus-eye::before{
background:radial-gradient(circle at 30% 30%,#2a2a2a,#000 70%);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.9);
}
@media (prefers-reduced-motion:reduce){
.walrus-eye,.walrus-eye::before{
transition:none !important;
will-change:auto !important;
}
}