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

body {
  display:            flex;
  justify-content:   center;
  align-items:       center;
  background-color:  #171717;
  min-height:        100vh;
  z-index:            -200;

  height:  15000px;
  margin:  0;
}


#FP1, #FP2 {
  transition:   opacity, transform, filter, 1s ease;
  font-family:  Manro;

  filter:       blur(4px);
  font-size:    clamp(1rem, 1.5vh, 2vh);
  transform:    translate(50px, 50px);

  z-index: 2;
  opacity: 0;
}


/* ==Hero Title== */
.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-family:  Arial;
  color:      white;
  position:     fixed;

  font-size:   1.7rem;
  opacity:          0;
  z-index:          2;
  top:              0; 
  left:             0;

  transform: 
  translateX(calc(50vw - 230px));

  animation: 
  flickerIn 0.3s linear 2.5s forwards;
}


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


/* ==Logo image== */
.flicker-image, .flicker-image-1 {
  object-fit: contain;
  position:     fixed;
  display:      block;

  z-index:          2;
  opacity:          0;
  top:         -166px; 
  left:        -190px;
  height:       500px; 
  width:        500px;
  aspect-ratio: 16 / 9;

  transform: scale(0.2);

  animation: 
  flickerIn 0.3s linear 3s forwards;
}

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


/* ==Logo Text== */
.letter, .letter_2, .letter_3 {
  font-family:  sans-serif;
  white-space:  nowrap;
  font-weight:  bold;
  position:     fixed;
  color:      white;

  font-size:    0.7rem;
  top:          0; 
  left:         0;
  opacity:      0;

  transform: translate(100px, 30px);
}

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

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

#C2 { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 0px;   }
#O2 { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 20px;  }
#R2 { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 40px;  }
#P2 { animation: burst_3 1.3s cubic-bezier(0, 1, 0.3, 1) var(--delay) forwards; --dx: 60px;  }
#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);}}

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

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

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

@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; }
}

/*== Index ==*/
:root { 
  --offset-left:  -200px;
  --offset-dy:      10vw; 
  --offset-st:       0px;
}

[id^="Sld"] {
  font-family:  Manro;
  text-wrap:    balance;
  position:       fixed;
  color:        white;
  filter:     blur(4px);

  font-size:     3.4rem;
  left:           100px;
  top:                0; 
  width:           90vw;
  opacity:            0;
  z-index:            2;

  transition: 
  opacity, filter, transform, 1s ease; 

  transform: 
  translate(calc(var(--offset-dy) + 
  var(--offset-st)), calc(30vh + 50px));
}

#Sld_4a  { font-size: 2.7rem; left: calc(120px + var(--offset-left)); }
#Sld_4b  { font-size: 2.2rem; left: calc(130px + var(--offset-left)); top: 180px; }

#Sld_3a,
#Sld_0a, #Sld_4a,
#Sld_1a, #Sld_2a  { color: rgb(207, 221, 255); }
#Sld_1a, #Sld_2a  { font-size: 2.7rem; left: var(--offset-left); }
#Sld_2b, #Sld_1b  { font-size: 2.2rem; left: var(--offset-left); top: 100px;}
#Sld_3b, #Sld_2b         { left: calc(10px + var(--offset-left)); }
#Sld_0a           { left: 40px; }

#Sld_1b  { left:  20px; }
#Sld_0b  { left: 80px; font-size: 2.5rem; top: 120px; }
#Sld_3b  { top:  120px; font-size: 2.2rem; }
#Sld_3a  { top:  -60px; font-size: 2.7rem; left: var(--offset-left); }
#Sld_1a  { left:  10px; top: -60px; }

@media (max-aspect-ratio: 1/1) {
  .Hero_Title_T, .Hero_Title_B { display: none; }
  [id^="Sld"] { text-align: center; }

  #Sld_0a  { font-size: 5.5vw; }
  #Sld_0b  { font-size: 4.2vw; top: calc(50vh - 520px); left: calc(-10vw - 150px);}
  #Sld_1b  { font-size: 3.8vw; top: 200px; }
  #Sld_1a  { font-size: 4.5vw; }
  #Sld_2a  { font-size: 4.0vw; }
  #Sld_2b  { font-size: 3.5vw; top: 160px; }
  #Sld_3a  { font-size: 4.2vw; top: -50px; }
  #Sld_3b  { font-size: 3.8vw; top: 120px; }
  #Sld_4b  { font-size: 4.2vw; top: 260px; left: -60px; }
  #Sld_4a  { font-size: 4.6vw; top: 0;     left: -60px; }
}

/* ==Scroll Triggers== */
.load_ac #Sld_0a, .load_ac #Sld_0b,
.scrolled_R #Sld_1a, .scrolled_R #Sld_1b,
.scrolled_X #Sld_2a, .scrolled_X #Sld_2b, 
.scrolled_Y #Sld_3a, .scrolled_Y #Sld_3b,
.scrolled_I #Sld_4a, .scrolled_I #Sld_4b
{ transform: 
  translate(calc(var(--offset-dy) + var(--offset-st)),
  calc(30vh - 30px)); opacity: 1; filter: blur(0);
}

.HeroJ_container.animate-q,
.scrolled_I .np_container,
.Hero_container_1 { 
  animation: fadeInUp 1s ease 4.2s forwards;
  position:  fixed;

  left:      100px;
  top:           0; 
  z-index:       2; 
  opacity:       0;
}

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

