@font-face {
  font-family: 'poppins';
  src: url('./assets/fonts/poppins.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,body {
  scroll-behavior: auto;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}

body {
  background: black;
  color: white;
  font-family: 'poppins', sans-serif;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  z-index: 1;
}

nav{
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;

  display:flex;
  align-items:center;
  gap:34px;

  padding:12px 28px;
  border-radius:999px;

  background:rgba(18, 18, 22, 0.4);
  border:0.1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.151);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.logo{
  width:34px;
  height:34px;
  display:block;
  flex-shrink:0;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:invert(1) brightness(1.8);
  opacity:1;
}

.menu{
  display:flex;
  align-items:center;
  gap:30px;
}

.menu a{
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding-bottom:8px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  top:5px;
}

.menu a::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);

  width:0;
  height:2px;
  background:white;
  border-radius:999px;
  transition:width .25s ease;
}
.menu a.active{
  color:white;
}

.menu a.active::after{
  width:22px;
}


.menu a:hover{
  color:white;
}

.hero {
  min-height: 100vh;
  padding: 140px 7vw 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  min-height: 100vh;
  overflow: hidden;  
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0.8;

  filter:
    contrast(1.2)
    brightness(.5);
    
}

.hero-content {
  position: relative;
  
}

.hero h1 {
  font-size: 220px;
  line-height: 0.8; /* Disesuaikan agar teks super besar tidak bertabrakan atas-bawah */
  letter-spacing: -8px;
  z-index: 999;
}

.eyebrow {
  font-size: 20px; /* Hasil pembulatan dari 220px / 1.618^5 (19.8px) */
  line-height: 1.618; /* Golden ratio line-height */
  margin-bottom: 32px; /* Disesuaikan menjadi 32px (angka deret Golden Ratio) */
  opacity: .5;
  letter-spacing: 4px;
  z-index: 999;
}

.desc {
  font-size: 12px; /* Sempurna! Hasil dari 220px / 1.618^6 (12.2px) */
  line-height: 1.618; /* Diubah dari 1.5 ke 1.618 agar teks kecil lebih lega dibaca */
  max-width: 700px;
  margin-top: 52px; /* Disesuaikan menjadi 52px (angka deret Golden Ratio) */
  opacity: .65;
  z-index: 999;
  font-family: "Lato", sans-serif;
}

.big-text {
  min-height: 80vh;
  padding: 80px 7vw;
  display: flex;
  align-items: center;
  gap: 60px;
  position:relative;
}

.big-text h2 {
  flex: 1;
  font-size: clamp(48px, 12vw, 140px);
  line-height: .9;
  letter-spacing: -6px;
  text-align: right;
  z-index: 999;
}

.big-text text {
  flex: 1;
  font-size: 18px;
  line-height: 1.5;
  max-width: 600px;
  opacity: .75;
  z-index: 999;
}

.big-text img{
  position:absolute;
  left:20%;
  top:50%;
  transform:
    translate(-50%,-50%)
    rotate(-15deg);
  width:1000px;
  opacity: 0.2;
  filter: blur(2px) drop-shadow(0 0 40px rgb(255, 255, 255));
  z-index: 0;
}

.orbit-section{
  position:relative;
  min-height:100vh;
  padding:100px 7vw;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 15% 20%, rgba(120,120,120,.12), transparent 30%),
    linear-gradient(180deg, #050505, #101214 55%, #030303);
  opacity:0;
  scale:.8;
  transition:1s;
}

.orbit-section.show{
  opacity:1;
  scale:1;
}

.orbit-bg{
  position:absolute;
  inset:0;
  background-size:80px 80px;
  pointer-events:none;
}

.orbit-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.orbit-heading{
  position:relative;
  z-index:2;
  text-align:center;
  margin-bottom:45px;
}

.orbit-heading p{
  font-size:12px;
  letter-spacing:5px;
  color:rgba(255,255,255,.45);
  margin-bottom:12px;
}

.orbit-heading h2{
  font-size:clamp(58px, 10vw, 140px);
  line-height:.85;
  letter-spacing:-6px;
  margin:0;
  color:white;
}

