/* =========================================================
   GLOBAL / PAGE BASE
========================================================= */

html, body {

  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-y: auto;

  background:
    linear-gradient(
      97deg,
      rgba(0,0,0,1) 0%,
      rgb(19,18,21) 50%,
      rgb(33,23,39) 100%
    );

  color: white;

  font-family:
    Verdana,
    sans-serif;
}


/* =========================================================
   SCREEN / CRT CONTAINER
========================================================= */

.screen {

  position: relative;

  width: 100%;
  height: 100%;

  overflow-y: auto;
  overflow-x: hidden;

  padding-bottom: 40px;

  box-sizing: border-box;
}

.terminal {

  position: fixed;

  inset: 0;

  display: flex;

  background-color: #383838;

  padding: 20px;

  box-sizing: border-box;

  overflow: hidden;
}

.frame {

  position: relative;

  width: 100%;
  height: 97%;

  border-radius: 50px;

  overflow: hidden;

  background:
    radial-gradient(
      #2001605e,
      #220127b3
    );

  border: 15px solid;

  border-bottom-color: #121212;
  border-left-color: #080808;
  border-right-color: #080808;
  border-top-color: #020202;

  box-shadow:
    inset 0 0 18rem black,
    inset 0 0 3rem black,
    0 0 10rem black;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

  display: none;
}


/* =========================================================
   CRT SCANLINES
========================================================= */

.frame::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 51%) 0px,
      rgb(255 255 255 / 0%) 1px,
      #00000078 2px,
      transparent 4px
    );

  pointer-events: none;

  z-index: 10000;

  opacity: 0.22;

  mix-blend-mode: soft-light;
}


/* =========================================================
   CRT BORDER OVERLAY
========================================================= */

.frame::after {

  content: "";

  position: absolute;

  inset: 20px;

  border:
    1px solid rgba(255,255,255,0.03);

  pointer-events: none;

  clip-path:
    polygon(
      0 30px,
      30px 30px,
      30px 0,
      calc(100% - 30px) 0,
      calc(100% - 30px) 30px,
      100% 30px,
      100% calc(100% - 30px),
      calc(100% - 30px) calc(100% - 30px),
      calc(100% - 30px) 100%,
      30px 100%,
      30px calc(100% - 30px),
      0 calc(100% - 30px)
    );
}


/* =========================================================
   HERO DECORATION / RINGS
========================================================= */

.hero-section::before {

  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  border-radius: 50%;

  border:
    1px solid rgba(180,120,255,0.06);

  top: -240px;

  left: 50%;

  transform: translateX(-50%);

  z-index: -2;
}

.hero-section::after {

  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  border:
    1px solid rgba(180,120,255,0.08);

  top: -140px;

  left: 50%;

  transform: translateX(-50%);

  z-index: -2;
}


/* =========================================================
   HERO META TEXT
========================================================= */

.hero-meta {

  font-size: 11px;

  letter-spacing: 4px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.32);

  margin-top: -10px;

  text-align: center;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {

  position: sticky;

  top: 0;
}

.topbar {

  top: 0;
  left: 0;

  width: 100%;

  height: 60px;

  background:
    rgba(0,0,0,0.35);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 30px;

  box-sizing: border-box;

  z-index: 1000;
}

.topbar-left,
.topbar-right {

  font-size: 12px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.75);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {

  position: fixed;

  top: 95px;

  left: 35px;

  width: 220px;

  height:
    calc(100% - 110px);

  box-sizing: border-box;

  z-index: 999;

  background:
    rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border-right:
    1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  flex-direction: column;

  padding-top: 40px;

  border-radius: 0 0 0 35px;
}

.nav-logo {

  padding-left: 28px;

  margin-bottom: 30px;

  letter-spacing: 4px;
}

.sidebar a {

  color: white;

  text-decoration: none;

  padding: 16px 28px;

  transition: 0.3s;

  text-transform: uppercase;

  font-size: 13px;

  letter-spacing: 2px;
}

.sidebar a:hover {

  background:
    rgba(255,255,255,0.08);

  padding-left: 38px;
}


/* =========================================================
   BANNER IMAGE
========================================================= */

.banner-image {

  position: absolute;

  top: 60px;

  left: 220px;

  width:
    calc(100vw - 220px);

  height: 220px;

  object-fit: cover;

  opacity: 0.14;

  filter: blur(2px);

  pointer-events: none;

  z-index: 1;

  display: block;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 100%
    );
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content {

  position: relative;

  z-index: 2;

  margin-left: 220px;

  padding:
    20px 80px 120px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 140px;
}

.sys-label {

  font-size: 11px;

  letter-spacing: 3px;

  color:
    rgba(255,255,255,0.35);

  text-transform: uppercase;

  margin-bottom: 10px;
}


/* =========================================================
   HERO SECTION
========================================================= */

.hero-section {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 30px;
}


/* =========================================================
   MAIN LOGO
========================================================= */

.main-logo {

  width: 280px;

  filter:
    drop-shadow(
      0 0 20px rgba(255,255,255,0.15)
    );
}

