/*
 * The hero phone: the Android app's dark home screen, drawn to scale.
 *
 * Every size is in --u, one pixel of a 738px-wide screenshot of the app
 * (about 2.05 per dp), so the numbers here can be checked against a
 * screenshot. The screen is a size container, which makes --u track whatever
 * width the page gives the phone. Colours are the app's dark scheme from
 * Theme.kt: forest greens, with the logo's lime as the accent.
 *
 * One 16s clock drives everything, and every animation starts together:
 *   0-15%   type a phone number     15-20%  tap Find recipient
 *   20-33%  payee found, amount     33-36%  tap Send
 *   36-66%  receipt sheet           66-94%  home again, balance down, new row
 *   94-100% fade and loop
 */

.jm {
  --bg: #080E0A; --surface: #0F1611; --surface-v: #19221B;
  --on: #E6EEE4; --on-v: #A6B3A7; --outline: #3A473C;
  --lime: #D4F25C; --ink: #111A13; --incoming: #8EDB86;
  --forest-light: #4C7A42; --forest: #2F5A2C; --forest-deep: #16301A;
  --forest-grad: linear-gradient(135deg, var(--forest-light), var(--forest-deep));
  --u: calc(100cqw / 738);
  --clock: 16s;

  container-type: inline-size;
  position: relative; display: block; width: 100%;
  aspect-ratio: 738 / 1600; overflow: hidden;
  background: var(--bg); color: var(--on);
  font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  line-height: 1.25; text-align: left; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
.jm * { box-sizing: border-box; }
.jm p, .jm dl, .jm dd { margin: 0; }
.jm svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jm > *, .jm-below > * { position: absolute; }

/* ------------------------------------------------------------ chrome */

.jm-status {
  top: 0; left: calc(50 * var(--u)); right: calc(52 * var(--u));
  height: calc(72 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u));
}
.jm-status b { flex: 1; font-size: calc(27 * var(--u)); font-weight: 600; }
.jm-sig { display: flex; align-items: flex-end; gap: calc(3 * var(--u)); height: calc(20 * var(--u)); }
.jm-sig i { width: calc(5 * var(--u)); background: var(--on); border-radius: 1px; }
.jm-sig i:nth-child(1) { height: 40%; } .jm-sig i:nth-child(2) { height: 60%; }
.jm-sig i:nth-child(3) { height: 80%; } .jm-sig i:nth-child(4) { height: 100%; }
.jm-status svg.jm-wifi { width: calc(30 * var(--u)); height: calc(22 * var(--u)); fill: var(--on); stroke: none; }
.jm-bat {
  width: calc(46 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u));
  background: #6b6f6d; display: grid; place-items: center; position: relative;
  box-shadow: inset calc(30 * var(--u)) 0 0 #e6eee4;
}
.jm-bar {
  left: 37%; right: 37%; bottom: calc(18 * var(--u)); height: calc(7 * var(--u));
  border-radius: 99px; background: #f2f2f2;
}

/* ----------------------------------------------------------- people */

/* Initials on an earthy tone, one per person, as in the app. */
.jm-av {
  display: grid; place-items: center; flex: none; border-radius: 50%;
  color: #fff; font-weight: 600; letter-spacing: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 85%, transparent), var(--tone));
}

/* ------------------------------------------------------------ header */

.jm-head {
  top: calc(116 * var(--u)); left: calc(41 * var(--u)); right: calc(30 * var(--u));
  display: flex; align-items: center; gap: calc(25 * var(--u));
}
.jm-head .jm-av { width: calc(94 * var(--u)); height: calc(94 * var(--u)); font-size: calc(32 * var(--u)); --tone: #6E3A52; }
.jm-head p { flex: 1; min-width: 0; }
.jm-head b { display: block; font-size: calc(43 * var(--u)); font-weight: 500; letter-spacing: -.015em; }
.jm-head small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(24.5 * var(--u)); color: var(--on-v); white-space: nowrap; }
.jm-head i { width: calc(90 * var(--u)); height: calc(90 * var(--u)); display: grid; place-items: center; }
.jm-head i svg { width: calc(41 * var(--u)); height: calc(41 * var(--u)); }

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

