@font-face {font-family: Manro; src: url(Manrope-Light.ttf)}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #171a1d;
  height: 15000px;
  margin: 0;
}

#FP1, #FP2 {
  opacity: 0; filter: blur(4px);
  font-family:  Manro;
  transform: translate(50px, 50px);
  transition: opacity, transform, filter, 1s ease;
  font-size: clamp(1rem, 1.5vh, 2vh);
  z-index: 2;
}

/* ==Hero Title== */
body.scrolled_A #FP1,.scrolled_B #FP2 {
  opacity: 0.85; filter: blur(0); transform: translate(50px, 0);
}

.Hero_Title_T, .Hero_Title_T2, .Hero_Title_B {
  font-size: 1.7rem;
  font-family: sans-serif, Arial;
  color: white;
  position: fixed;
  top: 0; left: 0;
  opacity: 0;
  z-index: 2;
  transform: translateX(calc(50vw - 230px));
}

.Hero_Title_T2 { left: 45px; }
.Hero_Title_B { transform:
  translate(calc(50vw - 130px), 60px); 
  font-size: 1rem;
}

body.scrolled_J .Hero_Title_T, 
.Hero_Title_T2, .scrolled_J .Hero_Title_B
{animation: flickerIn 0.3s linear 2.5s forwards;}

/* ==Hero Text== */
:root { 
  --offset-dy: 10vw; 
  --offset-st: 0px;
  --offset-left: -100px;
}

#Hero_1, .Hero_2, #Hero_h, #PH_1, .PH_2, 
#PH_c, #PH_v, #PH_v1, #yellow_bebber, #Pa, #Pb {
  font-size: 3.4rem;
  font-family: Manro;
  position: fixed;
  top: 0; left: 100px;
  width: 90vw;
  color: white;
  opacity: 0;
  z-index: 2;
  filter: blur(4px);
  text-wrap: balance;
  transition: opacity, filter, transform, 1s ease; 
  transform: translate(calc(var(--offset-dy) + var(--offset-st)),
   calc(30vh + 50px));
}

#Hero_h, #PH_c {
  transform: translate(calc(var(--offset-dy) + var(--offset-st)), 
  calc(30vh + 150px)); font-size: 2.75rem;
}

#Pa {font-size: 2.7rem; left: 20px; top: 20px;}
#Pb {font-size: 2.2rem; left: 30px; top: 300px;}
#Hero_1, #PH_1, .PH_2, .Hero_2, #Pa {color: rgb(207, 221, 255);}
#PH_1, .PH_2, .Hero_2 {font-size: 2.7rem; left: var(--offset-left);}
#PH_c {font-size: 2.2rem; top: 60px; left: var(--offset-left);}
#PH_v {font-size: 2rem; top: 240px; left: var(--offset-left);}
#PH_v1 {font-size: 2rem; top: 350px; left: var(--offset-left);}
#yellow_bebber {font-size: 2.2rem; top: 200px; left: var(--offset-left);}
.PH_2, .Hero_2 {top: -60px;}
#Hero_1, #Hero_h {left: -50px;}
#PH_v {font-size: 2.2rem; top: 120px; left: calc(var(--offset-left) + 15px);}

@media (max-aspect-ratio: 1/1) {
  .Hero_Title_T, .Hero_Title_B { display: none; }
  #Hero_1 { text-align: center; left: -200px; }
  #Hero_h { text-align: center; left: -290px; }
  .Hero_2, #PH_1 { text-align: center; left: -180px; font-size: 2rem; }
  #yellow_bebber { text-align: center; left: -180px; top: 150px; font-size: 1.8rem; }
  #PH_c, .PH_2, #PH_v { text-align: center; top: 20px; left: -190px; font-size: 1.8rem; }
  .PH_2 { font-size: 2rem; top: -20px; }
  #PH_v { top: 100px; }
}

/* ==Scroll Triggers== */
body.scrolled_K #Hero_h, .scrolled_X #PH_c {
  transform: translate(calc(var(--offset-dy) + var(--offset-st)), 
  calc(30vh + 100px)); opacity: 1; filter: blur(0);
}

body.scrolled_K #Hero_1, .scrolled_R #yellow_bebber, 
.scrolled_R .Hero_2, .scrolled_X #PH_1, .scrolled_Y .PH_2, 
.scrolled_Y #PH_v, .scrolled_Y #PH_v1, .scrolled_I #Pa, .scrolled_I #Pb
{
  transform: translate(calc(var(--offset-dy) + var(--offset-st)),
  calc(30vh - 30px)); opacity: 1; filter: blur(0);
}

.HeroJ_container.animate-q,
.Hero_container_1.animate, 
body.scrolled_I .np_container
{
  animation: fadeInUp 1s ease 4.8s forwards;
  z-index: 2; opacity: 0;
  position: fixed;
  top: 0; left: 100px;
}

