/* Overlay: everything fixed on top of the 3D room except the cards. */

/* Top bar: name + "Get in touch" */
.topbar {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 6;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 18px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.logo { font-family: var(--display); font-weight: 800; font-size: 20px; background: var(--surface); padding: 6px 14px; border-radius: 999px; }
.topbar a.cta { background: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 10px 18px; border-radius: 999px; font-size: 15px; }

/* Stop rail: dots on the right that jump to each stop */
.rail {
  position: fixed; z-index: 6; top: 50%; transform: translateY(-50%);
  right: max(20px, env(safe-area-inset-right, 0px));
  display: none; flex-direction: column; gap: 4px;
  background: var(--surface); border-radius: 16px; padding: 8px 6px; transition: opacity .3s;
}
body.immersive .rail { display: flex; }
.rail button {
  font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 32px; padding: 0 6px;
}
.rail button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: transform .25s, background .25s; }
.rail button[aria-current="step"] { color: var(--fg); }
.rail button[aria-current="step"]::after { background: var(--accent); transform: scale(1.5); }
@media (max-width: 720px) {
  /* Phones: no room beside the cards, and swiping does the same job, so hide the stop dots */
  body.immersive .rail { display: none; }
}
@media (min-width: 721px) {
  .rail button span { opacity: 0; transition: opacity .2s; }
  .rail:hover button span, .rail button:focus-visible span, .rail button[aria-current="step"] span { opacity: 1; }
}

/* Loading bar while the 3D models download */
.loading {
  position: fixed; z-index: 6; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums;
}
.loading .bar { width: 80px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.loading .bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* Pulsing dot that marks what a card is pointing at */
.pin { position: fixed; left: 0; top: 0; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--accent); animation: ping 1.8s ease-out infinite; }
.pin.on { opacity: 1; }
@keyframes ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* "Scroll to look around" hint on the first screen */
.cue {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg);
  background: var(--surface); border-radius: 999px; padding: 8px 16px;
  display: none; align-items: center; gap: 8px; transition: opacity .3s;
}
body.immersive .cue { display: flex; }
.cue span:last-child { display: inline-block; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .pin::after, .cue span:last-child { animation: none; }
}