@font-face {
  font-family: "D-DIN";
  src: url("fonts/D-DIN.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN";
  src: url("fonts/D-DIN-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --background: #020609;
  --foreground: #f3f7f7;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
}

body {
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(104, 202, 225, 0.28);
  color: #fff;
}

.landing {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--background);
}

.earthBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--background);
  background-image: url("earth-indonesia-orbit.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0.96) saturate(1.06) contrast(1.14);
  transform: scale(1);
  animation: orbitalDrift 26s ease-in-out infinite alternate;
}

.nightTransition {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 86% 70% at 100% 100%, rgba(0, 2, 4, 0.9) 0%, rgba(0, 3, 5, 0.7) 27%, rgba(1, 4, 7, 0.3) 54%, rgba(1, 5, 8, 0) 79%),
    linear-gradient(180deg, rgba(1, 5, 9, 0.02) 0%, rgba(1, 5, 9, 0.03) 52%, rgba(1, 5, 9, 0.2) 72%, rgba(0, 3, 5, 0.68) 100%),
    linear-gradient(108deg, rgba(1, 5, 8, 0.95) 0%, rgba(1, 5, 8, 0.76) 30%, rgba(1, 5, 8, 0.38) 50%, rgba(1, 5, 8, 0.07) 70%, rgba(1, 5, 8, 0) 100%);
  pointer-events: none;
}

.atmosphericGlow {
  position: absolute;
  z-index: 2;
  top: -48%;
  right: -9%;
  width: 72vw;
  height: 72vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 178, 215, 0.13), transparent 64%);
  pointer-events: none;
}