.orbit-heading span{
  display:block;
  margin-top:18px;
  color:rgba(255,255,255,.55);
  font-size:16px;
}

.orbit-container{
  --total: 7;
  --radius: 260px;

  position: relative;
  width: 650px;
  height: 650px;
  margin: auto;
  border-radius: 50%;
}

.orbit-container::before{
  content:"";
  position:absolute;
  inset:65px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  pointer-events:none;
  transition:.8s ease;
}

.orbit-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:140px;
  height:140px;

  z-index:999999;
  cursor:pointer;
  pointer-events:auto;

  transition:.8s cubic-bezier(.22,1,.36,1);
}

.orbit-center img{
  width:100%;
  pointer-events:none;
}

.orbit-center::before{
  content:"";
  position:absolute;
  inset:-40px;
  border-radius:50%;
  background:
  radial-gradient(
    circle,
    rgba(255,255,255,.15),
    transparent 70%
  );
  animation:glow 4s ease infinite;
}


@keyframes glow{
  0%,100%{
    opacity:.4;
    transform:scale(1);
  }
  50%{
    opacity:.8;
    transform:scale(1.15);
  }
}

.orbit-center img{
  width:100%;
  animation:pulse 4s ease-in-out infinite;
  filter:invert(1);
}

@keyframes pulse{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.08);
  }
}

.orbit-container.expanded::before{
  opacity:0;
  transform:scale(.7);
}

.orbit-container.expanded .orbit-center{
  top:80px;
  width:80px;
  height:80px;
}

.orbit-container{
  --radius:260px;
}

.orbit-container.expanded{
  --radius:120px;
}

.orbit-item {
  position: absolute;
  left: 50%;
  top: 52%;

  --float: 0px;

  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc((var(--radius) * -1) + var(--float)))
    rotate(calc(-1 * var(--angle)));

  animation: orbitFloat 4s ease-in-out infinite;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  color: white;
  text-decoration: none;
  transition: .35s ease;
  z-index: 999;
}

.orbit-item:hover {
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc((var(--radius) + 35px) * -1))
    rotate(calc(-1 * var(--angle)))
    scale(1.15);
    --float: -35px;
}

@keyframes orbitFloat{
  0%,100%{
    translate: 0 0;
  }

  50%{
    translate: 0 -12px;
  }
}

.orbit-item svg{
    width:40px;
    height:40px;
    stroke:white;
}

.orbit-item img{
    width:40px;
    height:40px;
    filter:invert(1);
    image-rendering: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    object-fit: contain;
}

.orbit-container.expanded .orbit-item{
  top:62%;
}

.orbit-container.expanded .orbit-item{
  opacity:0;
  pointer-events:none;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(-80px)
    rotate(calc(-1 * var(--angle)))
    scale(.5);
}

.portal-open-text{
  position:absolute;
  left:50%;
  top:30%;
  transform:translate(-50%, 20px);
  width:100%;
  text-align:center;
  color:white;
  opacity:0;

  transition:.8s cubic-bezier(.22,1,.36,1);
}

.portal-open-text h3{
  font-size:clamp(32px, 5vw, 70px);
  letter-spacing:-2px;
  margin-bottom:12px;
}

.portal-open-text p{
  color:rgba(255,255,255,.55);
  font-size:16px;
}

.portal-open-text img{
    width:40px;
    height:40px;
    filter:invert(1);
}

.orbit-container.expanded .portal-open-text{
  opacity:1;
  transform:translate(-50%, 0);
}

#splash{
  position:fixed;
  inset:0;
  z-index:9999999;
  background:#080808;
  cursor:pointer;

  display:flex;
  justify-content:center;
  align-items:center;
}

#splash video{
  width:30%;
  height:30%;
  object-fit:cover;

  filter:invert(1);
}

.skip-text{
  position:absolute;
  bottom:35px;
  left:50%;
  transform:translateX(-50%);

  color:rgba(255,255,255,.55);
  font-size:11px;
  letter-spacing:4px;
  pointer-events:none;
}

