/* Mobile app is coming soon: Acrune's mobile card (coinbase-wallet-preview .collectibles), in Ojafi's colours. Closes the page, above the footer. */
.as {
  position: relative;
  overflow: hidden;
  --as-bg: #111;
  --as-surface: #1b1a19;
  --as-rule: #ffffff0f;
  --as-dash: #2c2a28;
  --as-text: #f8f8f8;
  --as-muted: #9c9fa1;
  --as-brand: #F2711E;
  --as-star-cool: #ffe6d2;
  --as-star-warm: #ffffff;
  background: var(--as-bg);
  color: var(--as-text);
  padding: 96px 24px;
  font: 400 16px/24px "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
.as *, .as *::before, .as *::after { box-sizing: border-box; }
.as p { margin: 0; }

.as-card {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  padding: 6px;
  border-radius: 16px;
}
.as-dashes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.as-dashes rect {
  stroke: var(--as-dash);
  animation: as-march 1.2s linear infinite;
}
@keyframes as-march { to { stroke-dashoffset: -14; } }

.as-backdrop {
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(var(--as-surface), transparent);
}
/* The art keeps its 625 x 186 reference box and is scaled as a whole on narrow screens. */
.as-art {
  --as-scale: 1;
  position: relative;
  width: 625px;
  height: 186px;
  left: 50%;
  transform: translateX(-50%) scale(var(--as-scale));
  transform-origin: 50% 0;
  margin-top: -5px;
  margin-bottom: calc(186px * (var(--as-scale) - 1));
}
.as-art > svg { display: block; }
.as-coin {
  position: absolute;
  left: 261px;
  top: 50px;
  width: 104px;
  height: 104px;
}

.as-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px 54px;
  margin-top: -8px;
}
.as-title { font-weight: 500; }
.as-soon {
  position: relative;
  color: var(--as-brand);
}
.as-underline {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  overflow: visible;
  animation: as-underline 4s infinite;
}
.as-shimmer {
  background: linear-gradient(90deg, var(--as-brand) 30%, #fff 50%, var(--as-brand) 70%);
  background-size: 400% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: as-shimmer 4s infinite;
}
@keyframes as-shimmer {
  0% { background-position: 100% 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  25% { background-position: 0 0; animation-timing-function: step-end; }
  25.01%, 100% { background-position: 100% 0; }
}
@keyframes as-underline {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  15% { clip-path: inset(0); animation-timing-function: linear; }
  65% { clip-path: inset(0); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  82% { clip-path: inset(0 0 0 100%); }
  82.01%, 100% { clip-path: inset(0 100% 0 0); }
}
.as-sub {
  max-width: 252px;
  margin-top: 8px;
  color: var(--as-muted);
  font-size: 14px;
  line-height: 20px;
  text-wrap: balance;
}
/* Not a button: there is nothing to press until the app ships. */
.as-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  margin-top: 22px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--as-surface);
  box-shadow: inset 0 0 0 1px var(--as-rule);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.as-store { display: block; flex-shrink: 0; }
.as-apple path { fill: currentColor; }
.as-link {
  margin-top: 12px;
  color: var(--as-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color 150ms ease-out;
}
.as-link:hover { color: var(--as-text); }
.as-link:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 809px) {
  .as { padding: 64px 16px; }
  /* the text link: 14px and a 44px tall tap target */
  .as-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; }
}
/* Below the art's width the whole scene scales down; the outer stars sit at x 133 to 494 of 625. */
@media (max-width: 560px) {
  .as-art { --as-scale: 0.84; }
}
@media (max-width: 420px) {
  .as-art { --as-scale: 0.76; }
}

@media (prefers-reduced-motion: reduce) {
  .as *, .as *::before, .as *::after { animation: none !important; }
  .as-underline { clip-path: none; }
}