.HeroJ_container.animate-q
{animation: fadeInUp 1s ease 2s forwards;}

body.scrolled_I .np_container
{animation: fadeInUp 1s ease 25s forwards; opacity: 0;}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
  }
  to {
    opacity: 0.85;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ==Logo image== */
.flicker-image {
  position: fixed;
  top: -166px; left: -190px;
  opacity: 0;
  height: 500px; width: 500px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  display: block;
  transform: scale(0.2);
  z-index: 2;
}

.flicker-image.animate 
{animation: flickerIn 0.3s linear 1.5s forwards;}

/* ==Logo Text== */
.letter, .letter_2, .letter_3 {
  position: fixed;
  top: 0; left: 0;
  opacity: 0;
  font-size: 0.7rem;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  transform: translate(100px, 30px);
  white-space: nowrap;
}

:root {--delay: 2s}
.letter_2 {transform: translate(100px, 65px);}
.letter_3 {transform: translate(100px, 100px);}
body.animate #N  { animation: burst 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 0px; }
body.animate #E  { animation: burst 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 20px; }
body.animate #U  { animation: burst 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 40px; }
body.animate #R { animation: burst 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 60px; }
body.animate #A  { animation: burst 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 80px; }
body.animate #L { animation: burst 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 100px; }

body.animate #E1  { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 0px; }
body.animate #M1  { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 20px; }
body.animate #U1  { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 40px; }
body.animate #L1 { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 60px; }
body.animate #A1  { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 80px; }
body.animate #T1 { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 100px; }
body.animate #I1  { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 122px; }
body.animate #O1  { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 140px; }
body.animate #N1  { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 160px; }
body.animate #S1 { animation: burst_2 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 180px; }

body.animate #C2  { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 0px; }
body.animate #O2 { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 20px; }
body.animate #R2  { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 40px; }
body.animate #P2 { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 60px; }
body.animate #dot { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 77px; }

@keyframes burst {to{opacity: 0.8; transform: translate(calc(110px + var(--dx)), 30px);}}
@keyframes burst_2 {to{opacity: 0.8; transform: translate(calc(110px + var(--dx)), 65px);}}
@keyframes burst_3 {to{opacity: 0.8; transform: translate(calc(110px + var(--dx)), 100px);}}
@keyframes QC {to{top: 0px;}}

@keyframes flickerIn {
  0%   { opacity: 1; filter: brightness(50%); }
  20%   { opacity: 0; }
  30%  { opacity: 1; filter: brightness(20%); }
  30%  { opacity: 1; filter: brightness(0%); }
  30%  { opacity: 1; filter: brightness(1%); }
  50%  { opacity: 1; filter: brightness(100%); }
  50%  { opacity: 1; filter: brightness(50%); }
  50%  { opacity: 1; filter: brightness(40%); }
  50%  { opacity: 1; filter: brightness(100%); }
  50%  { opacity: 1; filter: brightness(100%); }
  60%  { opacity: 0; }
  100% { opacity: 0.8; filter: none; }
}

.AA.animate {animation: QC 2.5s cubic-bezier(0.8, 0, 0.2, 1) 2s forwards;}

.AA {
  height: 100%; width: 100%;
  position: fixed;
  left: 0; top: 100%;
  background-color: black;
  z-index: -1;
}

/* ==About== */
.Para_container_1 {  
  animation: fadeInUp 1s ease 4.8s forwards;
  z-index: 2; opacity: 0;
  position: fixed;
  top: 0; left: 100px;
}

#Para_x1, #Para_2, #Para_3, #Para_4, #Para_5, #c418, #QEC,
#Para_1k, #Para_xk, #Para_xx, #Para_1a, #Para_2a, #mail,
#Para_1b, #Para_4a, #Para_2ak, #Para_x1k, #Para_3ks, #CEO
{
  font-size: clamp(1.5rem, 1.75vw, 2rem);
  font-family: Manro;
  position: fixed;
  top: 0; left: 0;
  color: white;
  opacity: 0;
  width: 85vw;
  text-wrap: balance;
  filter: blur(4px);
  transition: opacity, filter, transform, 1s ease; 
  transform: translate(calc(var(--offset-dy) + var(--offset-st)),
   calc(30vh + 50px));
}

#Para_x1, #Para_4, #Para_3ks {top: 50px;}
#Para_1b, #Para_2ak {top: 200px; left: -25px;}
#Para_2a, #Para_4 {top: 150px; left: -25px;}
#Para_1k {top: 170px; left: -35px;}
#Para_1a, #Para_1, #Para_2, #Para_3,
#Para_5, #Para_4a, #Para_x1 {left: -35px;}
#Para_xx {left: -50px;}
#Para_x1 {left: -85px;}
#Para_xk {left: -110px;}
#Para_x1k {left: -95px; top: 150px;}

#Para_2, #Para_xx, #Para_xk, #Para_1a, #Para_4a
{color: rgb(207, 221, 255); font-size: 2.5rem;}

#CEO {color: rgb(207, 221, 255); font-size: 3rem;}
#QEC {top: 95px; left: 5px; font-size: 1.8rem;}
#mail {top: 220px; left: 5px; font-size: 1.6rem;}
#c418 {
  top: 265px; left: -30px;
  font-size: 1.4rem;
  color: rgb(225, 234, 255);
}

