html {
    -webkit-text-size-adjust: 100%;
}

.header-main {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 20;
  padding-top: 1rem;
  max-width: 100vw;
  box-sizing: border-box;
  left: 0;
  right: 0;
}

/* Hide scrollbar for Chrome, Safari, Edge */
html,
body,
#page {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#page::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.header-main-logo {
  height: 100%;
  z-index: 20;
  justify-content: right;
  padding-right: 38px;
  gap: 0;
}

/* MAIN -------------- */

html,
body {
  margin: 0;
  background: #000;
  color: #f5f5f5;
}

body {
  overflow-x: hidden;
}

.about-page {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
}

.about-hero-3d {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
}

.about-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.about-copy {
  position: relative;
  max-width: 360px;
  margin-left: 10vw;
  padding-top: 30vh;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 18px rgba(255,255,255,0.06);
  opacity: 0.86;
  filter: blur(0px);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

.about-copy.is-soft {
  opacity: 0.45;
  filter: blur(1.5px);
}

.about-copy--2 {
  margin-top: 70vh;
  margin-left: 22vw;
}

.about-copy--3 {
  margin-top: 70vh;
  margin-left: 44vw;
}

.about-copy h1,
.about-copy h2 {
  font-family: 'Josefin Sans', sans-serif;
  margin: 0 0 12px;
}

.about-copy p {
  font-family: 'Be Vietnam Pro', sans-serif;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,0.75);
}

.scroll-space {
  width: 100%;
  height: 100vh;
}

.first-name {
  font-family: 'Josefin Sans', sans-serif;
  color: #fffbf4;
  font-size: 1.5vw;
  font-weight: 600;
}

.second-name {
  font-family: 'Josefin Sans', sans-serif;
  color: #959595;
  font-size: 1.5vw;
  font-weight: 600;
}

@media only screen and (max-width: 768px) {

  body.menu-open{
    overflow: hidden;
    touch-action: none;
  }
  
  .scroll-indicator{
    display: none;
  }

  .cp-planet{
    display: none;
  }

  .cp-ring svg{
    display: none;
  }
}

@media (max-width: 900px) and (max-height: 400px) {

  .header-main-logo {
    height: 100%;
    z-index: 20;
    justify-content: right;
    padding-right: 38px;
    gap: 0;
  }

  .header-main-contact{
    text-align: end;
    width: 53%;
  }
}

@media only screen and (max-width: 600px) {


  .header-main-logo{
    padding-right: 17px;
  }

  .header-main-nav {
    box-sizing: border-box;
    padding: 0px;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) and (max-height: 400px) {

  .hero-nav.hero-social {
    gap: 1.2vw;
  }

  .hero-nav.hero-social .social-link {
    width: 5.1vw;
    height: 5.1vw;
  }

  .hero-side-btn--c {
    font-size: 2vw;
  }

  .hero-nav.hero-social .social-link i {
    font-size: 2.8vw;
  }

}

@media only screen and (max-width: 480px) {

  .header-main-contact{
    padding-right: 18px;
  }
}

body.about-is-entering .about-hero-3d,
/* body.about-is-entering #webgl-canvas, */
body.about-is-entering #webgl-canvas-base,
body.about-is-entering #webgl-canvas-text-sharp,
body.about-is-entering #webgl-canvas-text-blur {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.015);
}

.about-hero-3d,
/* #webgl-canvas, */
#webgl-canvas-base,
#webgl-canvas-text-sharp,
#webgl-canvas-text-blur {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

#webgl-canvas-base,
#webgl-canvas-text-sharp,
#webgl-canvas-text-blur {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* base scene: stars + DNA strands */
#webgl-canvas-base {
  z-index: 0;
}

/* sharp text layer */
#webgl-canvas-text-sharp {
  z-index: 1;
  opacity: 1;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 6%,
    rgba(0, 0, 0, 0.55) 12%,
    black 20%,
    black 80%,
    rgba(0, 0, 0, 0.55) 88%,
    rgba(0, 0, 0, 0.18) 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 6%,
    rgba(0, 0, 0, 0.55) 12%,
    black 20%,
    black 80%,
    rgba(0, 0, 0, 0.55) 88%,
    rgba(0, 0, 0, 0.18) 94%,
    transparent 100%
  );
}

/* blurred text layer only near the bottom */
#webgl-canvas-text-blur {
  z-index: 2;
  opacity: 1;
  filter: blur(11px);

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.72) 6%,
    rgba(0, 0, 0, 0.452) 14%,
    transparent 22%,
    transparent 78%,
    rgba(0, 0, 0, 0.28) 86%,
    rgba(0, 0, 0, 0.72) 94%,
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.72) 6%,
    rgba(0, 0, 0, 0.534) 14%,
    transparent 22%,
    transparent 78%,
    rgba(0, 0, 0, 0.28) 86%,
    rgba(0, 0, 0, 0.72) 94%,
    black 100%
  );
}

.about-page,
.about-hero-3d {
  touch-action: none;
  overscroll-behavior: none;
}

.contact-planet {
  position: absolute;
  left: calc(3vw + 7svh);
  bottom: calc(3vw + 5svh);
  width: calc(10vw + 9svh);
  aspect-ratio: 1;
  z-index: 6;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.cp-scene {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  perspective: 900px;
}

.cp-planet {
  position: absolute;
  width: 51%;
  height: 51%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(30px);
  border-radius: 50%;

  background:
    radial-gradient(circle at 30% 30%, #ffffff 0%, rgba(255,255,255,0.5) 10%, transparent 30%),
    radial-gradient(circle at center, #7fc4ff 0%, #2f5c88 40%, #02060c 100%);

  box-shadow:
    0 0 25px rgba(120,180,255,0.3),
    inset -12px -14px 18px rgba(0,0,0,0.5);

  transition: transform 1.2s ease;
}

.contact-planet:hover .cp-planet {
  transform: translate(-50%, -50%) translateZ(45px) scale(1.1);
}

.cp-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.cp-ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cp-ring--orbit {
  transform: rotateX(39deg) rotateZ(22deg);
  transform-origin: center;
  animation: orbitSpin 24s linear infinite;
}

.cp-text {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 3px;
  fill: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;

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

@keyframes orbitSpin {
  from {
    transform: rotateX(58deg) rotateZ(22deg) rotate(0deg);
  }
  to {
    transform: rotateX(58deg) rotateZ(22deg) rotate(360deg);
  }
}