.jm-card {
  top: calc(254 * var(--u)); left: calc(41 * var(--u)); width: calc(656 * var(--u)); height: calc(285 * var(--u));
  border-radius: calc(61 * var(--u)); padding: calc(49 * var(--u));
  /* The brand's dot grain over the forest gradient. */
  background:
    radial-gradient(circle, rgba(255,255,255,.07) calc(2.2 * var(--u)), transparent calc(2.6 * var(--u))) 0 0 / calc(11.3 * var(--u)) calc(11.3 * var(--u)),
    linear-gradient(180deg, var(--forest-light) 0%, var(--forest) 45%, var(--forest-deep) 100%);
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-14 * var(--u)) rgba(22,48,26,.9),
              inset 0 1px 0 rgba(255,255,255,.25);
}
.jm-card small {
  position: absolute; top: calc(61 * var(--u)); left: calc(49 * var(--u));
  font-size: calc(22.5 * var(--u)); font-weight: 600; letter-spacing: .09em; color: rgba(255,255,255,.75);
}
.jm-pill {
  position: absolute; top: calc(47 * var(--u)); right: calc(49 * var(--u));
  padding: calc(10 * var(--u)) calc(25 * var(--u)); border-radius: 99px;
  background: rgba(255,255,255,.15); color: #fff; font-size: calc(24.5 * var(--u));
}
.jm-card strong {
  position: absolute; top: calc(118 * var(--u)); left: calc(49 * var(--u));
  font-size: calc(66 * var(--u)); font-weight: 600; letter-spacing: -.025em; color: #fff;
}
.jm-card em {
  position: absolute; top: calc(206 * var(--u)); left: calc(49 * var(--u));
  font-style: normal; font-size: calc(28.5 * var(--u)); color: rgba(212,242,92,.9);
}

/* ------------------------------------------------------ quick actions */

.jm-acts {
  top: calc(588 * var(--u)); left: calc(124 * var(--u)); width: calc(490 * var(--u));
  display: flex; justify-content: space-between;
}
.jm-acts span {
  width: calc(110 * var(--u)); display: grid; justify-items: center;
  gap: calc(16 * var(--u)); font-size: calc(24.5 * var(--u)); white-space: nowrap;
}
.jm-acts i {
  width: calc(110 * var(--u)); height: calc(110 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--forest-grad);
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(22,48,26,.6);
}
.jm-acts svg { width: calc(45 * var(--u)); height: calc(45 * var(--u)); }

/* --------------------------------------------------------- send money */

.jm-h { top: calc(800 * var(--u)); left: calc(41 * var(--u)); font-size: calc(43 * var(--u)); font-weight: 500; letter-spacing: -.015em; }

.jm-field {
  left: calc(41 * var(--u)); width: calc(656 * var(--u)); height: calc(115 * var(--u));
  border-radius: calc(37 * var(--u)); border: calc(2 * var(--u)) solid var(--outline);
  background: var(--surface-v);
  display: flex; align-items: center; padding: 0 calc(33 * var(--u));
  font-size: calc(32.5 * var(--u));
}
/* The label floats onto the outline, half over the page and half over the field. */
.jm-field label {
  position: absolute; top: calc(-15 * var(--u)); left: calc(24 * var(--u));
  padding: 0 calc(8 * var(--u));
  background: linear-gradient(var(--bg) 50%, var(--surface-v) 50%);
  font-size: calc(24.5 * var(--u)); line-height: 1.2; color: var(--on-v);
}
.jm-phone { top: calc(880 * var(--u)); }
.jm-ph-empty, .jm-ph-full { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 calc(33 * var(--u)); }
.jm-ph-empty { color: var(--on-v); }
.jm-amt { top: calc(1192 * var(--u)); border: calc(3 * var(--u)) solid var(--on); padding-left: calc(32 * var(--u)); }
.jm-amt label { color: var(--on); top: calc(-16 * var(--u)); left: calc(23 * var(--u)); }

.jm-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.jm-caret {
  display: inline-block; width: calc(3 * var(--u)); height: calc(38 * var(--u));
  margin-left: calc(2 * var(--u)); background: var(--on);
  animation: jm-blink .9s steps(1) infinite;
}

