/* Paynix orbit — sticky scroll story. Dropped in after the hero.
   Section height is how much scrolling the story takes. */

.paynix-orbit {
  --po-scroll: 400vh;
  --space: #130810;
  --magenta: #E90097;
  --po-ink: #F6EEF4;
  --mute: #A9A3B8;
  --po-line: rgba(246, 238, 244, .16);
  --display: "Manrope", system-ui, "Segoe UI", sans-serif;
  --mono: "Manrope", system-ui, sans-serif;
  position: relative;
  height: var(--po-scroll);
  background: #130810;
  color: var(--po-ink);
  font-family: var(--display);
  isolation: isolate;
}

.paynix-orbit .po-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #130810;
  z-index: 2;
}

.paynix-orbit #viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #130810;
}

.paynix-orbit .po-hint {
  position: absolute;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  color: rgba(255, 95, 191, .7);
  transition: opacity .4s;
  pointer-events: none;
}

.paynix-orbit #stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--space);
}

.paynix-orbit #gl {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
  display: block;
}

.paynix-orbit #card {
  position: absolute;
  left: 800px;
  top: 0;
  width: 0;
  height: 0;
}

/* The logo sits in a zero-width card. The site-wide img max-width would collapse it. */
.paynix-orbit img {
  max-width: none;
}

.paynix-orbit #logo {
  position: absolute;
  left: -85px;
  top: 365px;
  width: 170px;
  height: auto;
  opacity: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 14px rgba(40, 0, 30, .9));
}

.paynix-orbit #word small {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #FF5FBF;
  margin-top: 14px;
  padding-left: .32em;
}

.paynix-orbit #word {
  position: absolute;
  left: 0;
  top: 444px;
  text-align: center;
  line-height: 1;
  transform: translate(-50%, 0);
  transform-origin: 50% 31px;
  font-size: 62px;
  font-weight: 300;
  letter-spacing: -.025em;
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 2px 26px rgba(30, 0, 25, .9);
}

.paynix-orbit #h1 {
  position: absolute;
  left: 0;
  top: 836px;
  display: none;
  transform: translateX(-50%);
  width: 1100px;
  text-align: center;
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
  opacity: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .8);
}

.paynix-orbit #h1 em {
  font-style: normal;
  color: #FF3DB4;
}

.clean .paynix-orbit #card {
  display: none;
}

.paynix-orbit #labs .lb {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}

.paynix-orbit #labs .lb b {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
}

.paynix-orbit #labs .lb span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FF5FBF;
  margin-top: 5px;
}

.paynix-orbit #labs .lb i {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto 7px;
  background: linear-gradient(90deg, #FF6DCC, #E90097);
  border-radius: 2px;
}

.paynix-orbit #fade {
  position: absolute;
  inset: 0;
  background: #130810;
  opacity: 1;
  pointer-events: none;
}

.paynix-orbit #edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px 36px #130810;
}

html.port .paynix-orbit #labs .lb b { font-size: 27px; }
html.port .paynix-orbit #labs .lb span { font-size: 13px; }
html.port .paynix-orbit #word { font-size: 54px; top: 448px; }
html.port .paynix-orbit #logo { top: 369px; }
html.port .paynix-orbit #word small { font-size: 16px; }

.paynix-orbit #load {
  position: absolute;
  left: 800px;
  top: 450px;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--mute);
}