.stars {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

.starsFar {
  width: 1px;
  height: 1px;
  box-shadow:
    3vw 8vh rgba(255, 255, 255, 0.26),
    7vw 18vh rgba(208, 235, 244, 0.42),
    11vw 31vh rgba(255, 255, 255, 0.18),
    14vw 6vh rgba(255, 255, 255, 0.5),
    17vw 42vh rgba(206, 231, 241, 0.22),
    20vw 14vh rgba(255, 255, 255, 0.34),
    23vw 27vh rgba(218, 241, 248, 0.16),
    26vw 4vh rgba(255, 255, 255, 0.42),
    29vw 37vh rgba(255, 255, 255, 0.28),
    32vw 19vh rgba(207, 236, 246, 0.2),
    35vw 9vh rgba(255, 255, 255, 0.56),
    38vw 46vh rgba(218, 239, 246, 0.24),
    41vw 25vh rgba(255, 255, 255, 0.38),
    44vw 3vh rgba(213, 238, 246, 0.2),
    47vw 34vh rgba(255, 255, 255, 0.17),
    50vw 13vh rgba(208, 235, 244, 0.46),
    53vw 43vh rgba(255, 255, 255, 0.26),
    56vw 23vh rgba(255, 255, 255, 0.19),
    59vw 7vh rgba(206, 231, 241, 0.52),
    62vw 38vh rgba(255, 255, 255, 0.23),
    65vw 17vh rgba(218, 241, 248, 0.36),
    68vw 30vh rgba(255, 255, 255, 0.18),
    71vw 4vh rgba(255, 255, 255, 0.44),
    74vw 44vh rgba(207, 236, 246, 0.21),
    77vw 21vh rgba(255, 255, 255, 0.32),
    80vw 10vh rgba(218, 239, 246, 0.17),
    83vw 36vh rgba(255, 255, 255, 0.48),
    86vw 15vh rgba(213, 238, 246, 0.2),
    89vw 47vh rgba(255, 255, 255, 0.3),
    92vw 27vh rgba(208, 235, 244, 0.16),
    96vw 6vh rgba(255, 255, 255, 0.4),
    5vw 53vh rgba(255, 255, 255, 0.22),
    9vw 67vh rgba(213, 238, 246, 0.36),
    13vw 84vh rgba(255, 255, 255, 0.18),
    16vw 57vh rgba(208, 235, 244, 0.46),
    19vw 76vh rgba(255, 255, 255, 0.24),
    22vw 93vh rgba(206, 231, 241, 0.17),
    25vw 64vh rgba(255, 255, 255, 0.38),
    28vw 82vh rgba(218, 241, 248, 0.2),
    31vw 51vh rgba(255, 255, 255, 0.52),
    34vw 72vh rgba(255, 255, 255, 0.19),
    37vw 90vh rgba(207, 236, 246, 0.28),
    40vw 61vh rgba(255, 255, 255, 0.16),
    43vw 79vh rgba(218, 239, 246, 0.42),
    46vw 55vh rgba(255, 255, 255, 0.22),
    49vw 87vh rgba(213, 238, 246, 0.18),
    52vw 69vh rgba(255, 255, 255, 0.34),
    55vw 96vh rgba(208, 235, 244, 0.24),
    58vw 58vh rgba(255, 255, 255, 0.46),
    61vw 77vh rgba(206, 231, 241, 0.2),
    64vw 89vh rgba(255, 255, 255, 0.17),
    67vw 54vh rgba(218, 241, 248, 0.38),
    70vw 72vh rgba(255, 255, 255, 0.21),
    73vw 94vh rgba(255, 255, 255, 0.28),
    76vw 63vh rgba(207, 236, 246, 0.18),
    79vw 84vh rgba(255, 255, 255, 0.44),
    82vw 51vh rgba(218, 239, 246, 0.22),
    85vw 75vh rgba(213, 238, 246, 0.16),
    88vw 91vh rgba(255, 255, 255, 0.36),
    91vw 59vh rgba(208, 235, 244, 0.19),
    94vw 81vh rgba(255, 255, 255, 0.48),
    97vw 69vh rgba(206, 231, 241, 0.2);
  animation: farTwinkle 7.8s ease-in-out infinite;
}

.starsNear {
  width: 1.5px;
  height: 1.5px;
  box-shadow:
    6vw 24vh rgba(255, 255, 255, 0.72),
    12vw 12vh rgba(226, 247, 252, 0.56),
    18vw 35vh rgba(255, 255, 255, 0.82),
    24vw 8vh rgba(207, 239, 248, 0.48),
    30vw 29vh rgba(255, 255, 255, 0.68),
    36vw 16vh rgba(255, 255, 255, 0.5),
    42vw 41vh rgba(219, 242, 249, 0.76),
    48vw 10vh rgba(255, 255, 255, 0.54),
    54vw 31vh rgba(226, 247, 252, 0.86),
    60vw 19vh rgba(255, 255, 255, 0.46),
    66vw 43vh rgba(207, 239, 248, 0.7),
    72vw 11vh rgba(255, 255, 255, 0.58),
    78vw 32vh rgba(219, 242, 249, 0.8),
    84vw 18vh rgba(255, 255, 255, 0.44),
    90vw 39vh rgba(226, 247, 252, 0.66),
    95vw 14vh rgba(255, 255, 255, 0.52),
    10vw 62vh rgba(207, 239, 248, 0.74),
    21vw 79vh rgba(255, 255, 255, 0.5),
    33vw 56vh rgba(219, 242, 249, 0.84),
    45vw 88vh rgba(255, 255, 255, 0.46),
    57vw 66vh rgba(226, 247, 252, 0.7),
    69vw 83vh rgba(255, 255, 255, 0.54),
    81vw 61vh rgba(207, 239, 248, 0.78),
    93vw 76vh rgba(255, 255, 255, 0.48);
  filter: drop-shadow(0 0 1.5px rgba(188, 232, 244, 0.48));
  animation: nearTwinkle 6.2s 1.1s ease-in-out infinite;
}

.techGrid {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.orbitArc {
  position: absolute;
  right: -9vw;
  bottom: 2vh;
  width: 56vw;
  height: 25vw;
  border: 1px solid rgba(146, 224, 238, 0.14);
  border-radius: 50%;
  opacity: 0.7;
  transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 76%, transparent 100%);
}

.orbitArc::before {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(146, 224, 238, 0.07);
  border-radius: inherit;
  content: "";
}

.pixelGrid {
  position: absolute;
  top: 17%;
  right: clamp(16px, 2.2vw, 38px);
  width: 56px;
  height: min(52vh, 460px);
  opacity: 0;
  background-image:
    radial-gradient(circle, rgba(160, 235, 246, 0.48) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(92, 192, 211, 0.2) 0 1px, transparent 1.3px);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px, 16px 16px;
  filter: drop-shadow(0 0 4px rgba(78, 197, 218, 0.18));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  animation: digitalReveal 1.8s 0.45s ease-out forwards;
}

.pixelGrid::after {
  position: absolute;
  top: 19%;
  right: 8px;
  width: 3px;
  height: 3px;
  background: rgba(200, 248, 255, 0.9);
  box-shadow:
    -24px 40px rgba(128, 224, 239, 0.72),
    0 88px rgba(173, 239, 249, 0.62),
    -40px 136px rgba(112, 211, 229, 0.66),
    -16px 200px rgba(190, 244, 251, 0.68),
    -32px 264px rgba(112, 211, 229, 0.56);
  content: "";
}

.bottomBlackout {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 82% 70% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.98) 27%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0.78) 81%, #000 91%, #000 100%);
  pointer-events: none;
}

