/* The map from the other side, shared by /earn (its held opener, five steps) and the home (#earn, resting on
   step 3). You are the dot; real recent prices from the platform pop around you. JS: pages/earn.js. */

.shot { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 4px; color: rgba(18,18,18,.42); background: #D6D1C6 repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 7px, transparent 7px 14px); }
.shot svg { width: 30%; height: auto; }

/* ---------- the opener: held 300vh on desktop, one step per fifth ---------- */
.earn { height: 300vh; height: 300svh; --halo: var(--y); --yd: clamp(96px, 13.5vh, 132px); --np-fs: clamp(30px, min(3.4vw, 5.6vh), 52px); }
.earn .frame { background: var(--y); }
.earn-map { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.earn-map::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--y) 0, var(--y) 24%, color-mix(in srgb, var(--y) 0%, transparent) 48%); }
.earn-stage { position: absolute; inset: 0; z-index: 2; }

/* you: the black dot with its own pulse once you are free, and the chip that says what is happening to you */
.you { position: absolute; z-index: 3; left: var(--px); top: var(--py); width: 0; height: 0; }
.you-dot { position: absolute; left: 0; top: 0; translate: -50% -50%; width: var(--yd); height: var(--yd); border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 calc(var(--yd) * .08) #fff, 0 calc(var(--yd) * .16) calc(var(--yd) * .3) -.1em rgba(18,18,18,.45); transition: transform .4s var(--out); }
.you-dot span { font: 600 15px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.you-ring { position: absolute; left: 0; top: 0; width: var(--yd); height: var(--yd); translate: -50% -50%; border-radius: 50%; border: 3px solid var(--ink); opacity: 0; pointer-events: none; }
html.motion .earn:not([data-step="1"]) .you-ring { animation: you-ring 2.4s var(--out) infinite; }
html.motion .earn:not([data-step="1"]) .you-ring.r2 { animation-delay: 1.2s; }
@keyframes you-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
html:not(.motion) .earn:not([data-step="1"]) .you-ring { opacity: .25; transform: scale(2); }
html:not(.motion) .earn:not([data-step="1"]) .you-ring.r2 { opacity: .12; transform: scale(3); }
.you-chip { position: absolute; left: 0; top: calc(var(--yd) * -.5 - 16px); translate: -50% -100%; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--ink); color: #fff; border-radius: 999px; padding: .62em 1em .54em; font: 600 18px/1 var(--text); opacity: 0; transform: translateY(10px) scale(.8); transition: opacity .2s var(--in), transform .3s var(--in); }
.you-chip svg { width: 16px; height: 16px; color: var(--y); }
.you-chip.c-free { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.you-chip.c-free .dot { box-shadow: 0 0 0 1.5px var(--ink); }
.earn[data-step="1"] .c-id, .earn[data-step="2"] .c-free, .earn[data-step="3"] .c-hand, .earn[data-step="4"] .c-hand { opacity: 1; transform: none; transition: opacity .25s var(--out) .1s, transform .45s var(--out) .1s; }

/* recent tasks: real prices from the platform, in the app's own pill, popping around you */
.near-label { position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--nav-h) + clamp(18px, 3vh, 32px)); font: 600 13px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 8px; padding: 9px 12px 8px; opacity: 0; transition: opacity .3s var(--out); }
.near-label[hidden] { display: none; }
.earn[data-step="3"] .near-label, .earn[data-step="4"] .near-label { opacity: 1; }
.near-pills { position: absolute; inset: 0; }
.np { position: absolute; left: calc(var(--px) + var(--ox)); top: calc(var(--py) + var(--oy)); translate: -50% -50%; display: grid; justify-items: center; gap: 8px; font: 800 var(--np-fs)/1 var(--display); opacity: 0; transform: translateY(-24px) scale(.6); transition: transform .4s var(--in), opacity .2s var(--in); }
.np .tk-p { border-width: max(3px, .07em); }
.np small { font: 600 14px/1 var(--text); white-space: nowrap; background: #fff; color: var(--ink); border-radius: 8px; padding: 6px 9px 5px; box-shadow: inset 0 0 0 1.5px var(--ink); rotate: 2deg; }
.np:nth-child(even) small { rotate: -2deg; }
.earn[data-step="3"] .np, .earn[data-step="4"] .np { opacity: 1; transform: none; transition: transform .45s var(--out) calc(var(--k, 0) * .15s), opacity .25s var(--out) calc(var(--k, 0) * .15s); }
.earn[data-step="4"] .np:not(:first-child) { opacity: .35; }
.earn[data-step="5"] .np { opacity: 0; transform: scale(.8); }

/* step 4: the photo you send, approved */
.you-proof { --w: clamp(150px, 12.5vw, 190px); position: absolute; z-index: 4; left: calc(var(--px) + var(--yd) * .7); top: calc(var(--py) - var(--w) * .2); width: var(--w); display: grid; gap: 7px; padding: 7px 7px 9px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(18,18,18,.12); opacity: 0; transform: translate(calc(var(--yd) * -.7), 20px) scale(.2); transition: transform .35s var(--in), opacity .2s var(--in); }
.earn[data-step="4"] .you-proof { opacity: 1; transform: rotate(4deg); transition: transform .6s var(--out), opacity .25s var(--out); }
.you-proof .proof-cap { font: 600 13px/1 var(--text); padding: 0 2px; }
.approved { position: absolute; left: 50%; bottom: -18px; translate: -50% 0; rotate: -6deg; display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; border-radius: 999px; padding: 9px 14px 8px; font: 600 15px/1 var(--text); white-space: nowrap; }
.approved svg { width: 16px; height: 16px; color: var(--y); }
html.motion .earn[data-step="4"] .approved { animation: pin-drop .5s var(--out) .45s both; }

/* step 5: the money lands on you */
.you-paid { position: absolute; z-index: 5; left: var(--px); top: var(--py); translate: -50% -50%; display: grid; justify-items: center; gap: 14px; opacity: 0; transform: translateY(-60px) scale(1.4) rotate(-10deg); transition: transform .3s var(--in), opacity .15s var(--in); }
.you-paid .pill { font-size: clamp(84px, min(9.4vw, 15vh), 140px); padding: .12em .34em .02em; border-width: .03em; box-shadow: 0 .08em .2em -.04em rgba(18,18,18,.4); }
.you-paid .you-chip { position: static; translate: none; opacity: 1; transform: none; font-size: 18px; }
.earn[data-step="5"] .you-paid { opacity: 1; transform: rotate(-3deg); transition: transform .45s var(--out) .1s, opacity .2s var(--out) .1s; }
.earn[data-step="5"] .you-dot { transform: scale(.6); }

/* type over the quiet side of the map */
.earn-in { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(20px, 4.4vh, 48px)); pointer-events: none; }
.earn-in > * { pointer-events: auto; }
.earn-h { font: 800 var(--fs-inner)/.92 var(--display); letter-spacing: -.035em; }
.earn-h .ln { padding-right: .3em; }
.earn-lead { margin-top: clamp(16px, 2.6vh, 28px); max-width: 36ch; font-weight: 600; }
.earn-acts { margin-top: clamp(18px, 3vh, 30px); }
.earn-steps { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4.4vh, 44px); z-index: 4; pointer-events: none; }
.steps { display: grid; gap: 2px; max-width: min(560px, 42vw); }
.steps li { display: flex; align-items: center; gap: 14px; padding: 5px 0; font: 800 clamp(19px, min(1.7vw, 2.9vh), 26px)/1.12 var(--display); letter-spacing: -.012em; opacity: .38; transition: opacity .3s var(--out); }
.steps li.is-on { opacity: 1; }
.steps .pill { flex: none; width: 1.9em; font-size: 17px; padding: .3em 0 .16em; border-width: 2.5px; transition: background-color .3s var(--out), color .3s var(--out); }
.steps li.is-on .pill { background: var(--ink); color: var(--y); }

@media (max-width: 959px) {
  .earn { height: auto; --yd: 60px; --np-fs: 24px; }
  .earn .frame { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .earn-in { order: 1; height: auto; padding-top: calc(var(--nav-h) + 32px); padding-bottom: 26px; }
  .earn-h { letter-spacing: -.04em; }
  .earn-lead { max-width: none; font-size: 17px; }
  .earn-map { order: 2; position: relative; inset: auto; height: min(118vw, 520px); border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
  .earn-map::after { display: none; }
  .near-label { top: 14px; right: 14px; font-size: 11px; }
  .you-chip { font-size: 14px; }
  .earn-steps { order: 3; position: static; padding-top: 28px; padding-bottom: 44px; pointer-events: auto; }
  .steps { max-width: none; gap: 6px; }
  .steps li { opacity: 1; font-size: 22px; align-items: flex-start; }
  .steps .pill { margin-top: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .you-chip, .np, .you-proof, .you-paid, .you-dot, .steps li, .steps .pill { transition-duration: .2s !important; transition-delay: 0s !important; }
  .np, .you-proof, .you-paid { transform: none !important; }
}
@media (prefers-contrast: more) {
  .you-proof { box-shadow: 0 0 0 2px var(--ink); }
}