/* Ashback, the "get to know us" page. 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, lines, bands, cards,
   embers, foot) are the rules of the coin page and the scam page, copied;
   the address block is the coin page's own. */

: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;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --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 ---------- */

.eyebrow {
  margin-bottom: 14px;
  font: 700 12px/1.25 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ember-hot);
}
.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;
}
.title {
  max-width: 21ch;
  margin-bottom: clamp(28px, 5vw, 52px);
  font: 400 clamp(30px, 7.4vw, 58px)/1.05 var(--serif);
  letter-spacing: -0.02em;
  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));
}
.hero .eyebrow { text-shadow: 0 0 14px rgba(8, 6, 5, 0.9), 0 1px 2px rgba(8, 6, 5, 0.8); }
.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 reading parts ---------- */

.sheet { background: linear-gradient(180deg, var(--soot) 0%, var(--soot-2) 50%, var(--soot) 100%); }
/* four short parts follow each other: they stand closer than the bands of the other pages */
.band.sheet { padding: clamp(44px, 7vw, 84px) 0; }
.sheet .title { margin-bottom: clamp(18px, 3vw, 30px); }
.plain li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font: 400 clamp(19px, 4.9vw, 24px)/1.3 var(--serif);
}
.plain li:last-child { border-bottom: 1px solid var(--line); }
/* a line that is a link: the whole line is the target */
.plain a.row {
  display: block;
  margin: -18px 0;
  padding: 18px 0;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
/* a link inside a sentence keeps a finger's height without opening the line */
.plain a.inline {
  padding: 10px 0;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.plain a:hover { text-decoration-color: var(--bone); }

/* ---------- the coin's address ---------- */

.address { margin-bottom: 28px; }
.address__label {
  margin-bottom: 10px;
  font: 700 12px/1.25 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ember-hot);
}
.address__value {
  font: 500 clamp(15px, 4.1vw, 19px)/1.45 var(--mono);
  overflow-wrap: anywhere;
  color: var(--bone);
  -webkit-user-select: all;
  user-select: all;
}
.address__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.address__row .btn { flex: 1 1 200px; padding: 0 16px; white-space: nowrap; }
.address .fine { margin-top: 12px; }

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

.call {
  text-align: center;
  background:
    radial-gradient(60% 60% at 50% 55%, rgba(255, 106, 28, 0.2), rgba(255, 106, 28, 0) 70%),
    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: 1000px) {
  .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); }
  .hero .eyebrow { margin-bottom: 8px; }
  .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;
  }
}