/* The visit: a 1920x1080 stage scaled to fit, black around it. Brand: Helvetica Neue,
   Bold for titles, Light for body; #FF3333, #333333, #767676, white, black. */
:root {
  --red: #FF3333; --dark: #333333; --grey: #767676; --white: #FFFFFF; --black: #000000;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--black); color: var(--white);
  font-family: var(--font); font-weight: 300;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* touch-action none over the whole window (the letterbox too): iOS ignores user-scalable=no, so a
   double tap or a pinch outside the stage would zoom the page */
#visit { position: fixed; inset: 0; overflow: hidden; background: var(--black); touch-action: none; }

#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; background: var(--black);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#stage > * { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
#stage canvas.gl { display: block; }
#stage .touch { cursor: default; }
#stage .touch.dragging { cursor: grabbing; }
#stage .labels, #stage .hud { pointer-events: none; }
#stage .controls { pointer-events: none; }

/* Labels: default 40 px Light, positioned in stage px by labels.js */
.label {
  position: absolute; margin: 0; white-space: pre; line-height: 1.15;
  font-family: var(--font); letter-spacing: 0;
  /* a tight dark edge plus a soft halo: Light type stays readable over a bright photograph at 960 */
  text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .8), 0 1px 14px rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .5s ease;
}
.label.on { opacity: 1; }
.label.center, .mark.center { transform: translateX(-50%); }
a.label { pointer-events: auto; text-decoration: none; border-bottom: 3px solid currentColor; }
a.label:not(.on) { pointer-events: none; }

/* HUD */
.hud .hud-num {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  font-family: var(--font); font-size: 22px; font-weight: 300; letter-spacing: .04em; white-space: pre;
  color: var(--white); opacity: .8; padding: 4px 14px; border-radius: 6px; background: rgba(0, 0, 0, .45);
}
.hud .hud-num[hidden] { display: none; }
.hud button {
  position: absolute; pointer-events: auto; border: 0; margin: 0; padding: 0;
  font-family: var(--font); color: var(--white); background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.hud button:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.hud .hud-next {
  right: 64px; bottom: 56px; height: 112px; min-width: 240px; padding: 0 56px;
  background: var(--red); font-size: 44px; font-weight: 700; letter-spacing: .01em;
  opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease;
  pointer-events: none; visibility: hidden;
}
.hud .hud-next.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.hud .hud-next:active { background: #e62e2e; }
.hud .hud-back {
  left: 28px; top: 28px; width: 72px; height: 72px; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease; color: rgba(255, 255, 255, .85);
}
.hud .hud-back.on { opacity: 1; visibility: visible; }
.hud .hud-full {
  right: 28px; top: 28px; width: 72px; height: 72px; display: grid; place-items: center;
  color: rgba(255, 255, 255, .7);
}
.hud .hud-full[hidden] { display: none; }
.hud .hud-back svg, .hud .hud-full svg { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9)) drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); }
.hud .hud-controls, .hud-marks { position: absolute; inset: 0; pointer-events: none; }
.hud .hud-control {
  height: 72px; padding: 0 32px; font-size: 30px; font-weight: 300;
  background: rgba(51, 51, 51, .72); border: 2px solid rgba(255, 255, 255, .5);
}
.hud .hud-control:active { background: var(--red); border-color: var(--red); }
.mark { position: absolute; display: block; width: auto; pointer-events: none; user-select: none; }

/* Control iframe host, placed by the shot (stage px) */
.control-host { position: absolute; pointer-events: auto; transform-origin: 50% 50%; }
.control-host[hidden] { display: none; }
.control-host iframe { position: absolute; left: 0; top: 0; display: block; border: 0; background: var(--black); }

/* Upright phone: the stage stays small; one line asks to rotate */
.rotate {
  display: none; position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--font); font-weight: 300; color: var(--white); line-height: 1.4;
}
#visit.is-portrait .rotate { display: block; }

/* The WebGL context lost and not back (engine.js _bindContext): one control over the window */
.gl-lost { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .7); }
.gl-lost button {
  border: 1px solid var(--white); border-radius: 6px; margin: 0; padding: 12px 28px; background: none; cursor: pointer;
  font-family: var(--font); font-size: 18px; font-weight: 300; color: var(--white); -webkit-appearance: none; appearance: none;
}