body.animate-7 #Para_x1, .animate-7 #Para_1k, .scrolled_1a #Para_2, 
.scrolled_1a #Para_2a, .scrolled_1a #Para_2ak, .scrolled_1 #Para_1a, 
.scrolled_2 #Para_3, .scrolled_3 #Para_4, .scrolled_3 #Para_4a,
.animate-7 #Para_x1k, .animate-7 #Para_xx, .animate-7 #Para_xk,
.scrolled_1 #Para_1b, .scrolled_qq #Para_5, .scrolled_2 #Para_3ks
{
  transform: translate(calc(var(--offset-dy) + var(--offset-st)),
  calc(30vh - 30px)); opacity: 0.85; filter: blur(0);
}

 #CEO, #QEC, #mail, #c418 {
animation: nre 1s ease 3s forwards;
}

@keyframes nre {
  from {
    transform: translate(calc(var(--offset-dy) + 
    var(--offset-st)),calc(30vh + 50px));
  } to {
    transform: translate(calc(var(--offset-dy) + 
    var(--offset-st)),calc(30vh - 30px)); 
    opacity: 0.85; filter: blur(0);}
 }

/*
body.scrolled_1a [id*="2"] pre,
.animate-7 [id*="x"] pre, .scrolled_2 #Para_3 pre,
.animate-1 [id*="1"] pre, .scrolled_3 #Para_4a pre,
.animate-3 [id*="4"] pre, .scrolled_qq #Para_5 pre
*/

[class^="J"] pre, [class^="K"] pre, 
[class^="Q"] pre, [class^="B"] pre,
[class^="M"] pre, [class^="V"] pre {
  position: fixed; 
  right: calc(180px + var(--shift-h));
  font-family: monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre;
  overflow: hidden;
  width: 0ch;
  display: inline-block;
  z-index: 6;
  opacity: 0;
}

.More {
  position: fixed;
  bottom: 50px; left: calc(40vw - 230px);
  color: white;
  font-family: Manro;
  font-size: 1.25rem;
  opacity: 0;
  z-index: 2;
  text-align: center;
  filter: blur(4px);
  transition: opacity 1s, filter 1s;
}

.scrolled_TT .More {
  opacity: 0.6;
  filter: blur(0px);
}

/*
:root {--shift-v: 40px; --shift-h: 80px; --dx: 20px;}

.J12 pre { top: calc(var(--dx) * 2 + var(--shift-v)); }
.J13 pre { top: calc(var(--dx) * 3 + var(--shift-v)); }
.K13 pre { top: calc(var(--dx) * 4 + var(--shift-v)); }

.K12 pre { top: calc(var(--dx) * 2 + 10px + var(--shift-v)); }
.K11 pre, .J11 pre { top: calc(var(--dx) * 1 + var(--shift-v)); }
.K14 pre, .J14 pre { top: calc(var(--dx) * 4 + var(--shift-v)); }

.Q11 pre, .B11 pre { top: calc(var(--dx) * 6 + var(--shift-v)); }
.Q12 pre, .B12 pre { top: calc(var(--dx) * 7 + var(--shift-v)); }

.M11 pre, .V11 pre { top: calc(var(--dx) * 10 + var(--shift-v)); }
.M12 pre, .V12 pre { top: calc(var(--dx) * 11 + var(--shift-v)); }
.M13 pre, .V13 pre { top: calc(var(--dx) * 12 + var(--shift-v)); }

[class^="K"] pre, [class^="Q"] pre
{ right: calc(290px + var(--shift-h)); }

[class^="M"] pre { right: calc(250px + var(--shift-h)); }
[class^="V"] pre { right: calc(120px + var(--shift-h)); }

body.scrolled_I [class^="K"] pre, .scrolled_I [class^="J"] pre, 
body.scrolled_I [class^="Q"] pre, .scrolled_I [class^="B"] pre,
body.scrolled_I [class^="M"] pre, .scrolled_I [class^="V"] pre
{ opacity: 1; animation: typing_l 2s steps(85, end) 9s forwards; }

@keyframes typing_l {
  from{width: 0; transform: translateX(0);}
  to {width: 85ch; transform: translateX(85ch);}
}
  */