body,html,#root{margin:0;height:100%;overflow:hidden;font-family:sans-serif;background:#000}.app{width:100%;height:100%;position:relative}.split{display:flex;width:200%;height:100%;transform:translate(-25%);transition:transform .4s ease-out;will-change:transform}.side{width:50%;height:100%}.blue{background:#4da6ff}.pink{background:#ff6fa5}.overlay{position:absolute;z-index:10;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000000b3;color:#fff}.overlay button{padding:15px 30px;font-size:20px;margin-top:20px;border-radius:2em}.message{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;color:#fff;background:transparent;z-index:9;padding-top:5em;padding-bottom:5em;opacity:0;transform:translateY(10px);transition:opacity 1.8s ease,transform 1.8s ease}.message.show{opacity:1;transform:translateY(0)}.message h1{font-size:70px;color:#fff;margin:5px 0;text-shadow:0 0 10px #fff,0 0 30px #ff9ac2,0 0 60px #ff6fa5,0 0 120px #ff6fa5}.name{opacity:0;transform:translateY(20px);transition:opacity 1.2s ease,transform 1.2s ease;will-change:opacity,transform}.name.show{opacity:1;transform:translateY(0)}@keyframes glowPulse{0%{text-shadow:0 0 10px #fff,0 0 20px #ff9ac2,0 0 40px #ff6fa5}50%{text-shadow:0 0 20px #fff,0 0 40px #ffb3d1,0 0 80px #ff6fa5}to{text-shadow:0 0 10px #fff,0 0 20px #ff9ac2,0 0 40px #ff6fa5}}.message.show h1{animation:glowPulse 2.5s ease-in-out infinite;animation-delay:2s}canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,2px)}75%{transform:translate(2px,2px)}to{transform:translate(0)}}.shake{animation:shake .3s ease}