/* Bankereum · motion.css
 *
 * Everything that moves. Transform / opacity / filter only — nothing in here
 * animates a property that triggers layout. The whole file is switched off at
 * the bottom under prefers-reduced-motion.
 */

/* ------------------------------------------------------------ atmosphere */
/* The mesh drifts very slowly so the page is never quite static, and the grid
   sits still underneath it so nothing shimmers against the text. */
body::before {
  will-change: transform;
  animation: mesh-drift 48s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0% { transform: translate3d(0, 0, 0) scale(1.02); }
  50% { transform: translate3d(-1.6%, 1.1%, 0) scale(1.06); }
  100% { transform: translate3d(1.4%, -0.9%, 0) scale(1.03); }
}

/* A soft vignette and a very fine grain, both fixed and inert. */
#atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#atmos::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 38%, transparent 52%, rgba(23, 34, 74, .10) 100%);
}
#atmos::after {
  content: '';
  position: absolute;
  inset: -14%;
  opacity: .26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  animation: grain 7s steps(6) infinite;
  will-change: transform;
}
@keyframes grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  16% { transform: translate3d(-3%, 2%, 0); }
  33% { transform: translate3d(2%, -3%, 0); }
  50% { transform: translate3d(-2%, -2%, 0); }
  66% { transform: translate3d(3%, 1%, 0); }
  83% { transform: translate3d(-1%, 3%, 0); }
}

/* the brand edge gets a slow travelling sheen */
#top-rule { overflow: hidden; }
#top-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translate3d(-100%, 0, 0);
  animation: rule-sheen 9s ease-in-out infinite;
}
@keyframes rule-sheen {
  0%, 62% { transform: translate3d(-120%, 0, 0); }
  100% { transform: translate3d(220%, 0, 0); }
}

/* ---------------------------------------------------------- page entrance */
.site-header .bar {
  animation: drop-in .7s cubic-bezier(.2, .9, .25, 1) both;
}
@keyframes drop-in {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- reveals */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity .62s cubic-bezier(.22, .8, .26, 1) var(--reveal-delay, 0ms),
    transform .62s cubic-bezier(.22, .8, .26, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* the eyebrow draws its brass rule as the section arrives */
.eyebrow::before {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .55s cubic-bezier(.22, .8, .26, 1) calc(var(--reveal-delay, 0ms) + 140ms);
}
[data-reveal].is-in .eyebrow::before,
.is-in .eyebrow::before,
.eyebrow.is-in::before { transform: scaleX(1); }
/* a standalone eyebrow is observed directly by MO.reveal and gets .is-in itself */

/* ------------------------------------------------ specular + 3D tilt */
.is-interactive {
  transform: perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform .4s cubic-bezier(.22, .8, .26, 1), box-shadow .4s ease;
}
.card.is-interactive::after,
.tile.is-interactive::after,
.step.is-interactive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 62%);
  opacity: calc(var(--spec, 0) * .9);
  transition: opacity .35s ease;
  mix-blend-mode: soft-light;
}
/* the tile already uses ::after for its accent bar, so the specular goes on ::before */
.tile.is-interactive::after { content: none; }
.tile.is-interactive::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .62), transparent 60%);
  opacity: calc(var(--spec, 0) * .9);
  transition: opacity .35s ease;
  mix-blend-mode: soft-light;
  z-index: 1;
}
.card.is-interactive:hover,
.tile.is-interactive:hover,
.step.is-interactive:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 60px -34px rgba(23, 34, 74, .55);
}
.btn.is-interactive { transition: transform .28s cubic-bezier(.22, .8, .26, 1), box-shadow .28s ease, background .18s ease; }
.btn-primary.is-interactive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .42), transparent 70%);
  opacity: var(--spec, 0);
  transition: opacity .3s ease;
}
.btn { position: relative; overflow: hidden; }