.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.9;
    transform: translateY(0);
    filter: blur(0);
  }
}


/* ==About== */
.Para_container_1 { animation: 
  fadeInUp 1s ease 3s forwards;
  position:   fixed;

  z-index:    2; 
  opacity:    0;
  top:        0; 
  left:    50px;
}

:root { 
  --Paroff: 0px; 
  --vert:   -50px;
}

#c418,  #QEC, #mail, #CEO,
[id*="Par"] {
  color:      white;
  position:     fixed;

  width:        90vw;
  top:          0; 
  left:         0;
  opacity:      0;

  filter:       blur(4px);  
  font-family:  Manro;

  transition: 
  opacity, filter, transform, 1s ease;

  transform: 
  translate(calc(var(--offset-dy) + 
  var(--offset-st)), calc(30vh + 50px));
}

[id^="b"] { font-size: 2.1rem; }
[id^="a"] { font-size: 2.6rem; color: rgb(207, 221, 255); }

/*== About ==*/
#azPar             { left: calc(100px + var(--Paroff)); }
#bzPar             { left: calc( 70px + var(--Paroff)); top: 60px; }
#ayPar,  #axPar    { left: calc( 60px + var(--Paroff)); }
#byPar,  #bxPar, 
#bwPar             { left: calc( 70px + var(--Paroff)); top: 120px; }

#bxPar             { top: 120px; }
#bwPar             { top: 10px;  }

/*== Innovation ==*/
#azPar1            { left: calc(-70px + var(--Paroff)); }
#bzPar1            { left: calc(-55px + var(--Paroff)); top: 100px; }
#ayPar1, #axPar1   { left: calc( 60px + var(--Paroff)); top: -10px;}
#byPar1, #bxPar1, 
#bwPar1            { left: calc( 70px + var(--Paroff)); top: 100px; }

#bxPar1            { top: 140px; }
#bwPar1            { top: 10px;  }

/*== Contact ==*/
#c418, #QEC, #mail, #CEO          { text-align: left; }
#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); 
}

@media (max-aspect-ratio: 1/1) {
  .Hero_Title_T2 { display: none; }
  [id^="a"]    { font-size: 3.8vw; }
  [id^="b"]    { font-size: 3.2vw; }

  /*== About ==*/
  #ayPar, #axPar, #bxPar, #byPar 
  { left: calc(-10vw + 30px); }

  #axPar   { top:  calc( 30px + var(--vert)); }
  #bxPar   { top:  calc(130px + var(--vert)); }
  #ayPar   { top:  calc( 20px + var(--vert)); }
  #byPar   { top:  calc(180px + var(--vert)); }

  #azPar   { left: -190px; top: var(--vert); }
  #bzPar   { left: -190px; top: calc(var(--vert) + 60px); }
  #bwPar   { left:  -70px; top: -40px; }

  /*== Innovation ==*/
  #ayPar1, #axPar1, #bxPar1, #byPar1 
  { left: calc(-10vw + 20px); }

  #axPar1  { top:  calc(-50px + var(--vert)); }
  #bxPar1  { top:  calc(130px + var(--vert)); }
  #ayPar1  { top:  calc(-20px + var(--vert)); }
  #byPar1  { top:  calc(160px + var(--vert)); }

  #azPar1  { left: -190px; top: calc(var(--vert) - 20px);  }
  #bzPar1  { left: -190px; top: calc(var(--vert) + 120px); }
  #bwPar1  { left:  -80px; }
}

.animate-7   [id^="az"], .animate-7   [id^="bz"], 
.scrolled_R  [id^="ay"], .scrolled_R  [id^="by"],
.scrolled_X  [id^="ax"], .scrolled_X  [id^="bx"], 
.scrolled_I  [id^="av"], .scrolled_I  [id^="bv"],
.scrolled_II [id^="au"], .scrolled_II [id^="bu"],
.scrolled_Y  #bwPar, .scrolled_Y #bwPar1 { 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);}
 }

[class^="J"] pre, [class^="K"] pre, 
[class^="Q"] pre, [class^="B"] pre,
[class^="M"] pre, [class^="V"] pre {
  right:        calc(180px + var(--shift-h));
  color:      rgba(255, 255, 255, 0.9);

  font-family:  monospace;
  display:      inline-block; 
  white-space:  pre;
  overflow:     hidden;
  position:     fixed;
  
  font-size:    0.7rem;
  width:        0ch;
  z-index:      6;
  opacity:      0;
}


.More {
  text-align:   center;
  color:      white;
  position:     fixed;

  opacity:      0;
  z-index:      2;
  font-size:    1.25rem;
  bottom:       50px; 
  left:         calc(40vw - 230px);

  filter:       blur(4px);
  transition:   opacity 1s, filter 1s;
  font-family:  Manro;
}

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


@media (max-aspect-ratio: 1/1) {
  pre.Notice_head,  pre.Notice_bod {
    text-align:     center;
    position:       fixed;

    left:           117px; 
    bottom:         250px;
    font-size:      1.5rem;
    opacity:        0.4;
    z-index:        6;

    color:        rgb(207, 221, 255);
    font-family:    Manro;
  }
  
  pre.Notice_bod {
    color: white;
    bottom:  150px;
    left:    100px;
  }
}

/*
: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); }
}
  */