/* ---------------------------------------------------------------
   Geometry is derived from the reference screenshot (720 x 1560).
   1 reference px = (100/720)cqw = 0.138889cqw of the app container.
   --------------------------------------------------------------- */

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

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
}

#app {
  --bg: #111111;

  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 480px;                 /* keeps the phone proportions on desktop */
  height: 100dvh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
  touch-action: manipulation;
}

/* ---------------- roaming background logo ---------------- */

.bouncer {
  position: absolute;
  inset: 0;
  bottom: 28.75cqw;                 /* roams above the bar, as in the reference */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bouncer__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(19.03cqw * var(--scale, 1));   /* 19.03cqw = 137 ref px */
  height: auto;
  opacity: 0.5;                     /* white @50% over #111 -> #868686, matches ref */
  will-change: transform;
}

/* Three marks at slightly different sizes so they do not read as clones.
   Each drifts at its own speed; see SPEED in app.js. */
.bouncer__logo--a { --scale: 1; }
.bouncer__logo--b { --scale: 0.82; }
.bouncer__logo--c { --scale: 1.18; }

/* ---------------- card ---------------- */

.stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;             /* lets .scene bound itself by height too */
  display: grid;
  justify-items: center;
  align-items: end;                 /* reference sits the card low, not centred */
  padding: 4cqw 0 6.94cqw;          /* 50 ref px of clearance above the bar */
}

.scene {
  /* 95.83cqw = 690 ref px wide; the cqh term keeps the whole card on screen
     when the viewport is too short for that width. */
  width: min(95.83cqw, 63.36cqh);
  aspect-ratio: 690 / 1089;         /* measured off the reference card */
  perspective: 1600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--turn, 0deg));
  transition: transform 620ms cubic-bezier(.22, .68, .3, 1);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.card.is-dragging { transition: none; }

.card:focus-visible { outline: none; }
.card:focus-visible .face--front { box-shadow: 0 0 0 0.7cqw #ffffff; }

.face {
  position: absolute;
  inset: 0;
  border-radius: 3.89cqw;           /* 28 ref px */
  overflow: hidden;
  background: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .55);
}

.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.face--back { transform: rotateY(180deg); }

/* ---------------- bottom bar ---------------- */

.bar {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: 28.75cqw;                 /* 207 ref px */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 5.14cqw 0 4.44cqw;     /* 37 / 32 ref px */
  margin-bottom: env(safe-area-inset-bottom);
}

.bar button, .bar .chrome {
  font: inherit;
  color: #fff;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bar__close {
  grid-column: 1;
  justify-self: start;
  font-size: 4.44cqw;               /* 32 ref px */
  letter-spacing: -0.01em;
}

.pager {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);      /* centre on the bar, not on the padding box */
  display: flex;
  align-items: center;
  gap: 0.42cqw;                     /* 3 ref px */
}

.dot {
  width: 6.39cqw;                   /* 46 ref px */
  height: 6.39cqw;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 3.4cqw;
  font-weight: 400;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: width 220ms ease, height 220ms ease, background-color 220ms ease,
              color 220ms ease;
}

.dot.is-active {
  width: 6.94cqw;                   /* 50 ref px */
  height: 6.94cqw;
  background: #fff;
  color: #000;
}

.bar__tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 3.6cqw;
}

.tool svg { display: block; fill: currentColor; }
.tool--qr svg      { width: 5.97cqw; height: 5.97cqw; }   /* 43 ref px */
.tool--refresh svg { width: 5.42cqw; height: 5.42cqw; }

.tool--refresh.is-spinning svg {
  animation: spin 620ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes spin { to { transform: rotate(360deg); } }

.bar button:active, .tool--refresh:active { opacity: .55; }

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .card { transition-duration: 1ms; }
  .dot  { transition-duration: 1ms; }
  .tool--refresh.is-spinning svg { animation: none; }
}