Positioning and overflow of shared elements

I have a card which translates on opening screen, and shine effect (view), which slides from bottom to top over card during the opening animation, and from top to bottom during closing.

Problem:
When opening/closing animation starts, shine view which located at bottom and not visible because of overflow: 'hidden' appears over the card and starts moving without reference to overflow card.

https://user-images.githubusercontent.com/60893275/143313426-c441d16f-90e2-4869-8647-305bdbd11629.mp4

Start by reproducing the card opening and closing animation shown in the linked video, focusing on the shine view and the card's overflow: 'hidden' behavior. No source file, test, or entry point is named in the issue, so locating the shared-element animation implementation is the first step. Done means the shine view remains clipped to the card throughout both animations.

Written by the indexing model from the issue text.