.main-logo {

  width: 280px;

  position: relative;

  filter:
    drop-shadow(0 0 10px rgba(180,120,255,0.25))
    drop-shadow(0 0 30px rgba(140,90,255,0.18))
    drop-shadow(0 0 60px rgba(100,60,255,0.12));
}


/* =========================================================
   HERO WATERMARK SYMBOL
========================================================= */

.hero-symbol {

  position: absolute;

  top: 37rem;

  left: 50%;

  transform: translateX(-50%);

  font-size: 18rem;

  font-weight: bold;

  letter-spacing: 20px;

  color:
    rgb(175 81 206 / 2%);

  filter: blur(4px);

  z-index: -1;

  user-select: none;

  pointer-events: none;
}


/* =========================================================
   TYPEWRITER TITLE
========================================================= */

.typing-title {

  display: inline-block;

  overflow: hidden;

  white-space: nowrap;

  border-right:
    2px solid white;

  width: 0;

  font-size: 28px;

  letter-spacing: 3px;

  text-align: center;

  animation:
    typing 4s steps(50, end) forwards,
    blink 1s step-end infinite;
}


/* =========================================================
   INFO BOXES
========================================================= */

.info-box {

  width: 700px;

  padding: 30px;

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 0 40px rgba(130,80,255,0.08);

  line-height: 1.8;
}


/* =========================================================
   CONTENT SECTIONS
========================================================= */

.content-section {

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 25px;
}

.section-left {

  align-items: flex-start;
}

.section-right {

  align-items: flex-end;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title {

  margin: 0;

  font-size: 28px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.92);

  text-shadow:
    0 0 12px rgba(180,120,255,0.2);
}

.section-title::after {

  content: "";

  display: block;

  width: 120px;

  height: 1px;

  margin-top: 14px;

  background:
    linear-gradient(
      to right,
      rgba(180,120,255,0.8),
      transparent
    );
}


/* =========================================================
   SECTION BOXES
========================================================= */

.section-box {

  width: 700px;

  padding: 30px;

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 0 40px rgba(130,80,255,0.08);

  line-height: 1.8;
}

.section-box::before {

  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  background:
    rgba(140,90,255,0.08);

  filter: blur(90px);

  z-index: -1;

  top: -80px;
  left: -80px;
}


/* =========================================================
   WHO SECTION LAYOUT
========================================================= */

.who-section {

  flex-direction: row;

  justify-content: center;

  align-items: center;

  gap: 45px;
}


/* =========================================================
   QUOTE IMAGE WRAPPER
========================================================= */

.quote-image-wrap {

  position: relative;

  width: 340px;
  height: 320px;

  flex-shrink: 0;

  overflow: hidden;

  border-radius: 18px;
}


/* =========================================================
   QUOTE IMAGE
========================================================= */

.quote-image {

  width: 90%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  opacity: 0.22;

  display: block;

  margin: 0 auto;

  filter:
    drop-shadow(
      0 0 15px rgba(255,255,255,0.3)
    );
}


/* =========================================================
   QUOTE OVERLAYS
========================================================= */

.quote-overlay-name {

  position: absolute;

  top: 14px;

  font-size: 11px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.5);
}

.quote-overlay-text {

  position: absolute;

  bottom: 16px;

  right: 16px;

  width: 170px;

  text-align: right;

  font-size: 0.85rem;

  line-height: 1.5;

  font-style: italic;

  color:
    rgba(255,255,255,0.6);
}


/* =========================================================
   BACKGROUND WORDS
========================================================= */

.bg-word {

  position: absolute;

  font-size: 7rem;

  font-weight: bold;

  letter-spacing: 12px;

  text-transform: uppercase;

  color:
    rgb(219 90 255 / 5%);

  filter: blur(5px);

  pointer-events: none;

  user-select: none;

  z-index: 0;

  mix-blend-mode: exclusion;

  animation:
    glitchFloat 7s ease-in-out infinite;

  pointer-events: none;
}


/* =========================================================
   BACKGROUND WORD POSITIONS
========================================================= */

.bg-word-1 {

  bottom: 140px;

  left: 320px;

  transform:
    rotate(-6deg);
}

.bg-word-2 {

  bottom: 420px;

  right: 120px;

  transform:
    rotate(4deg);
}

.bg-word-3 {

  bottom: -20px;

  left: 48%;

  transform:
    rotate(-2deg);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes glitchFloat {

  0% {

    transform:
      translateY(0px);
  }

  50% {

    transform:
      translateY(-8px);
  }

  100% {

    transform:
      translateY(0px);
  }
}

@keyframes typing {

  from {

    width: 0;
  }

  to {

    width: 48ch;
  }
}

@keyframes blink {

  50% {

    border-color: transparent;
  }
}

@keyframes logoFloat {

  0% {

    transform: translateY(0px);
  }

  50% {

    transform: translateY(-6px);
  }

  100% {

    transform: translateY(0px);
  }
}