/* Pre-launch banner pinned above the invite; links to /prelaunch/. */
.glop-has-bar {
  --bar-h: 40px;
  padding-top: var(--bar-h);
}

/* Fit the invite into the viewport that's left under the bar. */
.glop-has-bar .glop-launch {
  --canvas-w: min(100vw, calc((100dvh - var(--bar-h)) * 1.2934));
  min-height: calc(100vh - var(--bar-h));
  min-height: calc(100dvh - var(--bar-h));
}

.glop-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--bar-h);
  overflow: hidden;
  background: #000;
  color: #ffa2dc;
  font: 400 13px/1 'ABC Favorit Mono', 'DM Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.glop-bar__track {
  display: flex;
  width: max-content;
}

.glop-bar__run {
  display: flex;
  gap: 28px;
  padding-right: 28px;
}

.glop-bar:hover,
.glop-bar:focus-visible {
  background: #ffa2dc;
  color: #000;
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  .glop-bar__track { animation: glop-bar-scroll 28s linear infinite; }
  .glop-bar:hover .glop-bar__track { animation-play-state: paused; }
}

@keyframes glop-bar-scroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 749px) {
  .glop-has-bar { --bar-h: 34px; }
  .glop-bar { font-size: 11px; }
}

/* Phones/portrait: the invite stacks full-width; keep that, minus the bar. */
@media (max-aspect-ratio: 1 / 1) {
  .glop-has-bar .glop-launch { --canvas-w: 100vw; }

  .glop-has-bar .glop-launch__canvas {
    min-height: calc(100vh - var(--bar-h));
    min-height: calc(100svh - var(--bar-h));
  }
}