/* Ashback, the "more chains" page (coming soon). One sheet, own origin only,
   system type faces. The page reads whole with no script: every motion rule
   sits under html.motion, a class the script adds when motion is wanted. The
   shared parts (tokens, bar, buttons, small type, first screen, bands, cards,
   embers, foot) are the rules of the coin page and the scam page, copied. */

:root {
  --soot: #080605;
  --soot-2: #110c09;
  --soot-3: #1a120d;
  --iron: #6e6257;
  --ash: #bdb1a4;
  --bone: #efe6da;
  --ember: #ff6a1c;
  --ember-hot: #ffa766;
  --ink: #170a03;
  --line: rgba(239, 230, 218, 0.13);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pad: clamp(20px, 5.2vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--soot);
  color: var(--bone);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--soot);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--ember-hot);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--bone);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- the top bar ---------- */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(10px, env(safe-area-inset-top)) var(--pad) 10px;
  background: rgba(8, 6, 5, 0.74);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* over the first screen's picture the bar is clear glass */
html.motion .bar:not(.is-solid) {
  background: rgba(8, 6, 5, 0);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.72em;
  min-height: 44px;
  font: 700 13px/1 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
}
.mark::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 14px 2px rgba(255, 106, 28, 0.8);
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font: 650 16px/1.1 var(--sans);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.35s var(--ease), background-color 0.25s var(--ease);
}
.btn--small,
.btn--big {
  color: var(--ink);
  background: linear-gradient(180deg, #ffb27a 0%, #ff7a2c 58%, #f8621a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.75), inset 0 0 0 1px rgba(255, 190, 140, 0.35), 0 10px 30px -10px rgba(255, 106, 28, 0.7);
}
.btn--small { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.btn--big { min-height: 58px; padding: 0 34px; font-size: 18px; }
.btn--line {
  color: var(--bone);
  background: rgba(239, 230, 218, 0.04);
  box-shadow: inset 0 0 0 1px rgba(239, 230, 218, 0.28);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--big:hover { box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.8), inset 0 0 0 1px rgba(255, 190, 140, 0.4), 0 16px 44px -10px rgba(255, 106, 28, 0.85); }
.btn--line:hover { background: rgba(239, 230, 218, 0.09); }

/* the breathing glow behind the main call */
.btn--big::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 80% at 50% 60%, rgba(255, 106, 28, 0.5), rgba(255, 106, 28, 0) 70%);
  opacity: 0.55;
  pointer-events: none;
}
html.motion .btn--big::after { animation: breathe 6.5s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.8; transform: scale(1.04); }
}

/* ---------- small type ---------- */

.fine {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ash);
}
.headline {
  font: 400 clamp(40px, 11.2vw, 86px)/1 var(--serif);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* ---------- the first screen ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  background: var(--soot);
}
.hero__art,
.hero__shade { position: absolute; inset: 0; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.hero__shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.62) 0%, rgba(8, 6, 5, 0) 16%),
    linear-gradient(0deg, rgba(8, 6, 5, 0.97) 0%, rgba(8, 6, 5, 0.94) 38%, rgba(8, 6, 5, 0.82) 49%, rgba(8, 6, 5, 0.4) 60%, rgba(8, 6, 5, 0) 72%);
}
.hero__embers { z-index: 1; inset: 0 0 46% 0; overflow: hidden; }
.hero__words {
  position: relative;
  z-index: 2;
  padding: 84px var(--pad) calc(26px + env(safe-area-inset-bottom));
}
.lede {
  max-width: 32ch;
  margin-top: 14px;
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.38;
  color: #e4dacd;
}
.hero__call { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.hero__call .btn { flex: 1 1 170px; }
html.motion .hero__words > * { animation: rise 0.7s var(--ease) both; }
html.motion .hero__words > :nth-child(2) { animation-delay: 0.08s; }
html.motion .hero__words > :nth-child(3) { animation-delay: 0.16s; }
html.motion .hero__words > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- the chains ---------- */

.chains {
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(255, 106, 28, 0.14), rgba(255, 106, 28, 0) 72%),
    var(--soot);
}
/* no title stands over the cards, so the band begins closer to the first screen */
.band.chains { padding-top: clamp(48px, 7vw, 96px); }
.chains__grid { display: grid; gap: 16px; }
/* the small heading over the second group, and the closing line under both groups */
.chains__label {
  margin: clamp(44px, 7vw, 80px) 0 18px;
  font: 700 12px/1.25 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ember-hot);
}
.chains__more { margin-top: clamp(32px, 5vw, 52px); text-align: center; }
.chain { display: flex; flex-direction: column; padding: 14px 14px 22px; }
/* the plate: a light tag that carries the network's own logo, untouched, or
   its name in plain type where no logo is used */
