/*
 * Keep the calibrated eye sockets and spectacle frames in place.
 * The artwork contains blank sclera: a stationary skin underlay is necessary
 * so closing the CSS eye does not reveal the original white eye underneath.
 * Only the sclera/iris close vertically; no skin panel slides over the face.
 */
.mascot-eye{
  --eye-open:1;
  --iris-open:50%;
  --lid-opacity:0;
  background:linear-gradient(180deg,#dfad86 0%,#f1c7a0 58%,#edbd94 100%);
  isolation:isolate;
}
.mascot-eye:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:radial-gradient(ellipse at 43% 38%,#fffaf0 15%,#f9eddb 70%,#e8d5bc 100%);
  box-shadow:inset 0 .7px 1px #805d4252;
  transform:scaleY(var(--eye-open));
  transform-origin:50% 52%;
  transition:transform .12s cubic-bezier(.2,.65,.3,1);
}
.mascot-eye>.mascot-pupil{
  z-index:1;
  width:68%;
  height:96%;
  border-radius:47% 48% 49% 50%;
  background:radial-gradient(ellipse at 43% 38%,#946b47 0%,#6c472f 31%,#4d3326 58%,#30231d 83%,#241c19 100%);
  box-shadow:inset 0 0 0 .55px #34271ec4,inset .7px -.9px 1px #31201766;
  -webkit-clip-path:ellipse(50% var(--iris-open) at 50% 50%);
  clip-path:ellipse(50% var(--iris-open) at 50% 50%);
  transition:clip-path .12s cubic-bezier(.2,.65,.3,1),-webkit-clip-path .12s cubic-bezier(.2,.65,.3,1);
}
.mascot-eye>.mascot-pupil:before{
  content:'';
  position:absolute;
  left:23%;
  top:20%;
  width:54%;
  height:62%;
  border-radius:48%;
  background:radial-gradient(ellipse at 45% 38%,#231b18,#100d0d 90%);
  transform:none;
}
.mascot-eye>.mascot-pupil:after{
  content:'';
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border-radius:inherit;
  background:radial-gradient(ellipse 10% 9% at 31% 25%,#fffdf3f2 85%,#fffdf300 100%),radial-gradient(ellipse 4% 3% at 62% 69%,#f4dec9a6 80%,#f4dec900 100%);
  transform:none;
}
.mascot-eye>.mascot-lid{
  inset:43% 8% auto;
  z-index:2;
  height:12%;
  border:0;
  border-bottom:.8px solid #76503c;
  border-radius:0 0 50% 50%;
  background:none;
  opacity:var(--lid-opacity);
  transform:scaleX(.86);
  transition:opacity .06s ease;
}
.is-blinking .mascot-eye{
  --eye-open:0;
  --iris-open:0%;
  --lid-opacity:1;
}
.is-blinking .mascot-eye:before,
.is-blinking .mascot-eye>.mascot-pupil{
  transition-duration:.085s;
}
@media(max-width:767px){
  .mascot-eye>.mascot-pupil{width:68%;height:96%}
  .mascot-eye>.mascot-lid{border-bottom-width:.7px}
}