html,body{overflow:hidden;height:100%}.hero{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;touch-action:none}.hero .panel{position:relative;width:100%;height:100%;background:var(--color-bg);overflow:hidden}.hero .belt{position:absolute;top:0;right:0;bottom:0;left:0}.hero .name{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.hero .name img{display:block;width:100%;height:100%}.hero .item{position:absolute;top:0;left:0;width:340px;height:425px;will-change:transform,opacity}.hero .item .frame{width:100%;height:100%;overflow:hidden;transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1)}.hero .item .frame.frame-enter{opacity:0;transform:translateY(40px)}.hero .item .img{width:100%;height:100%;background-size:cover;background-position:center}