.brandMark {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 3vw, 42px);
  left: clamp(40px, 6vw, 96px);
  width: clamp(56px, 5.2vw, 72px);
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.34));
  pointer-events: none;
  user-select: none;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.identity {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(40px, 6vw, 96px);
  width: min(50vw, 680px);
  text-align: left;
  transform: translateY(-50%);
}

.identity h1 {
  margin: 0;
  color: rgba(247, 250, 250, 0.96);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.34);
}

.identity p {
  margin: 15px 0 0;
  color: #fff;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.035em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.58);
}

.copyright {
  position: absolute;
  z-index: 3;
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(24px, 3vw, 40px);
  margin: 0;
  color: rgba(238, 241, 241, 0.68);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.65rem, 0.7vw, 0.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

@keyframes orbitalDrift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.025) translate3d(-0.25%, -0.15%, 0);
  }
}

@keyframes farTwinkle {
  0%, 100% {
    opacity: 0.52;
  }

  50% {
    opacity: 0.82;
  }
}

@keyframes nearTwinkle {
  0%, 100% {
    opacity: 0.68;
  }

  50% {
    opacity: 1;
  }
}

@keyframes digitalReveal {
  from {
    opacity: 0;
    transform: translateX(8px);
  }

  to {
    opacity: 0.34;
    transform: translateX(0);
  }
}

@media (max-width: 680px) {
  .earthBackground {
    background-position: 58% center;
    background-size: cover;
  }

  .nightTransition {
    background:
      radial-gradient(ellipse 105% 68% at 100% 100%, rgba(0, 2, 4, 0.92) 0%, rgba(0, 3, 5, 0.68) 30%, rgba(1, 4, 7, 0.24) 58%, rgba(1, 5, 8, 0) 82%),
      linear-gradient(180deg, rgba(1, 5, 9, 0.03) 0%, rgba(1, 5, 9, 0.08) 46%, rgba(0, 3, 5, 0.76) 100%),
      linear-gradient(100deg, rgba(1, 5, 8, 0.9) 0%, rgba(1, 5, 8, 0.6) 38%, rgba(1, 5, 8, 0.08) 78%, rgba(1, 5, 8, 0) 100%);
  }

  .identity {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 24px;
    width: calc(100% - 48px);
    transform: translateY(-50%);
  }

  .identity h1 {
    font-size: clamp(2.6rem, 12vw, 3.5rem);
    letter-spacing: -0.025em;
  }

  .identity p {
    margin-top: 15px;
    font-size: clamp(0.92rem, 4vw, 1.08rem);
    letter-spacing: 0.025em;
  }

  .brandMark {
    top: 22px;
    left: 24px;
    width: 56px;
  }

  .copyright {
    right: 24px;
    bottom: 20px;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .earthBackground {
    animation: none;
  }

  .stars {
    animation: none;
  }

  .pixelGrid {
    opacity: 0.34;
    animation: none;
  }
}