.smart-frame-container{position:relative;width:100%;max-width:470px;height:300px;margin:0 auto;overflow:hidden;display:flex;justify-content:center;align-items:flex-start}.smart-frame-image{position:absolute;width:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;left:0;top:0;opacity:0;transition:opacity 1s cubic-bezier(.4,1,.6,1);pointer-events:none;height:200px;z-index:0}.smart-frame-active{opacity:1;z-index:2}.smart-frame-active.smart-frame-last{animation:revealFromTopLeft 1.5s ease-out forwards}.smart-frame-active.smart-frame-last,.smart-frame-exit{opacity:1;z-index:3;height:auto;transform-origin:top left}.smart-frame-exit{animation:hideToTopLeft 1.5s ease-in forwards}@keyframes revealFromTopLeft{0%{clip-path:polygon(0 0,200px 0,200px 200px,0 200px);opacity:0;transform:scale(.95)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;transform:scale(1)}}@keyframes hideToTopLeft{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;transform:scale(1)}to{clip-path:polygon(0 0,200px 0,200px 200px,0 200px);opacity:0;transform:scale(.95)}}.four-frame-wrapper{position:relative;width:100%;max-width:470px;height:300px;margin:0 auto;overflow:hidden;display:flex;justify-content:center;align-items:flex-start}.four-frame{position:absolute;width:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;left:0;top:0;opacity:0;transition:opacity 1s cubic-bezier(.4,1,.6,1);pointer-events:none;height:200px}.four-frame.active{opacity:1;z-index:1}.four-frame.last-frame{width:100%;height:auto;top:0}.four-frame.last-frame.active{animation:curtainHalfDown 4s cubic-bezier(.51,2,.51,.1) forwards;opacity:1;clip-path:inset(0 0 50% 0)}@keyframes curtainHalfDown{0%{clip-path:inset(0 0 50% 0);opacity:.5}to{clip-path:inset(0 0 0 0);opacity:1}}.four-frame.last-frame.last-frame-exit{animation:curtainTopDown 3s cubic-bezier(.51,2,.51,.1) forwards;clip-path:inset(0 0 0 0);opacity:1}@keyframes curtainTopDown{0%{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(0 0 100% 0);opacity:.5}}.frame-wrapper{position:relative;height:200px;overflow:hidden;border-radius:12px}.frame{position:absolute;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;opacity:0;transition:opacity 1s linear;clip-path:inset(0 0 0 0)}.frame.active{opacity:1}.reveal-down{animation:revealTopDown 3s linear forwards}@keyframes revealTopDown{0%{clip-path:inset(0 0 100% 0);opacity:1}to{clip-path:inset(0 0 0 0);opacity:1}}.variant4-exit{animation:variant4FadeOut 1s linear forwards}@keyframes variant4FadeOut{0%{opacity:1}to{opacity:0}}.variant6-enter{transform-origin:center;animation:variant6ScaleIn 1s linear forwards}@keyframes variant6ScaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.variant6-exit{animation:variant6Exit 1s linear forwards}@keyframes variant6Exit{0%{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(100% 0 0 0);opacity:0}}