/* ---------- Fonts ---------- */
@font-face {
  font-family: "Better With";
  src: url("fonts/BetterWith-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Better With Compressed";
  src: url("fonts/BetterWithCompressed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* The design uses Better With Narrow. That file isn't in the repo yet, so this
   points at Compressed, whose widths match the design within ~1%.
   Drop BetterWith-Narrow.ttf into /fonts and swap the src to use the real face. */
@font-face {
  font-family: "Better With Narrow";
  src: url("fonts/BetterWithCompressed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TCCC Unity Headline";
  src: url("fonts/TCCC-UnityHeadline-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "TCCC Unity Headline";
  src: url("fonts/TCCC-UnityHeadline-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --red: #f40000;
  --black: #000;
  --ink: #0e0e0e;
  --white: #fff;
  --green: #60fd30;
  --btn-ink: #242424;

  --f-compressed: "Better With Compressed", "Better With", Georgia, serif;
  --f-narrow: "Better With Narrow", "Better With", Georgia, serif;
  --f-serif: "Better With", Georgia, serif;
  --f-unity: "TCCC Unity Headline", "Arial Black", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, sans-serif;

  --z: 1; /* set by JS: viewport width / 422 */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
h1, h2, h3, p, ol { margin: 0; padding: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* App column: the design is a 422px-wide phone frame, scaled by --z. */
.app {
  width: calc(422px * var(--z));
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--red);
}
.view { background: var(--red); overflow: hidden; }
.stage {
  position: relative;
  width: 422px;
  zoom: var(--z);
}
.stage > * { position: absolute; }

/* ---------- Buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 291px;
  height: 51px;
  border-radius: 999px;
  font-family: var(--f-unity);
  font-weight: 900;
  font-size: 20px;
  line-height: normal;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-solid {
  background: var(--white);
  color: var(--btn-ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.btn-outline {
  border: 2px solid var(--white);
  color: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* =========================================================
   01 · Landing (422 × 1500)
   ========================================================= */
.stage-landing { height: 1500px; }

.hero { left: 0; top: 0; width: 422px; height: 811px; overflow: hidden; }
.hero > *, .hero-spotted, .hero-found { position: absolute; }
.hero-black { left: 0; top: 0; width: 422px; height: 523.91px; background: #010101; }
.hero-chairs { left: -19.42px; top: 103.35px; width: 461.212px; height: 687.467px; object-fit: cover; }
.hero h1 { left: 0; top: 0; }
.hero-spotted { left: 37px; top: 27.93px; width: 347.999px; height: 113.661px; }
.hero-found { left: 37px; top: 152.85px; width: 348px; height: 65.957px; }

.swipe-hint {
  left: 165px; top: 618px;
  width: 92px; height: 92px;
  animation: bob 2.2s ease-in-out infinite;
}
.swipe-hint img { width: 92px; height: 92.001px; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.log-it {
  left: 97px; top: 791px;
  width: 228px; height: 155px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-compressed);
  font-size: 55px;
  line-height: .9;
  letter-spacing: -1px;
  text-align: center;
}

.steps { left: 40px; top: 935px; width: 339px; list-style: none; }
.card {
  position: absolute;
  left: 0;
  width: 339px;
  height: 120px;
  border-radius: 12px;
  background: var(--white);
  color: var(--black);
}
/* Per-card offsets match the Figma layout exactly. */
.card-1 { top: 0;     --n: 29px; --t: 18px; --w: 199px; box-shadow: 0 4px 5.7px 2px rgba(0, 0, 0, .07); }
.card-2 { top: 134px; --n: 34px; --t: 21px; --w: 184px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25); }
.card-3 { top: 266px; --n: 36px; --t: 26px; --w: 202px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25); }
.card-num {
  position: absolute;
  left: 27.88px; top: var(--n);
  width: 32.806px;
  font-family: var(--f-serif);
  font-size: 72px;
  line-height: 28px;
  text-align: center;
}
.card-copy { position: absolute; left: 77px; top: var(--t); }
.card h3 {
  font-family: var(--f-unity);
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.8px;
  white-space: nowrap;
}
.card p {
  width: var(--w);
  margin-top: 4px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
}

.btn-map {
  left: 64px; top: 1366px;
  width: 280px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50px;
  background: var(--white);
  color: var(--black);
  text-decoration: none;
  font-family: var(--f-unity);
  font-weight: 900;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: -.8px;
  transition: transform .15s ease;
}
.btn-map:active { transform: scale(.97); }

/* =========================================================
   02 · Map (422 × 1348)
   ========================================================= */
.stage-map { height: 1348px; }
.map-dark { left: 0; top: 0; width: 422px; height: 919px; background: var(--ink); }

.sighting {
  left: 0; top: 68px;
  width: 422px; height: 31px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--green);
  font-family: var(--f-unity);
  font-weight: 900;
  font-size: 14px;
  line-height: 28px;
  text-transform: uppercase;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}
.sighting.is-ready { visibility: visible; opacity: 1; }
.sighting img { width: 31px; height: 31px; flex: none; animation: blink 1.6s ease-in-out infinite; }

.map { left: -15px; top: 150px; width: 466px; height: 466px; overflow: hidden; }
.map-layer { position: absolute; left: -15px; top: 3px; width: 463px; height: 463px; }
.map-africa { position: absolute; left: 80.75px; top: 4.66px; width: 333.62px; height: 394.896px; }
.map-globe { position: absolute; left: -1.23px; top: -1.23px; width: 465.456px; height: 465.456px; }

/* Rings + pins overlay (drawn by app.js). The SVG covers the map frame; its
   viewBox maps Figma map-frame coordinates onto it. */
.map-pins {
  position: absolute;
  left: 0; top: 0;
  width: 466px; height: 466px;
  overflow: visible;
  pointer-events: none;
}
.map-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.map-pin.is-new { animation: pin-drop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pin-drop {
  0% { transform: translateY(-10px) scale(.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* Pulse at the newest pin's tip. */
.map-ping {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.live {
  left: 130px; top: 646px;
  height: 27.86px;
  display: flex; align-items: center; gap: 12px;
  color: var(--red);
  font-family: var(--f-unity);
  font-weight: 900;
  font-size: 14px;
  line-height: 28px;
  text-transform: uppercase;
  white-space: nowrap;
}
.live-dot { width: 31px; height: 27.859px; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.stat {
  height: 28px;
  font-family: var(--f-compressed);
  font-size: 55px;
  line-height: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.stat em { font-style: normal; color: var(--red); }
.stat-1 { left: 41px; top: 708px; }
.stat-2 { left: 41px; top: 762px; }
.stat-3 { left: 55px; top: 816px; }

.see-one, .capture-it, .ready-to, .share-it {
  font-family: var(--f-narrow);
  font-size: 115px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Tops are tuned so cap heights land where Figma renders them
   (Figma spaces stacked lines baseline-to-baseline, 87px apart). */
.see-one { left: 33px; top: 988.5px; width: 414px; line-height: 28px; text-align: left; }
.see-one span { display: block; }
.see-one span + span { margin-top: 59px; }
.capture-it { left: 10px; top: 1163.5px; width: 414px; line-height: 28px; text-align: center; }

.btn-camera { left: 74px; top: 1242px; }

/* =========================================================
   03 · Share (422 × 921)
   ========================================================= */
.stage-share { height: 921px; }
.ready-to { left: 0; top: 85.5px; width: 391px; line-height: 28px; text-align: center; }
.share-it { left: 27px; top: 178.5px; width: 310px; line-height: 28px; text-align: center; }

.photo {
  left: 55px; top: 245px;
  width: 321px; height: 444px;
  background: rgba(0, 0, 0, .15);
  -webkit-mask: url("assets/share-mask.svg") 0 0 / 100% 100% no-repeat;
          mask: url("assets/share-mask.svg") 0 0 / 100% 100% no-repeat;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

.btn-share { left: 65px; top: 712px; }
.btn-retake { left: 65px; top: 778px; }

.theory {
  left: 55px; top: 852px;
  width: 326px;
  font-family: var(--f-unity);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-unity);
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}