.kap, .curtain_R {
    position: fixed; 
    top: 0; left: 0; 
    height: 100%; width: 50%; 
    background: black;
    z-index: 4;
}

.curtain_R {transform: translate(100%); z-index: 4;}
.kap.animate {animation: keppo 2s cubic-bezier(0.8, 0, 0.2, 1) forwards;}
.curtain_R.animate {animation: kepena 2s cubic-bezier(0.8, 0, 0.2, 1) forwards;}

@keyframes keppo {to{transform: translate(-100%);}}
@keyframes kepena {to{transform: translate(200%);}}

.Neofetch {
  position: fixed;
  top: -260px; left: -100px;
  transform: scale(50%);
  opacity: 0;
  z-index: 6;
  animation: del_in 0.8s linear 0.4s forwards,
  oppai 0s linear 0.5s forwards;
}

body.scrolled_J .Neofetch {
  animation: del_out 0.75s linear 0s forwards, 
  oppai 0s linear 0.5s forwards;
}

@keyframes oppai {to{opacity: 1;}}

@keyframes del_in {
  from {clip-path: inset(0 0 1250px 0);} 
  to {clip-path: inset(0 0 0 0);}
}

@keyframes del_out {
  from {clip-path: inset(0 0 0 0);} 
  to {clip-path: inset(0 0 1250px 0);}
}

@keyframes typing_3 {from {width: 0;} to {width: 40ch;}}
:root { --Main-text-H: 400px; --Main-text-V: 100px; }

pre[class^="L"], pre.booted {
  position: fixed;
  left: calc(15px + var(--Main-text-H));
  top: calc(15px + var(--Main-text-V));
  font-family: monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre;
  overflow: hidden;
  width: 0;
  z-index: 6;
  animation:
    typing_3 0.1s steps(20, end) 1.5s forwards,
    blink 1.8s step-end 2s infinite;
}

pre.L1 { font-size: 0.9rem; }
pre.L2 { top: calc(50px + var(--Main-text-V)); animation-delay: 1.55s; }
pre.L3 { top: calc(65px + var(--Main-text-V)); animation-delay: 1.6s; }
pre.L5 { top: calc(175px + var(--Main-text-V)); animation-delay: 3s; }
pre.L6 { top: calc(190px + var(--Main-text-V)); animation-delay: 3.02s; }
pre.L7 { top: calc(205px + var(--Main-text-V)); animation-delay: 3.04s; }
pre.L8 { top: calc(220px + var(--Main-text-V)); animation-delay: 3.06s; }
pre.L9 { top: calc(280px + var(--Main-text-V)); animation-delay: 3.2s; }
pre.LA { top: calc(305px + var(--Main-text-V)); animation-delay: 3.3s; }
pre.LB { top: calc(320px + var(--Main-text-V)); animation-delay: 3.31s; }
pre.LC { top: calc(335px + var(--Main-text-V)); animation-delay: 3.32s; }
pre.LD { top: calc(400px + var(--Main-text-V)); animation-delay: 3.8s; }
pre.LG { top: calc(420px + var(--Main-text-V)); animation-delay: 6s; }
pre.LE { animation-delay: 5s; animation-duration: 5s; }

pre.booted {
  top: calc(420px + var(--Main-text-V)); 
  animation-delay: 10.5s;
  animation-duration: 1.5s;
}

pre.LF, pre.LE {
  top: calc(400px + var(--Main-text-V)); 
  left: calc(130px + var(--Main-text-H));
  animation-delay: 4s;
}

pre.L4 {
  top: calc(150px + var(--Main-text-V));
  animation-delay: 2.2s;
  animation-duration: 0.04s;
}

pre[class*="Z"] {
  left: calc(260px + var(--Main-text-H));
  color: rgb(0, 255, 64);
  font-size: 0.65rem;
}

pre.LZ  { top: calc(175px + var(--Main-text-V)); animation-delay: 4.5s; }
pre.LZa { top: calc(190px + var(--Main-text-V)); animation-delay: 5s; }
pre.LZb { top: calc(205px + var(--Main-text-V)); animation-delay: 5.8s; }
pre.LZc { top: calc(220px + var(--Main-text-V)); animation-delay: 6s; }
pre.LZd { top: calc(305px + var(--Main-text-V)); animation-delay: 4.9s; }
pre.LZe { top: calc(320px + var(--Main-text-V)); animation-delay: 5.8s; }
pre.LZf { top: calc(335px + var(--Main-text-V)); animation-delay: 6.4s; }

pre.loader, pre.loaderx, pre.loadery, pre.loaderz {
  position: fixed;
  color: white;
  z-index: 6;
  opacity: 0;
  animation: bruh 1.25s steps(2) 6.25s;
  animation-iteration-count: 3;
}