.plate {
  display: grid;
  place-items: center;
  height: 96px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(23, 10, 3, 0.08), 0 14px 30px -18px rgba(0, 0, 0, 0.9);
}
.plate img { width: auto; height: 34px; max-width: 78%; }
/* this file brings its own clear space around the mark */
.plate img.is-padded { height: 88px; }
.chain__name {
  padding: 0 8px;
  font: 700 12px/1.25 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ember-hot);
}
.plate .chain__name {
  padding: 0;
  font: 400 34px/1 var(--serif);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.fact { margin-top: 14px; padding: 0 8px; font-size: 16.5px; line-height: 1.45; color: var(--bone); }
.fact__label { display: block; margin-bottom: 2px; font-size: 13.5px; color: var(--ash); }
.state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 8px 0;
  padding-top: 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ash);
}
.state::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--iron);
}

/* ---------- the call ---------- */

.band.call { padding-top: 0; }
.call {
  text-align: center;
  background: var(--soot);
}
.call__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.call__row .btn { flex: 0 1 240px; }

/* ---------- bands ---------- */

.band {
  position: relative;
  padding: clamp(76px, 12vw, 150px) 0;
  overflow: hidden;
  overflow: clip;
}
.wrap {
  position: relative;
  z-index: 1;
  width: min(1120px, 100% - 2 * var(--pad));
  margin: 0 auto;
}
.wrap--narrow { width: min(760px, 100% - 2 * var(--pad)); }

.card {
  position: relative;
  padding: clamp(20px, 3.2vw, 34px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 167, 102, 0.085) 0%, rgba(239, 230, 218, 0.025) 44%, rgba(8, 6, 5, 0.25) 100%), rgba(17, 12, 9, 0.92);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 236, 214, 0.1), 0 44px 80px -44px rgba(0, 0, 0, 0.95);
}

html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* drifting embers, compositor only */
.embers { position: absolute; inset: 0; pointer-events: none; }
.embers i {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  animation-duration: 12s;
  border-radius: 50%;
  background: var(--ember-hot);
  box-shadow: 0 0 7px 1px rgba(255, 106, 28, 0.85);
  opacity: 0;
}
html.motion .embers i { animation-name: drift; animation-timing-function: linear; animation-iteration-count: infinite; }
html.motion .embers:not(.is-live) i { animation-play-state: paused; }
html .embers i:nth-child(1) { left: 6%; animation-duration: 13s; animation-delay: -2s; }
html .embers i:nth-child(2) { left: 17%; animation-duration: 16s; animation-delay: -9s; width: 2px; height: 2px; }
html .embers i:nth-child(3) { left: 29%; animation-duration: 11s; animation-delay: -5s; }
html .embers i:nth-child(4) { left: 41%; animation-duration: 15s; animation-delay: -12s; width: 2px; height: 2px; }
html .embers i:nth-child(5) { left: 53%; animation-duration: 12s; animation-delay: -1s; }
html .embers i:nth-child(6) { left: 64%; animation-duration: 17s; animation-delay: -7s; width: 4px; height: 4px; }
html .embers i:nth-child(7) { left: 73%; animation-duration: 12.5s; animation-delay: -10s; width: 2px; height: 2px; }
html .embers i:nth-child(8) { left: 82%; animation-duration: 14s; animation-delay: -4s; }
html .embers i:nth-child(9) { left: 90%; animation-duration: 11.5s; animation-delay: -8s; width: 2px; height: 2px; }
html .embers i:nth-child(10) { left: 96%; animation-duration: 15.5s; animation-delay: -13s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: 0.9; }
  55% { transform: translate3d(22px, -46vh, 0); opacity: 0.6; }
  100% { transform: translate3d(-14px, -92vh, 0); opacity: 0; }
}

/* ---------- foot ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 22px var(--pad) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* ---------- wider screens ---------- */

@media (min-width: 620px) {
  .chains__grid { grid-template-columns: 1fr 1fr; }
  /* a card whose plate carries the name has no name line under it: its facts start level with its neighbours' */
  .chain--name .plate { margin-bottom: 33px; }
}
@media (min-width: 1000px) {
  .chains__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .foot { padding-bottom: 28px; }
}
/* a landscape screen: the words stand at the left, beside the keeper */
@media (min-aspect-ratio: 4/5) {
  .hero { justify-content: center; }
  .hero__art img { object-position: 62% 50%; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(8, 6, 5, 0.6) 0%, rgba(8, 6, 5, 0) 18%),
      linear-gradient(90deg, rgba(8, 6, 5, 0.92) 0%, rgba(8, 6, 5, 0.74) 30%, rgba(8, 6, 5, 0.24) 52%, rgba(8, 6, 5, 0) 66%),
      linear-gradient(0deg, rgba(8, 6, 5, 0.7) 0%, rgba(8, 6, 5, 0) 26%);
  }
  .hero__embers { inset: 0 0 0 44%; }
  .hero__words > * { max-width: min(600px, 46vw); }
  .hero__call .btn { flex: 0 0 auto; }
  .lede { margin-top: 20px; }
}
/* a phone with the browser's bars on screen: the words stand closer */
@media (max-height: 720px) and (max-aspect-ratio: 4/5) {
  .headline { font-size: clamp(32px, 9.6vw, 40px); }
  .lede { margin-top: 10px; font-size: 16.5px; line-height: 1.36; }
  .hero__call { margin-top: 14px; }
}

/* ---------- the static path ---------- */

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