.footer{
  position:relative;
  margin-top:0px;
  padding:
    40px 30px
    20px;
  text-align:center;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255,255,255,.02)
    );
}

.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;

  height:180px;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,.02)
    );
}

.footer-glow{

  position:absolute;
  top:0;
  left:50%;
  width:700px;
  height:150px;
  transform:translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.08),
      transparent 70%
    );
  filter:blur(80px);
  pointer-events:none;
}

.footer-logo{
  width:80px;
  margin-bottom:5px;
  opacity:.9;
  filter:invert(1);
}

.footer h2{
  font-size:
    clamp(36px,5vw,20px);
  letter-spacing:20px;
  margin-bottom:2px;
}

.footer p{
  color:
    rgba(255,255,255,.5);
  margin-bottom:20px;
  letter-spacing:40px;
}

.footer-bottom{
  display:flex;
  justify-content:center;
  gap: 30px;
  flex-wrap:wrap;
  color:
    rgba(255,255,255,.3);
  font-size:12px;
}

.reveal{
  opacity:0;
  transform:
    translateY(50px);
  transition:
    opacity 1s ease,
    transform 1s ease;
  will-change:
    opacity,
    transform;
}

.reveal.show{
  opacity:1;
  transform:
    translateY(0);
}

.reveal-left{
  opacity:0;
  transform:
    translateX(-80px);
}

.reveal-right{
  opacity:0;
  transform:
    translateX(80px);
}

.reveal-left.show,
.reveal-right.show{
  opacity:1;
  transform:
    translateX(0);
}

.journey{
  min-height:118vh;
  padding:120px 7vw;
  position:relative;
  overflow:hidden;
  background: black;
}


.journey::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  content-visibility:auto;
  contain-intrinsic-size:1200px;
}

.journey-bg{
  position:absolute;
  left:50%;
  top:70%;

  width:80%;
  height:auto;

  transform:translate(-50%, -60%);
  filter:
    contrast(1.08)
    brightness(1.02);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  pointer-events:none;
}

.journey-heading{
  position:relative;
  z-index: 99999;

}
.journey-heading h2 {
  font-size: 150px;
  line-height: 0.8; /* Disesuaikan agar teks super besar tidak bertabrakan atas-bawah */
  letter-spacing: -8px;

}

.journey-heading p {
  font-size: 20px; /* Hasil pembulatan dari 220px / 1.618^5 (19.8px) */
  line-height: 1.618; /* Golden ratio line-height */
  margin-bottom: 0%; /* Disesuaikan menjadi 32px (angka deret Golden Ratio) */
  opacity: .5;
  letter-spacing: 4px;

}

.journey-heading span {
  font-size: 12px; /* Sempurna! Hasil dari 220px / 1.618^6 (12.2px) */
  line-height: 1.618; /* Diubah dari 1.5 ke 1.618 agar teks kecil lebih lega dibaca */
  max-width: 700px;
  margin-top: 52px; /* Disesuaikan menjadi 52px (angka deret Golden Ratio) */
  opacity: .65;
  font-family: "Lato", sans-serif;
}
/* ========================= */
/* MOBILE RESPONSIVE ONLY */
/* taruh paling bawah CSS */
/* ========================= */

html,
body{
  overflow-x:hidden;
}