/* ------------------------------------------------------------- odometer */
.od {
  --od-h: 1.16em;
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.od-cell {
  display: inline-block;
  line-height: var(--od-h);
  height: var(--od-h);
  /* inline-flex collapses a lone space, which would eat the gap in "1.2 ETH" */
  white-space: pre;
}
.od-d { overflow: hidden; position: relative; }
.od-reel {
  display: block;
  transition: transform 460ms cubic-bezier(.3, 1.1, .35, 1);
  will-change: transform;
}
.od-reel > span {
  display: block;
  height: var(--od-h);
  line-height: var(--od-h);
}

/* a changed value gets one short brand glow */
.is-pulse { animation: pulse-eth 1s cubic-bezier(.25, .8, .3, 1); }
.is-pulse-brass { animation: pulse-brass 1s cubic-bezier(.25, .8, .3, 1); }
@keyframes pulse-eth {
  0% { box-shadow: 0 0 0 0 rgba(98, 126, 234, .55), var(--shadow); }
  70% { box-shadow: 0 0 0 10px rgba(98, 126, 234, 0), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(98, 126, 234, 0), var(--shadow); }
}
@keyframes pulse-brass {
  0% { box-shadow: 0 0 0 0 rgba(233, 166, 62, .6), var(--shadow); }
  70% { box-shadow: 0 0 0 10px rgba(233, 166, 62, 0), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(233, 166, 62, 0), var(--shadow); }
}

/* the LIVE dot ticks once per confirmed refresh */
.datasrc .dot { transition: transform .25s ease; }
.datasrc.is-tick .dot { animation: dot-tick .7s cubic-bezier(.2, .9, .25, 1); }
@keyframes dot-tick {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 165, 113, .6); }
  35% { transform: scale(1.9); box-shadow: 0 0 0 6px rgba(22, 165, 113, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 165, 113, 0); }
}

/* --------------------------------------------------------- figures (SVG) */
.flow-dot {
  animation: flow-run var(--flow-dur, 2.6s) linear infinite;
  animation-delay: var(--flow-delay, 0s);
  opacity: 0;
}
@keyframes flow-run {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate3d(var(--fx), var(--fy), 0); opacity: 0; }
}
.fig-paused .flow-dot { animation-play-state: paused; }

/* the anti-snipe ramp draws itself in when it arrives */
.ramp-area { opacity: 0; transition: opacity .9s ease .5s; }
.is-in .ramp-area { opacity: 1; }

/* ------------------------------------------------------------- weight bars */
.wbar i {
  transform-origin: left center;
  transform: scaleX(var(--fill, 1));
  width: 100% !important;
  transition: transform .9s cubic-bezier(.22, .8, .26, 1) var(--bar-delay, 0ms), filter .25s ease;
}
.wbar { transition: box-shadow .25s ease; }
tr:hover .wbar i { filter: brightness(1.12) saturate(1.15); }
tr:hover .wbar { box-shadow: 0 0 0 3px rgba(98, 126, 234, .12); }

/* ------------------------------------------------------------- NAV donut */
.donut-ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, .8, .26, 1) var(--seg-delay, 0ms),
              stroke-width .25s ease, opacity .25s ease;
  cursor: pointer;
}
.donut.is-hovering .donut-ring { opacity: .34; }
.donut .donut-ring.is-hot { opacity: 1; stroke-width: 22; }
.donut-centre { transition: opacity .25s ease; }

/* ------------------------------------------------------------- the ticker */
.ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-rail {
  display: flex;
  width: max-content;
  animation: ticker-run var(--ticker-dur, 42s) linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-rail { animation-play-state: paused; }
@keyframes ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  white-space: nowrap;
  border-right: 1px solid var(--line);
}
.ticker-item .sym {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--ink);
}
.ticker-item .w {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--eth-deep);
  font-variant-numeric: tabular-nums;
}
.ticker-item .tag {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--brass-ink);
}

/* ------------------------------------------------------- countdown ring */
.cd-ring { flex: none; }
.cd-ring circle { transform-box: fill-box; transform-origin: center; }
.cd-ring .cd-bar {
  transform: rotate(-90deg);
  transition: stroke-dashoffset .95s linear;
}

