*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{background:#fff;justify-content:center;align-items:center;font-family:Arial,Helvetica,sans-serif;display:flex;overflow:hidden}#root{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.music-player{flex-direction:column;align-items:center;gap:30px;display:flex;position:relative}.anime-image{object-fit:cover;border-radius:20px;width:400px;height:500px;box-shadow:0 0 30px #fff3}.play-button{color:#000;cursor:pointer;background:#ff0c0c;border:none;border-radius:10px;padding:15px 40px;font-size:18px;font-weight:700;transition:all .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.play-button:hover{transform:translate(-50%,-50%)scale(1.05)}.timeline1{pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0;overflow:hidden}.timeline1-image{object-fit:cover;opacity:0;width:auto;height:900px;box-shadow:0 0 40px #ffffff26}.timeline1-text{z-index:5;flex-direction:column;align-items:center;gap:0;display:flex;position:absolute;top:600px;right:500px}.word{color:#fff;text-align:center;opacity:0;-webkit-text-stroke:6px black;text-shadow:6px 6px #000;font-family:Arial Black,sans-serif;font-size:65px;font-weight:900;line-height:.9;transform:rotate(-3deg)}.timeline1-overlay{background:radial-gradient(circle,#0000 40%,#0009);position:absolute;inset:0}.timeline2{pointer-events:none;position:absolute;inset:0;overflow:hidden}.timeline2-image{object-fit:cover;opacity:0;width:auto;height:1000px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(1.2);box-shadow:0 0 40px #ffffff26}.timeline2-text{z-index:10;gap:20px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.normal-word{color:#fff;opacity:0;text-shadow:0 0 20px #000c;font-size:50px;font-weight:600}.timeline3{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.timeline3-image{object-fit:cover;opacity:0;width:auto;height:1000px;position:absolute;left:100px;transform:translate(-400px);box-shadow:0 0 40px #ffffff26}.timeline3-text{z-index:10;flex-direction:column;align-items:center;display:flex;position:absolute;right:350px}.kapan-box{color:#000;opacity:0;background:#fff;padding:10px 30px;font-size:70px;font-weight:700;transform:translateY(-100px);box-shadow:8px 8px #0003}.dimana-wrapper{position:relative}.dimana-box{color:#fff;opacity:0;background:#6d6dfd;padding:20px 40px;font-size:80px;font-weight:700;transform:translateY(-100px);box-shadow:8px 8px #0003}.dan-box{color:#000;-webkit-text-stroke:5px black;opacity:0;font-size:100px;font-weight:700;position:absolute;top:-20px;right:-30px;transform:translateY(-100px)rotate(-20deg)}.timeline4{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.timeline4-image{object-fit:cover;opacity:0;border:9px solid #000;border-radius:12px;width:450px;height:550px;position:absolute;transform:scale(1.3);box-shadow:0 0 0 3px #ffffff26,0 0 40px #ffffff26}.timeline4-text{z-index:10;flex-direction:column;align-items:center;width:100%;display:flex;position:absolute}.timeline4-word{color:#000;opacity:0;text-shadow:0 0 30px #000c;font-size:50px;font-weight:900;line-height:.9;position:absolute;top:350px;transform:translateY(100px)}.transisi1{opacity:0;z-index:999999;pointer-events:none;background:#fff;width:100%;height:100%;position:fixed;top:0;left:0}.timeline5{z-index:5;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.timeline5-image{object-fit:cover;opacity:0;border:4px solid #fff;width:900px;height:auto;position:absolute;box-shadow:0 0 30px #fff3}.timeline5-image2{object-fit:cover;opacity:0;border:4px solid #fff;width:500px;height:auto;position:absolute;box-shadow:0 0 30px #fff3}.timeline5-text{z-index:20;flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex;position:absolute}.timeline5-text h1{opacity:0;text-shadow:0 0 20px #000000b3;font-size:100px;font-weight:900;transform:translateY(100px)}.malam-minggu1{color:red;-webkit-text-stroke:6px #8f0606;text-shadow:6px 6px #3d0c0c;position:absolute;top:-300px;right:-500px;transform:rotate(-3deg)}.malam-minggu2{color:#0026ff;-webkit-text-stroke:6px #06148f;text-shadow:6px 6px #390c3d;position:absolute;top:-200px;left:-500px;transform:rotate(-3deg)}.text-ahir{color:#dfdfdf;-webkit-text-stroke:6px #8f8f06;text-shadow:6px 6px #fff;position:absolute;top:-200px}.text-ahir h1{width:100%;font-size:80px}.timeline6{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.timeline6-image{object-fit:cover;opacity:0;border:4px solid #fff;width:500px;height:auto;position:absolute;box-shadow:0 0 40px #ffffff40}.timeline6-text{color:#fff;opacity:0;text-shadow:0 0 20px #000000b3;font-size:80px;font-weight:900;position:absolute;bottom:80px}.app{transform-origin:50%;flex-shrink:0;width:1080px;height:1080px;position:relative;overflow:hidden}