/* Pill buttons in forest green; disabled is the same green, faded. */
.jm-btn {
  left: calc(41 * var(--u)); width: calc(656 * var(--u)); height: calc(119 * var(--u));
  border-radius: 99px; overflow: hidden;
  font-size: calc(30.5 * var(--u)); font-weight: 500;
}
.jm-btn > span { position: absolute; inset: 0; display: grid; place-items: center; }
.jm-btn-off { background: linear-gradient(135deg, rgba(76,122,66,.45), rgba(22,48,26,.45)); color: rgba(255,255,255,.8); }
.jm-btn-on { background: var(--forest-grad); color: #fff; }
.jm-find { top: calc(1020 * var(--u)); }
.jm-send { top: calc(1340 * var(--u)); overflow: visible; }
.jm-send .jm-btn-on { border-radius: inherit; }

.jm-payee {
  top: calc(1020 * var(--u)); left: calc(41 * var(--u)); width: calc(656 * var(--u)); height: calc(150 * var(--u));
  border-radius: calc(49 * var(--u)); background: var(--surface-v);
  display: flex; align-items: center; gap: calc(29 * var(--u)); padding: 0 calc(29 * var(--u));
}
.jm-payee .jm-av { width: calc(90 * var(--u)); height: calc(90 * var(--u)); font-size: calc(31 * var(--u)); --tone: #3A4F6E; }
.jm-payee p { flex: 1; }
.jm-payee b { display: block; font-size: calc(32.5 * var(--u)); font-weight: 500; margin-bottom: calc(4 * var(--u)); }
.jm-payee small { display: block; font-size: calc(24.5 * var(--u)); line-height: 1.3; color: var(--on-v); }
.jm-payee > svg { width: calc(37 * var(--u)); height: calc(37 * var(--u)); color: var(--on-v); }

/* ---------------------------------------------------- recent activity */

.jm-below { inset: 0; }
.jm-act { left: calc(41 * var(--u)); width: calc(656 * var(--u)); top: calc(1200 * var(--u)); }
.jm-b2 .jm-act { top: calc(1520 * var(--u)); }
.jm-act-head { display: flex; align-items: center; height: calc(52 * var(--u)); margin-bottom: calc(25 * var(--u)); }
.jm-act-head b { flex: 1; font-size: calc(43 * var(--u)); font-weight: 500; letter-spacing: -.015em; }
.jm-act-head span { font-size: calc(28.5 * var(--u)); color: var(--on-v); margin-right: calc(12 * var(--u)); }
.jm-act-head svg { width: calc(42 * var(--u)); height: calc(42 * var(--u)); color: var(--on-v); }

/* One rounded list: only the first and last rows round their ends. */
.jm-txs { border-radius: calc(41 * var(--u)); background: var(--surface-v); padding: calc(8 * var(--u)) 0; }
.jm-tx { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(24 * var(--u)) calc(33 * var(--u)); }
.jm-tx p { flex: 1; min-width: 0; }
.jm-tx b { display: block; font-size: calc(32.5 * var(--u)); font-weight: 500; margin-bottom: calc(2 * var(--u)); }
.jm-tx small { display: block; font-size: calc(24.5 * var(--u)); line-height: 1.33; color: var(--on-v); }
.jm-tx strong { font-size: calc(32.5 * var(--u)); font-weight: 500; white-space: nowrap; }
.jm-tx strong.in { color: var(--incoming); }

/* ------------------------------------------------------ receipt sheet */

.jm-scrim { inset: 0; background: rgba(0,0,0,.45); opacity: 0; }
.jm-sheet {
  left: 0; right: 0; bottom: 0; transform: translateY(101%);
  padding: calc(85 * var(--u)) calc(49 * var(--u)) calc(53 * var(--u));
  border-radius: calc(61 * var(--u)) calc(61 * var(--u)) 0 0; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.jm-handle {
  position: absolute; top: calc(25 * var(--u)); left: 50%;
  width: calc(82 * var(--u)); height: calc(8 * var(--u)); margin-left: calc(-41 * var(--u));
  border-radius: 99px; background: var(--outline);
}
.jm-ok {
  width: calc(131 * var(--u)); height: calc(131 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; background: var(--lime); color: var(--ink);
}
.jm-ok svg { width: calc(61 * var(--u)); height: calc(61 * var(--u)); stroke-width: 2; }
.jm-ok-t { margin-top: calc(29 * var(--u)); font-size: calc(43 * var(--u)); font-weight: 500; }
.jm-ok-a { margin-top: calc(12 * var(--u)); font-size: calc(74 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.jm-sheet dl {
  width: 100%; margin-top: calc(45 * var(--u)); padding: calc(27 * var(--u)) calc(37 * var(--u));
  border-radius: calc(49 * var(--u)); background: var(--surface-v);
  display: grid; grid-template-columns: calc(165 * var(--u)) 1fr; text-align: left;
}
.jm-sheet dt, .jm-sheet dd { padding: calc(10 * var(--u)) 0; }
.jm-sheet dt { font-size: calc(24.5 * var(--u)); color: var(--on-v); }
.jm-sheet dd { font-size: calc(28.5 * var(--u)); }
.jm-share { position: relative; left: auto; width: 100%; margin-top: calc(41 * var(--u)); }
.jm-share .jm-btn-on { display: flex; justify-content: center; gap: calc(20 * var(--u)); align-items: center; }
.jm-share svg { width: calc(41 * var(--u)); height: calc(41 * var(--u)); }
.jm-close { margin-top: calc(26 * var(--u)); font-size: calc(30.5 * var(--u)); font-weight: 500; color: var(--on-v); }

/* --------------------------------------------------------- the flow */

.jm-tap {
  width: calc(96 * var(--u)); height: calc(96 * var(--u)); margin: calc(-48 * var(--u)) 0 0 calc(-48 * var(--u));
  border-radius: 50%; background: rgba(255,255,255,.5);
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255,255,255,.18);
  opacity: 0; pointer-events: none;
}
.jm-tap-find { left: calc(369 * var(--u)); top: calc(1080 * var(--u)); }
.jm-tap-send { left: calc(369 * var(--u)); top: calc(1400 * var(--u)); }
.jm-reset { inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }

.jm-ph-full, .jm-num, .jm-phone, .jm-phone label, .jm-find .jm-btn-on, .jm-b1 .jm-find,
.jm-b1, .jm-b2, .jm-b3, .jm-amt-v, .jm-tap-find, .jm-tap-send,
.jm-scrim, .jm-sheet, .jm-bal-a, .jm-bal-b, .jm-reset, .jm-ph-full .jm-caret, .jm-amt .jm-caret {
  animation-duration: var(--clock); animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}

/* The phone number types in while the field has focus. */
.jm-ph-empty { animation: jm-ph-empty var(--clock) infinite; }
@keyframes jm-ph-empty { 0%, 5% { opacity: 1; } 5.5%, 66% { opacity: 0; } 67%, 100% { opacity: 1; } }
.jm-ph-full { animation-name: jm-ph-full; }
@keyframes jm-ph-full { 0%, 5% { opacity: 0; } 5.5%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
.jm-num { width: 10ch; animation-name: jm-type-num; animation-timing-function: steps(10, end); }
@keyframes jm-type-num { 0%, 5.5% { width: 0; } 15%, 100% { width: 10ch; } }
.jm-phone { animation-name: jm-focus; }
@keyframes jm-focus {
  0%, 4.5%  { border-color: var(--outline); border-width: calc(2 * var(--u)); }
  5.5%, 20% { border-color: var(--on); border-width: calc(3 * var(--u)); }
  21%, 100% { border-color: var(--outline); border-width: calc(2 * var(--u)); }
}
.jm-phone label { animation-name: jm-focus-label; }
@keyframes jm-focus-label { 0%, 20% { color: var(--on); } 21%, 100% { color: var(--on-v); } }
.jm-ph-full .jm-caret { animation-name: jm-caret-phone; animation-timing-function: steps(1); }
@keyframes jm-caret-phone { 0%, 20% { opacity: 1; } 21%, 100% { opacity: 0; } }

/* Find recipient wakes up once there are enough digits, then gets tapped. */
.jm-find .jm-btn-on { animation-name: jm-find-on; }
@keyframes jm-find-on { 0%, 14.5% { opacity: 0; } 15.5%, 100% { opacity: 1; } }
.jm-b1 .jm-find { animation-name: jm-press; }
@keyframes jm-press { 0%, 18% { transform: none; } 19% { transform: scale(.97); } 20.5%, 100% { transform: none; } }
.jm-tap-find { animation-name: jm-tap-find; }
@keyframes jm-tap-find {
  0%, 17%  { opacity: 0; transform: scale(.6); }
  18.5%    { opacity: 1; transform: scale(1); }
  21%, 100% { opacity: 0; transform: scale(1.25); }
}

/* The three states under the phone field. */
.jm-b1 { animation-name: jm-b1; }
@keyframes jm-b1 { 0%, 20.5% { opacity: 1; transform: none; } 23%, 96% { opacity: 0; transform: translateY(calc(10 * var(--u))); } 96.5%, 100% { opacity: 1; transform: none; } }
.jm-b2 { animation-name: jm-b2; }
@keyframes jm-b2 { 0%, 20.5% { opacity: 0; transform: translateY(calc(-10 * var(--u))); } 23%, 66% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; transform: none; } }
.jm-b3 { animation-name: jm-b3; }
@keyframes jm-b3 { 0%, 66% { opacity: 0; } 68%, 96% { opacity: 1; } 96.5%, 100% { opacity: 0; } }

/* The amount types into the field and the Send label together. */
.jm-amt-v { width: 4ch; animation-name: jm-type-amt; animation-timing-function: steps(4, end); }
@keyframes jm-type-amt { 0%, 24% { width: 0; } 29%, 100% { width: 4ch; } }
.jm-amt .jm-caret { animation-name: jm-caret-amt; animation-timing-function: steps(1); }
@keyframes jm-caret-amt { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
.jm-send { animation: jm-press-send var(--clock) infinite ease-in-out; }
@keyframes jm-press-send { 0%, 33% { transform: none; } 34.5% { transform: scale(.97); } 36%, 100% { transform: none; } }
.jm-tap-send { animation-name: jm-tap-send; }
@keyframes jm-tap-send {
  0%, 32.5% { opacity: 0; transform: scale(.6); }
  34%       { opacity: 1; transform: scale(1); }
  36.5%, 100% { opacity: 0; transform: scale(1.25); }
}

/* The receipt slides up, as the app's bottom sheet does, then away. */
.jm-scrim { animation-name: jm-scrim; }
@keyframes jm-scrim { 0%, 36% { opacity: 0; } 39%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
.jm-sheet { animation-name: jm-sheet; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@keyframes jm-sheet { 0%, 36% { transform: translateY(101%); } 40%, 64% { transform: none; } 67.5%, 100% { transform: translateY(101%); } }

/* Back on home, the balance has gone down by the amount sent. */
.jm-bal-a { animation-name: jm-bal-a; }
@keyframes jm-bal-a { 0%, 66% { opacity: 1; } 68%, 96% { opacity: 0; } 96.5%, 100% { opacity: 1; } }
.jm-bal-b { animation-name: jm-bal-b; }
@keyframes jm-bal-b { 0%, 66% { opacity: 0; } 68%, 96% { opacity: 1; } 96.5%, 100% { opacity: 0; } }

.jm-reset { animation-name: jm-reset; }
@keyframes jm-reset { 0%, 93% { opacity: 0; } 96%, 97% { opacity: 1; } 100% { opacity: 0; } }

@keyframes jm-blink { 50% { opacity: 0; } }

/* Without motion, hold the most telling frame: payee found, amount entered. */
@media (prefers-reduced-motion: reduce) {
  .jm *, .jm .jm-caret { animation: none !important; }
  .jm-b1, .jm-b3, .jm-ph-empty, .jm-bal-b, .jm-tap, .jm-scrim, .jm-caret, .jm-find .jm-btn-on { opacity: 0; }
  .jm-sheet { transform: translateY(101%); }
}