@keyframes step1-to-top{0%{margin-top:0;opacity:1}50%{margin-top:0;opacity:1}to{margin-top:100px;opacity:0}}@keyframes step2-to-top{0%{margin-top:50px;opacity:0}50%{margin-top:0;opacity:1}90%{margin-top:0;opacity:1}to{margin-top:50px;opacity:0}}@keyframes step3-to-top{0%{opacity:0}20%{opacity:1}99%{opacity:1}to{opacity:0}}@keyframes step4-to-top{0%{width:0;overflow:visible}30%{width:276px;overflow:visible}to{width:276px;overflow:visible}}@keyframes twincle{0%{opacity:1}50%{opacity:1}51%{opacity:0}to{opacity:0}}@keyframes playbtn{0%{border:50px solid #8900d7;transform:rotate(-90deg)}to{border:20px solid #8900d7;transform:rotate(0)}}@keyframes cursor{0%{top:120px;left:120px}50%{top:80px;left:100px}to{top:60px;left:60px}}@keyframes itemyellow{0%{transform:rotate(-90deg);opacity:0}to{transform:rotate(0);opacity:1}}@keyframes screen-up{0%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes screen-inner-up{0%{margin-top:50px;opacity:0}to{margin-top:0;opacity:1}}.panghabo-page-wrapper{flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}.panghabo-page-wrapper,.panghabo-wrapper{display:flex;height:100%;align-items:center}.panghabo-wrapper{font-family:Raleway Bold,Helvetica,Arial;background-color:#fff;color:#8900d7;justify-content:center;width:100%}.step-1{display:flex;align-items:center;position:absolute;font-size:50px;font-weight:700;animation:step1-to-top .5s linear .2s forwards;opacity:0}.step-1 .round{animation:twincle .35s linear .2s infinite alternate;background-color:#8900d7;height:50px;width:50px;border-radius:100px;margin-right:10px}.step-2{position:absolute}.step-2 .wrapper{position:relative;margin-bottom:50px;animation:step2-to-top .6s linear .7s forwards;opacity:0;transform-style:preserve-3d}.step-2 .bottom{height:180px;width:300px;background-color:#8900d7;border-radius:15px}.step-2 .cover{position:absolute;height:165px;width:300px;background-color:#fff}.step-2 .screen{height:155px;width:240px;background-color:#8900d7;border-radius:10px;position:absolute;top:0;left:30px;z-index:1;transform:rotateX(-90deg);transform-origin:bottom;transform-style:preserve-3d;animation:screen-up .1s linear .8s forwards}.step-2 .screen,.step-2 .screen-inner{display:flex;align-items:center;justify-content:center}.step-2 .screen-inner{width:220px;height:135px;background-color:#fff;border-radius:7px;position:relative;overflow:hidden}.step-2 .screen-inner .round{height:90px;width:90px;border-radius:90px;background-color:#8900d7;position:absolute;opacity:0;animation:screen-inner-up .1s linear .9s forwards}.step-2 .screen-inner .triangle-wrapper{z-index:1;display:flex;flex-direction:column;align-items:center;position:absolute;top:60px;opacity:0;animation:screen-inner-up .1s linear 1s forwards}.step-2 .screen-inner .triangle-wrapper .triangle{width:0;height:0;border-bottom:30px solid #000;border-left:30px solid transparent;border-right:30px solid transparent}.step-2 .screen-inner .triangle-wrapper .rectangle{margin-top:-1px;height:50px;width:30px;background-color:#000}.step-3{position:absolute}.step-3 .wrapper{position:relative;opacity:0;animation:step3-to-top .6s linear 1.3s forwards}.step-3 .play-btn{animation:playbtn .2s linear 1.3s forwards;transform:rotate(-90deg);height:140px;width:140px;background-color:#fff;border:10px solid #8900d7;border-radius:140px;display:flex;justify-content:center;align-items:center}.step-3 .play-btn .triangle{width:0;height:0;border-left:60px solid #8900d7;border-bottom:35px solid transparent;border-top:35px solid transparent;margin-left:20px}.step-3 .arrow-wrapper{position:absolute;transform:rotate(-40deg);top:120px;left:120px;z-index:1;animation:cursor .15s linear 1.5s forwards}.step-3 .arrow-wrapper .arrow{display:flex;flex-direction:column;align-items:center}.step-3 .arrow-wrapper .arrow .triangle{width:0;height:0;border-bottom:30px solid #8900d7;border-left:25px solid transparent;border-right:25px solid transparent;position:relative;display:flex;justify-content:center}.step-3 .arrow-wrapper .arrow .triangle:before{content:"";position:absolute;top:1px;width:0;height:0;border-bottom:28px solid #000;border-left:23px solid transparent;border-right:23px solid transparent}.step-3 .arrow-wrapper .arrow .rectangle{height:30px;width:22px;background-color:#8900d7;position:relative}.step-3 .arrow-wrapper .arrow .rectangle:before{content:"";position:absolute;margin-top:-2px;left:1px;height:31px;width:20px;background-color:#000}.step-4{position:absolute;width:0;overflow:hidden;animation:step4-to-top 1s ease 2s forwards}.step-4 .wrapper{display:flex;flex-direction:column;width:350px}.step-4 .title{font-size:77px;font-weight:700;line-height:100px}.step-4 .title .black{color:#000;display:inline-block}.step-4 .title .yellow{color:#000}.step-4 .title .white,.step-4 .title .yellow{background-color:#8900d7;border-radius:15px;padding:0 10px;margin-left:10px;display:inline-block;animation:itemyellow .3s ease 2.2s forwards;transform:rotate(-90deg);transform-origin:20% 50%;opacity:0}.step-4 .title .white{color:#fff}.btn-wrapper{position:absolute;padding:40px;width:100%;bottom:0;display:flex;justify-content:space-between;align-items:center;flex-direction:row-reverse}.restart-btn{padding:10px 24px;border-radius:9999px;background-color:#8900d7;color:white;border:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.restart-btn:hover:not(:disabled){background-color:#7000b8;transform:scale(1.05)}.restart-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width:768px){.step-1{font-size:30px}.step-1 .round{height:30px;width:30px;margin-right:7px}.step-2 .bottom{height:108px;width:180px;border-radius:10px}.step-2 .cover{height:99px;width:180px}.step-2 .screen{height:93px;width:144px;border-radius:7px;left:18px}.step-2 .screen-inner{width:132px;height:81px;border-radius:5px}.step-2 .screen-inner .round{height:54px;width:54px}.step-2 .screen-inner .triangle-wrapper{top:36px}.step-2 .screen-inner .triangle-wrapper .triangle{border-bottom:18px solid #000;border-left:18px solid transparent;border-right:18px solid transparent}.step-2 .screen-inner .triangle-wrapper .rectangle{height:30px;width:18px}.step-3 .play-btn{height:84px;width:84px;border-width:7px}.step-3 .play-btn .triangle{border-left:36px solid #8900d7;border-bottom:21px solid transparent;border-top:21px solid transparent;margin-left:12px}.step-3 .arrow-wrapper{top:72px;left:72px}.step-3 .arrow-wrapper .arrow .triangle{border-bottom:18px solid #8900d7;border-left:15px solid transparent;border-right:15px solid transparent}.step-3 .arrow-wrapper .arrow .triangle:before{border-bottom:17px solid #000;border-left:14px solid transparent;border-right:14px solid transparent}.step-3 .arrow-wrapper .arrow .rectangle{height:18px;width:13px}.step-3 .arrow-wrapper .arrow .rectangle:before{height:19px;width:12px}@keyframes step4-to-top-mobile{0%{width:0;overflow:visible}30%{width:166px;overflow:visible}to{width:166px;overflow:visible}}.step-4{animation:step4-to-top-mobile 1s ease 2s forwards}.step-4 .wrapper{width:210px}.step-4 .title{font-size:46px;line-height:60px}.step-4 .title .white,.step-4 .title .yellow{padding:0 6px;margin-left:6px;border-radius:10px}}