/* ------------------------------------------------------------ coin burst */
.burst-layer {
  position: fixed;
  z-index: 120;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst-bit {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE0AC, #E9A63E 58%, #A86B1D);
  box-shadow: 0 1px 2px rgba(23, 34, 74, .3);
  animation: burst-fly 1.15s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms) both;
}
.burst-bit.v {
  background: radial-gradient(circle at 34% 30%, #C7D1FA, #627EEA 58%, #3B4FB8);
  border-radius: 3px;
}
@keyframes burst-fly {
  0% { transform: translate3d(0, 0, 0) rotate(0) scale(0); opacity: 1; }
  22% { transform: translate3d(calc(var(--dx) * .42), calc(var(--dy) * .72), 0) rotate(calc(var(--rot) * .3)) scale(var(--s)); opacity: 1; }
  100% { transform: translate3d(var(--dx), calc(var(--dy) + 190px), 0) rotate(var(--rot)) scale(calc(var(--s) * .85)); opacity: 0; }
}

/* the header mark takes a knock when a claim lands */
.brand img.is-clunk { animation: clunk .85s cubic-bezier(.3, 1.4, .4, 1); }
@keyframes clunk {
  0% { transform: rotate(0) scale(1); }
  18% { transform: rotate(-9deg) scale(1.1); }
  42% { transform: rotate(6deg) scale(1.04); }
  68% { transform: rotate(-3deg) scale(1.01); }
  100% { transform: none; }
}

/* ------------------------------------------------- pending-transaction shimmer */
.is-tx-pending {
  position: relative;
  overflow: hidden;
}
.is-tx-pending::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translate3d(-100%, 0, 0);
  animation: shimmer-run 1.3s linear infinite;
  pointer-events: none;
}
@keyframes shimmer-run {
  to { transform: translate3d(220%, 0, 0); }
}

/* --------------------------------------------------------- token marks */
.tok {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 34, 80, .12), 0 0 0 3px rgba(98, 126, 234, .10), 0 4px 10px -6px rgba(23, 34, 74, .5);
  transition: transform .3s cubic-bezier(.22, .8, .26, 1), box-shadow .3s ease;
}
.tok img { width: 100%; height: 100%; display: block; object-fit: contain; }
.tok.is-stock { box-shadow: 0 0 0 1px rgba(20, 34, 80, .12), 0 0 0 3px rgba(233, 166, 62, .22), 0 4px 10px -6px rgba(23, 34, 74, .5); }
tr:hover .tok, .ticker-item:hover .tok { transform: translateY(-1px) scale(1.07); }
.tok .fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 10px;
  color: #fff;
  background: linear-gradient(160deg, var(--steel-600), var(--steel-900));
}
.tok--sm { width: 26px; height: 26px; }
.tok--sm .fallback { font-size: 8.5px; }

/* --------------------------------------------------------------- toasts */
.toast { animation: toast-pop .34s cubic-bezier(.2, .9, .25, 1); }
@keyframes toast-pop {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* =====================================================================
   One switch. Reduced motion means nothing moves — no softened version.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  body::before,
  #atmos::after,
  #top-rule::after,
  .site-header .bar,
  .flow-dot, .ticker-rail, .burst-bit, .brand img.is-clunk,
  .is-pulse, .is-pulse-brass, .datasrc.is-tick .dot,
  .is-tx-pending::before, .toast, .od-reel {
    animation: none !important;
    transition: none !important;
  }
  #top-rule::after, .flow-dot { display: none !important; }
  #atmos::after { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .eyebrow::before { transform: none !important; transition: none !important; }
  .is-interactive { transform: none !important; }
  .is-interactive::after, .tile.is-interactive::before { display: none !important; }
  .wbar i { transition: none !important; }
  .donut-ring { transition: none !important; }
  .cd-ring .cd-bar { transition: none !important; }
  .tok { transition: none !important; }
}

/* the same switch for the class motion.js sets, so JS-driven loops stop too */
.reduced-motion .ticker-rail,
.reduced-motion .flow-dot { animation: none !important; }