pre.loader {
  left: calc(65px + var(--Main-text-H));
  top: calc(417px + var(--Main-text-V));
}

pre.loadery {
  left: calc(130px + var(--Main-text-H));
  top: calc(146px + var(--Main-text-V));
  animation-iteration-count: 3;
  animation-delay: 2.5s;
}

pre.loaderx {
  left: calc(198px + var(--Main-text-H));
  top: calc(276px + var(--Main-text-V));
  animation-iteration-count: 3;
  animation-delay: 3.5s;
}

pre.loaderz {
  left: calc(195px + var(--Main-text-H));
  top: calc(17px + var(--Main-text-V));
  animation-iteration-count: 8;
  animation-delay: 1.8s;
}

@keyframes bruh {
  0% {opacity: 1; transform: rotate(0deg) scale(90%);}
  50% {opacity: 1; transform: rotate(90deg) scale(90%);}
  100% {opacity: 1; transform: rotate(180deg) scale(90%);}
}

body.scrolled_J pre[class^="L"], .scrolled_J pre.booted,
body.scrolled_J pre[class^="loader"] {
  opacity: 0 !important;
  animation: none !important;
}

pre[class^="PVL"] {
  position: fixed;
  left: calc(200px + var(--Main-text-H));
  top: calc(400px + var(--Main-text-V));
  font-family: monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre;
  overflow: hidden;
  width: 0;
  z-index: 6;
}

pre.PVL34 { animation: typing_3 1s steps(20, end) 4s forwards, ontoff 0s linear 4.3s forwards; }
pre.PVL58 { animation: typing_3 1s steps(20, end) 4.28s forwards, ontoff 0s linear 4.68s forwards; }
pre.PVL72 { animation: typing_3 1s steps(20, end) 4.7s forwards, ontoff 0s linear 5.18s forwards; }
pre.PVL99 { animation: typing_3 1s steps(20, end) 5.2s forwards, ontoff 0s linear 5.8s forwards; }
pre.PVL100 { animation: typing_3 0s steps(20, end) 5.8s forwards;}

.scrolled_J pre[class^="PVL"] {opacity: 0;}
@keyframes ontoff { to {opacity: 0;}}
:root { --top-add: 60vh;}

[class*="Arrow"] {
  position: fixed;
  left: 50vw;
  width: 5px; height: 30px;
  transform: rotate(45deg);
  background-color: white;
  z-index: 6;
  border-radius: 2px;
  animation: 
    wave 1.6s cubic-bezier(.32, .16, .16, 1) 12s infinite,
    waveop 1.6s cubic-bezier(.32, .16, .16, 1) 12s infinite;
}

.Arrow_R {
  transform: rotate(-45deg);
  left: calc(50vw - 19px);
}

@keyframes wave {
  from { top: calc(var(--top-add) - 120px); }
  to { top: calc(var(--top-add) - 30px); }
}

@keyframes waveop {
  0% { filter: brightness(0); }
  10% { filter: brightness(0.1) }
  50% { filter: brightness(1); }
  100% { filter: brightness(0); }
}

.View {
  position: fixed;
  top: calc(var(--top-add));
  left: calc(50vw - 80px);
  font-size: 1.5rem;
  z-index: 6;
  opacity: 0;
  font-family: Manro;
  color: white;
  animation: fadeInUp 1s ease 12s forwards;
}

.scrolled_J [class*="Arrow"],
.scrolled_J .View {animation: none;}

.SObl {
  position: fixed;
  top: -230px; right: -600px;
  transform: scale(80%) rotate(30deg);
  z-index: 6;
  opacity: 0.5;
}

.scrolled_J .SObl {display: none; top: -2000px;}

@media (max-aspect-ratio: 1/1) {
  pre.Notice_head, pre.Notice_bod {
    position: fixed;
    bottom: 200px; left: calc(50vw - 310px);
    color: rgb(207, 221, 255);
    font-family: Manro;
    font-size: 1.5rem;
    opacity: 0.8;
    z-index: 6;
    text-align: center;
    transition: opacity 1s, font-size 1s, left 1s, bottom 1s;
  }
  
  pre.Notice_bod {
    color: white;
    font-size: 1.3rem;
    bottom: 100px;
    left: calc(50vw - 328px);
  }
}

.scrolled_J pre.Notice_head {
  opacity: 0.4;
  font-size: 1.1rem;
  left: 113px;
  bottom: 220px;
}

.scrolled_J pre.Notice_bod {
  opacity: 0.4;
  font-size: 1rem;
  bottom: 150px;
  left: 100px;
}