/* Layout and animation styles. Values come from config.js; normally there's
   no need to edit this file. */
:root {
  --page-color: #0035c6;
  --page-max: 480px;
  --pulse-scale: 1.035;
  --pulse-duration: 2.2s;
  --pulse-easing: ease-in-out;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page-color);
}

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: full width. Desktop: centred, max ~480px. */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

/* The wrapper is exactly the artwork's size; overlays are placed inside it. */
.stage {
  position: relative;
  width: 100%;
}

/* Whole artwork at its natural proportions: no crop, no stretch, no filters. */
.artwork {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlays: left / top / width are set in % of the artwork by main.js. */
.overlay {
  position: absolute;
  display: block;
  height: auto;
}

.logo { pointer-events: none; }

.btn {
  z-index: 2;
  border-radius: 999px;
  outline: none;
  touch-action: manipulation;
}
.btn img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

/* Visible keyboard focus */
.btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px #071a5e;   /* white ring inside a dark navy ring */
}

/* Social buttons with no link configured yet: shown, but inert. */
.btn[aria-disabled="true"] { cursor: default; }

/* Registration pulse. It sits on an inner element, so it never changes the
   button's position; it scales from the centre of the visible button. */
.btn-pulse {
  display: block;
  transform-origin: var(--origin, 50% 50%);
  animation: register-pulse var(--pulse-duration) var(--pulse-easing) infinite;
  will-change: transform;
}
.no-pulse .btn-pulse { animation: none; }

@keyframes register-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--pulse-scale)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-pulse { animation: none; }
}