<div role="img" aria-label="A cartoon showing a hungry-hippo toy eating rolling balls"></div>

@property --distance {
  syntax: '<length>';
  inherits: false;
  initial-value: 100vw;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 50deg;
}

@property --neck {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}

@keyframes play {
  0% { 
    --angle: 50deg;
    --distance: 100vw;
  }
  50% { 
    --angle: 35deg;
    --distance: 100vw;
  }
  65% {
    --distance: 30vw;
  }
  100% {
    --angle: 50deg;
    --distance: 30vw;
  }
}

div {
  animation: play 5s infinite;
  transition: --angle 4s;
  --angle: 50deg; /* 35deg*/
  --pos: 2vmin;
  --distance: 95vw;
  --color: #cd5c5c;
  --color-dark: #bd3c3c;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image:
    radial-gradient(farthest-side at 50% 100%, var(--color-dark) 99.9%, transparent),
    radial-gradient(farthest-side at 50% 100%, var(--color-dark) 99.9%, transparent),
    radial-gradient(farthest-side at 0% 100%, var(--color-dark) 99.9%, transparent 0),
    radial-gradient(farthest-side at 100% 100%, var(--color) 99.9%, transparent 0),
    radial-gradient(farthest-side at 00% 100%, var(--color) 99.9%, transparent 0),
    linear-gradient(var(--angle), transparent 35%, black 0 40%, transparent 0),
    linear-gradient(to right, var(--color-dark), var(--color-dark)),
    radial-gradient(closest-side at 75% 50%, white, gray 99.9%, transparent 0)
    ;
  background-size:
    18vmin 12vmin,
    10vmin 9vmin,
    8vmin 4vmin,
    16vmin 20vmin,
    30vmin 20vmin,
    40vmin 35vmin,
    15vmin 5vmin,
    9vmin 4.5vmin
    ;
  background-position:
    calc(var(--pos) + 2.5vmin) 100%,
    calc(var(--pos) + 28vmin) 100%,
    calc(var(--pos) + 35vmin) 100%,
    calc(var(--pos) + 0vmin) 100%,
    calc(var(--pos) + 15.9vmin) 100%,
    calc(var(--pos) + 0vmin) 100%,
    calc(var(--pos) + 45vmin) 100%,
    var(--distance) 100%
    ;
  background-repeat: no-repeat;
  
}

@keyframes eat {
  0%, 100% { 
    left: calc(var(--pos) + 48vmin);
    transform: rotate(0);
  }
  30%, 70% {
    left: calc(var(--pos) + 58vmin);
    transform: rotate(0);
  }
  50% { 
    transform: rotate(-30deg);
    left: calc(var(--pos) + 58vmin);
  }
}

div::after {
  animation: eat 5s infinite;
  content: "";
  display: block;
  width: 30vmin;
  height: 25vmin;
  position: absolute;
  bottom: 0;
  left: calc(var(--pos) + 48vmin);
  background-image:
    radial-gradient(closest-side, black 99.9%, transparent 0),
    radial-gradient(closest-side, white 99.9%, transparent 0),
    radial-gradient(ellipse 50% 50% at 50% 100%, var(--color) 99.9%, transparent 0),
    linear-gradient(var(--color), var(--color)),
    radial-gradient(farthest-side at 0% 100%, var(--color) 99.9%, transparent 0),
    radial-gradient(closest-side, var(--color) 99.9%, transparent 0)
    ;
  background-size:
    1vmin 1vmin,
    2vmin 3vmin,
    15vmin 15vmin,
    17vmin 10.1vmin,
    10vmin 10.1vmin,
    3vmin 3vmin
    ;
  background-position: 
    45% 56%,
    43% 55%,
    0 0,
    0 14.9vmin,
    16.9vmin 100%,
    77% 70%
    ;
  background-repeat: no-repeat;
  transform-origin: left bottom;
/*   box-shadow: -2vmin 0 2vmin -2vmin white;
  mix-blend-mode: saturation; */
}