:root {
  --orange: #ff9200;
  --white: #ffffff;
  --font: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}

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

html, body {
  background: #05070a;
  color: var(--white);
  font-family: var(--font);
  overflow-x: hidden;
}

.scroll-space { height: 400vh; }

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.scenes, .scene {
  position: absolute;
  inset: 0;
}

.scene {
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}

.scene-img {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: auto;
  will-change: transform;
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("../img/grain.png");
  background-size: 128px 128px;
}

.hud-top, .hud-bottom { position: absolute; z-index: 10; pointer-events: none; }
.hud-top a, .hud-bottom a { pointer-events: auto; }

.hud-top {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 7.6vh 3.2vw 0 5.83vw;
}

.logo {
  display: block;
  width: min(24.6vw, 472px);
  line-height: 0;
}
.logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}

.nav {
  display: flex;
  align-items: flex-start;
  gap: 1.5vw;
  padding-top: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(18px, 1.67vw, 32px);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.nav-link .arrow {
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
  overflow: visible;
}

.nav-link.is-pangu {
  color: var(--orange);
}
.nav-link.is-pangu .arrow.down {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.nav-link:not(.is-pangu):hover {
  color: var(--orange);
}

.hud-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 0 7.2vh 11.6vw;
}

.foot-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6vh;
}

.ring {
  width: min(3.76vw, 72px);
  height: auto;
  margin-left: 4.5vw;
  display: block;
}

.socials {
  display: flex;
  align-items: center;
  gap: 1.4vw;
}
.socials a {
  display: block;
  width: min(2.1vw, 40px);
  height: min(2.1vw, 40px);
  line-height: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.socials a img { width: 100%; height: 100%; display: block; }
.socials a:hover { transform: scale(1.08); opacity: 0.85; }

.copy {
  position: absolute;
  left: 50%;
  bottom: 7.2vh;
  transform: translateX(-50%);
  color: var(--orange);
  font-size: clamp(11px, 1.25vw, 24px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 800px) {
  .hud-top { padding: 4vh 4vw 0 4vw; flex-direction: column; gap: 2vh; }
  .logo { width: min(56vw, 280px); }
  .nav { gap: 4vw; align-self: flex-end; }
  .nav-link { font-size: 14px; }
  .hud-bottom { padding: 0 0 4vh 6vw; }
  .copy { font-size: 10px; white-space: normal; width: 70%; bottom: 3.2vh; }
  .ring { margin-left: 0; width: 36px; }
  .socials a { width: 28px; height: 28px; }
}