.lens-timecode{position:absolute;bottom:-20px;left:0;direction:ltr;color:#92948a;font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.5px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.motion-demo[data-lens-detail="timecode"] .lens-timecode{animation:timecode-arrive 1.25s both}
.motion-demo[data-lens-detail="timefade"] .lens-timecode{animation:timecode-depart 3.85s both}
.opening-preparing .identity-frame{opacity:0}
.lens-timeline{position:absolute;bottom:-16px;height:1px;left:0;right:0;background:#494c4166;pointer-events:none}
.lens-playhead{position:absolute;height:9px;width:2px;top:-4px;left:0;background:var(--accent);animation:playhead-settle 1.25s cubic-bezier(.3,.6,.3,1) both}
.lens-focus-extra{position:absolute;width:29px;height:29px;border:1px solid var(--accent);pointer-events:none;opacity:0;animation:focus-extra 1.25s both}
.focus-top-left{left:0;top:0;border-right:0;border-bottom:0;--focus-x:-8px;--focus-y:-8px}
.focus-bottom-right{right:0;bottom:0;border-left:0;border-top:0;--focus-x:8px;--focus-y:8px}
.motion-demo[data-lens-detail="focus"] .identity-frame:before{--focus-x:8px;--focus-y:-8px;animation:focus-anchor 1.25s both}
.motion-demo[data-lens-detail="focus"] .identity-frame:after{--focus-x:-8px;--focus-y:8px;animation:focus-anchor 1.25s both}
.motion-demo[data-lens-detail="typecut"] .refined-role{animation:role-cut 1.3s both}
.motion-demo[data-lens-detail="typecut"] .refined-story{animation:story-cut 1.55s both}
@keyframes timecode-arrive{0%{opacity:0}15%,100%{opacity:1}}
@keyframes timecode-depart{0%{opacity:0}4.805%,90.87%{opacity:1}100%{opacity:0}}
@keyframes playhead-settle{0%{left:100%;opacity:0}12%{opacity:1}100%{left:0;opacity:.75}}
@keyframes focus-extra{0%{opacity:0;transform:translate(var(--focus-x),var(--focus-y))}30%,66%{opacity:.7;transform:translate(0)}100%{opacity:0;transform:translate(0)}}
@keyframes focus-anchor{0%{opacity:0;transform:translate(var(--focus-x),var(--focus-y))}66%,100%{opacity:1;transform:translate(0)}}
@keyframes role-cut{0%,58%{opacity:0;clip-path:inset(0 0 100% 0)}80%,100%{opacity:1;clip-path:inset(0)}}
@keyframes story-cut{0%,72%{opacity:0;transform:translateY(3px)}94%,100%{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.lens-timecode{font-size:9px;bottom:-17px;letter-spacing:1px}.lens-focus-extra{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){.motion-demo[data-lens-detail] *,.motion-demo[data-lens-detail] *:before,.motion-demo[data-lens-detail] *:after{animation:none!important;transition:none!important}.motion-demo[data-lens-detail="timefade"] .lens-timecode,.lens-focus-extra{display:none}}