/* /memecoin-trading-app: the app on a phone, one screen after another, beside the five moves of a trade.
   The screens are the app itself in its sample market (docs-public/capture, --sample): invented names and figures.
   On top of /paper-trading/paper-trading.css. Static page, no script: the screens and the step that goes with them
   change together on one CSS clock, and only when motion is wanted. */

.ma-hero h1{ font-size:clamp(36px, 5.4vw, 66px); max-width:11em; }
.ma-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:center; }
@media (min-width:1000px){ .ma-grid{ grid-template-columns:minmax(0,1fr) auto; gap:56px; } }

.ma-art{ margin:0; }
.ma-stage{ display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; gap:28px; }

/* the phone: a plain frame around the app's own screen (430 x 932, the capture's phone) */
.ma-phone{ width:276px; padding:9px; border-radius:46px; background:linear-gradient(160deg, #1d1b2c, #0b0a15 60%);
  box-shadow:0 0 0 1px rgba(203,208,235,.16), 0 30px 80px rgba(0,0,0,.65), 0 0 140px rgba(139,88,228,.20); }
.ma-screen{ position:relative; aspect-ratio:430 / 932; border-radius:37px; overflow:hidden; background:var(--ink); }
.ma-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.ma-screen img:first-child{ opacity:1; }

/* the five moves, numbered because they are a sequence */
.ma-steps{ order:-1; list-style:none; margin:0; padding:0; width:236px; display:grid; gap:4px; counter-reset:m; }
.ma-steps li{ counter-increment:m; position:relative; padding:12px 14px 12px 48px; border-radius:12px; color:var(--soft); }
.ma-steps li::before{ content:counter(m); position:absolute; left:12px; top:12px; width:24px; height:24px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line-hi); font:700 12px/1 var(--sans); color:var(--muted); }
.ma-steps b{ display:block; font:700 16px/1.25 var(--sans); letter-spacing:-.01em; color:inherit; }
.ma-steps span{ display:block; margin-top:3px; font:500 13px/1.35 var(--sans); color:var(--muted); }

.ma-cap{ margin:22px 0 0; font:500 13px/1.45 var(--sans); color:var(--muted); text-align:center; }

/* one clock, 16 s: five screens of 3.2 s each, and the step that matches the screen lit */
@media (prefers-reduced-motion: no-preference){
  .ma-screen img{ animation:ma-show 16s linear infinite; }
  .ma-steps li{ animation:ma-on 16s linear infinite; }
  .ma-steps li::before{ animation:ma-dot 16s linear infinite; }
  .ma-screen img:nth-child(1), .ma-steps li:nth-child(1), .ma-steps li:nth-child(1)::before{ animation-delay:-.5s; }
  .ma-screen img:nth-child(2), .ma-steps li:nth-child(2), .ma-steps li:nth-child(2)::before{ animation-delay:-13.3s; }
  .ma-screen img:nth-child(3), .ma-steps li:nth-child(3), .ma-steps li:nth-child(3)::before{ animation-delay:-10.1s; }
  .ma-screen img:nth-child(4), .ma-steps li:nth-child(4), .ma-steps li:nth-child(4)::before{ animation-delay:-6.9s; }
  .ma-screen img:nth-child(5), .ma-steps li:nth-child(5), .ma-steps li:nth-child(5)::before{ animation-delay:-3.7s; }
  .ma-steps li{ color:var(--muted); }
}
@keyframes ma-show{ 0%{ opacity:0; } 3%{ opacity:1; } 22%{ opacity:1; } 24%{ opacity:0; } 100%{ opacity:0; } }
@keyframes ma-on{ 0%, 19.9%{ background:var(--raised); color:var(--w); } 20%, 100%{ background:transparent; color:var(--muted); } }
@keyframes ma-dot{ 0%, 19.9%{ background:var(--g); border-color:var(--g); color:#fff; } 20%, 100%{ background:transparent; border-color:var(--line-hi); color:var(--muted); } }

/* the install picture: the phone in the middle of the docs' picture */
#install .shot.phone img{ aspect-ratio:4 / 5; object-position:50% 50%; }
@media (min-width:900px){ #install .split{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }

@media (max-width:999.98px){
  .ma-hero .ma-copy{ max-width:40em; }
}
@media (max-width:639.98px){
  .ma-stage{ grid-template-columns:minmax(0,1fr); justify-items:center; gap:22px; }
  .ma-phone{ width:min(262px, 74vw); padding:8px; border-radius:42px; }
  .ma-screen{ border-radius:34px; }
  .ma-steps{ order:0; width:100%; max-width:420px; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ma-steps li:last-child{ grid-column:1 / -1; }
  .ma-steps li{ padding:10px 10px 10px 42px; }
  .ma-steps li::before{ left:10px; top:10px; }
  .ma-steps b{ font-size:15px; }
  .ma-steps span{ font-size:12px; }
}