@media (max-width: 768px){

  nav{
    top:16px;
    padding:9px 14px;
    gap:14px;
  }

  .menu{
    display:none;
  }

  .logo{
    width:30px;
    height:30px;
  }

  .hero{
    min-height:100vh;
    padding:120px 24px 70px;
    overflow:hidden;
  }

  .hero-content{
    width:100%;
    max-width:100%;
    z-index:5;
  }

  .hero h1{
    font-size:clamp(58px, 18vw, 82px);
    line-height:.88;
    letter-spacing:-3px;
    max-width:100%;
  }

  .eyebrow{
    font-size:11px;
    letter-spacing:3px;
    margin-bottom:18px;
  }

  .desc{
    font-size:11px;
    line-height:1.6;
    max-width:92%;
    margin-top:28px;
  }

  .hero-image img{
    object-position:center;
    opacity:.75;
  }

  .showcase{
    grid-template-columns:1fr;
    padding:80px 24px;
    gap:24px;
  }

  .big-text{
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
    padding:100px 24px 80px;
    overflow:hidden;
  }

  .big-text h2{
    text-align:left;
    font-size:clamp(42px, 14vw, 62px);
    line-height:.9;
    letter-spacing:-3px;
  }

  .big-text text{
    max-width:100%;
    font-size:13px;
    line-height:1.6;
  }

  .big-text img{
    width:650px;
    left:50%;
    opacity:.12;
  }

  .orbit-section{
    min-height:100vh;
    padding:90px 20px;
  }

  .orbit-heading{
    margin-bottom:28px;
  }

  .orbit-heading p{
    font-size:10px;
    letter-spacing:4px;
  }

  .orbit-heading h2{
    font-size:clamp(46px, 15vw, 70px);
    letter-spacing:-3px;
  }

  .orbit-heading span{
    font-size:12px;
    margin-top:12px;
  }

  .orbit-container{
    width:min(92vw, 360px);
    height:min(92vw, 360px);
    --radius:150px;
  }

  .orbit-container::before{
    inset:28px;
  }

  .orbit-center{
    width:72px;
    height:72px;
  }

  .orbit-center::before{
    inset:-25px;
  }

  .orbit-container.expanded .orbit-center{
    top:55px;
    width:56px;
    height:56px;
  }

  .orbit-item{
    top:53%;
    gap:6px;
    font-size:9px;
    max-width:72px;
    text-align:center;
  }

  .orbit-item svg{
    width:24px;
    height:24px;
  }

  .orbit-item img{
    width:26px;
    height:26px;
  }

  .orbit-item span{
    font-size:9px;
    line-height:1.25;
  }

  .portal-open-text{
    top:34%;
    padding:0 18px;
  }

  .portal-open-text h3{
    font-size:32px;
    letter-spacing:-1px;
  }

  .portal-open-text p{
    font-size:12px;
  }

  #splash video{
    width:min(320px, 75vw);
    height:auto;
    max-height:70vh;
    object-fit:contain;
  }

  .footer{
    padding:55px 20px 24px;
  }

  .footer-logo{
    width:60px;
  }

  .footer h2{
    font-size:28px;
    letter-spacing:7px;
  }

  .footer p{
    font-size:10px;
    letter-spacing:7px;
  }

  .footer-bottom{
    flex-direction:column;
    gap:8px;
    font-size:11px;
  }
}

/* FORCE MOBILE FIX */
@media screen and (max-width: 768px){

  .hero{
    width:100vw !important;
    min-height:100vh !important;
    padding:120px 24px 80px !important;
    overflow:hidden !important;
  }

  .hero-content{
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
  }

  .hero h1{
    font-size:clamp(54px, 17vw, 78px) !important;
    line-height:.9 !important;
    letter-spacing:-3px !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .eyebrow{
    font-size:11px !important;
    letter-spacing:4px !important;
  }

  .desc{
    width:100% !important;
    max-width:90vw !important;
    font-size:11px !important;
    line-height:1.6 !important;
  }

  .hero-image,
  .hero-image img{
    width:100% !important;
    height:100% !important;
  }
}


.scene {
  position: relative;
  width: 260px;
  height: 260px;
}
/* ── Canvas for the star ── */
canvas {
  position: absolute;
  inset: 0;
}
/* ── Tiny ambient star-field dots ── */
.field{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.fd{
  position:absolute;
  border-radius:50%;
  background:#fff;
  animation:tw var(--d) ease-in-out infinite var(--dl);
}

@keyframes tw{
  0%,100%{
    opacity:.08;
    transform:scale(.7);
  }

  50%{
    opacity:.7;
    transform:scale(1.3);
  }
}

.stars-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}

.scene{
  position:absolute;
  width:260px;
  height:260px;
}

.scene canvas{
  width:100%;
  height:100%;
}