.ds-eye{
  --ds-eye-size:  clamp(104px, 11vw, 168px);
  --ds-eye-inner: 77.8%;
  --ds-eye-rest:  32deg;
  --ds-eye-frame-factor: -1;

  --ds-eye-push-x: 0px;
  --ds-eye-push-y: 0px;
  --ds-eye-poke-dur: .5s;

  position: relative;
  flex: 0 0 auto;
  display: block;
  width:  var(--ds-eye-size);
  height: var(--ds-eye-size);

  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ds-eye:focus-visible{
  outline: 3px solid var(--ds-focus-color);
  outline-offset: 6px;
}

.ds-eye__frame,
.ds-eye__img{
  position: absolute;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.ds-eye{
  --ds-tear-w:    30%;
  --ds-tear-rest: .05;
  --ds-tear-down: .90;
}

.ds-eye__tear{
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ds-tear-w);
  line-height: 0;
  pointer-events: none;

  transform: translate(-50%, calc(var(--ds-tear-rest) * var(--ds-eye-size)));
  transition: transform 1.15s var(--ds-ease-out);
}

.ds-eye__tear img{
  display: block;
  width: 100%;
  height: auto;
}

.ds-eye.is-crying .ds-eye__tear{
  transform: translate(-50%, calc(var(--ds-tear-down) * var(--ds-eye-size)));
}

@media (prefers-reduced-motion: reduce){
  .ds-eye__tear{ transition: none; }
}

.ds-eye__frame{
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(var(--ds-eye-frame-rot, 0deg));
}

.ds-eye__img{
  inset: calc((100% - var(--ds-eye-inner)) / 2);
  width:  var(--ds-eye-inner);
  height: var(--ds-eye-inner);
  transform: rotate(var(--ds-eye-rot, 0deg));
  transition: opacity .12s linear;
}

.ds-eye__img--open{ opacity: 1; }
.ds-eye__img--closed{ opacity: 0; }
.ds-eye.is-closed .ds-eye__img--closed{ opacity: 1; }

.ds-eye.is-poked{
  animation: ds-eye-poke var(--ds-eye-poke-dur) var(--ds-ease-out);
}

@keyframes ds-eye-poke{
  0%{
    transform: translate(0, 0) scale(1, 1);
  }
  12%{
    transform: translate(calc(var(--ds-eye-push-x) * .55), calc(var(--ds-eye-push-y) * .55))
               scale(1.07, .86);
  }
  30%{
    transform: translate(var(--ds-eye-push-x), var(--ds-eye-push-y))
               scale(.91, 1.06);
  }
  55%{
    transform: translate(calc(var(--ds-eye-push-x) * .22), calc(var(--ds-eye-push-y) * .22))
               scale(1.04, .97);
  }
  78%{
    transform: translate(0, 0) scale(.99, 1.01);
  }
  100%{
    transform: translate(0, 0) scale(1, 1);
  }
}

.ds-eye__flash{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ds-paper);
  opacity: 0;
  pointer-events: none;
}
.ds-eye.is-poked .ds-eye__flash{
  animation: ds-eye-flash .22s var(--ds-ease-out);
}
@keyframes ds-eye-flash{
  0%   { opacity: .75; }
  100% { opacity: 0; }
}

.ds-eye-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.ds-eye-row .ds-title{ flex: 1 1 16rem; }

.ds-eye-field{
  display: grid;
  place-items: center;
  min-height: clamp(220px, 34svh, 420px);
  margin-top: var(--ds-space-xl);
  padding: var(--ds-space-lg);

  background: var(--ds-ink-a08);
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
}

.ds-eye-field__hint{
  font-size: var(--ds-fs-caption);
  font-weight: var(--ds-fw-bold);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ds-muted-color);
  text-align: center;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .ds-eye.is-poked{ animation: none; }
  .ds-eye.is-poked .ds-eye__flash{ animation: none; }
}