# Computer Panel — Window Open/Close & Navigation Animations (measured)

> All keyframes pulled from document.styleSheets. Easing: cubic-bezier(0.32,0.72,0,1) (signature). Launch duration ~0.28s.

## App LAUNCH (tap icon) — app-shell-zoom-in
@keyframes app-shell-zoom-in {
  0%   { opacity:0; transform: scale(var(--app-origin-scale,.7)); border-radius:32px; }
  40%  { opacity:1; }
  100% { opacity:1; transform: scale(1); border-radius: var(--app-shell-rest-radius,0px); }
}
- iOS-style "grow from icon": transform-origin set dynamically to the tapped icon's center (e.g. 201px 327px). --app-origin-scale (~.7) + 32px radius collapse to flat fill.

## App CLOSE (X) — app-shell-zoom-out  (reverse; shrinks back into icon)
@keyframes app-shell-zoom-out {
  0%   { transform: scale(1); border-radius: var(--app-shell-rest-radius,0px); }
  100% { transform: scale(var(--app-origin-scale,.7)); border-radius:32px; }
}
+ app-shell-fade-out { 0%{opacity:1} 100%{opacity:0} } runs alongside.

## Forward navigation (drill-in) — app-shell-slide-in-right  (0.28s, signature ease, forwards)
{ 0%{opacity:.5; transform: translate(30%)} 100%{opacity:1; transform: translate(0)} }
Applied via class .app-shell-anim-push-in on the scrollable content wrapper.

## Back navigation (pop) — app-shell-slide-in-left
{ 0%{opacity:.5; transform: translate(-30%)} 100%{opacity:1; transform: translate(0)} }

## Sibling/tab switch — app-shell-cross-fade-in  (+ app-shell-fade-in)
{ 0%{opacity:0; transform: scale(.985)} 100%{opacity:1; transform: scale(1)} }

## Panel itself (open/close the whole Computer)
- Animates WIDTH of the docked aside (will-change: transform,width); not a translate slide. 448px rail expand/collapse.

## Reimplementation notes
- Set --app-origin-scale and transform-origin from the clicked icon's bounding rect at launch, then play zoom-in.
- Maintain a view stack; push => slide-in-right, pop => slide-in-left; tab swap => cross-fade.