/* MISTERYDOG — the visual system.
 *
 * WHY THE PREVIOUS VERSION WAS THROWN OUT. That version had a near-black background, one
 * accent colour, framed panels holding rows of label-value pairs, a strip of metrics in
 * the hero, and a uniform card grid. That is exactly the dark crypto-dashboard mould — a
 * shape anyone can guess from the CATEGORY alone, without ever seeing the page. And worse:
 * it ignored its own art. The collection is flat, hard, colourful riso printing on
 * coloured stock; wrapping that in a dark dashboard made the site and its work feel like
 * they came from two different projects.
 *
 * THE DIRECTION NOW: the page BECOMES a printed object too.
 *
 *   - The background is SOLID INK from the collection's own palette (Sunflower yellow),
 *     not near-black. Yellow and black is the pairing of public notices, warnings, and
 *     missing-person flyers — and almost no NFT site dares to use it.
 *   - Zero rounded corners, zero gradients, zero soft shadows, zero glass. Print has not
 *     a single one of those.
 *   - HARD shadows with no blur = misregistration, the exact same device the art engine
 *     uses. It is not decoration; it is the same print language.
 *   - THICK keylines as structure, like the keylines in the drawings.
 *   - The art direction changes per section: the top is yellow (the notice), the 999 board
 *     is black (the wall, at night) so the sheets glow on top of it.
 */

:root {
  /* printing inks — taken from the art engine's palette */
  --yellow: #F6D64A;
  --yellow-deep: #E5C233;
  --ink: #14110A;
  --ink-soft: #57503A;
  --paper: #F2EFE4;
  --paper-shade: #D6D0BE;
  --red: #E4372C;
  --blue: #2B5FD8;

  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-text: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 140ms;
  --mid: 320ms;

  --rule: 3px;
  --z-sticky: 10;

  /* All three were being USED but never defined — leftovers from an earlier palette.
     A missing variable makes the whole declaration invalid, so the text quietly falls
     back to an inherited colour and a button can disappear entirely. No error, no
     warning; just an element that is suddenly not there. */
  --paper-dim: #C9C3B0;
  --ink-dim: #57503A;
  --red-deep: #B32A21;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.15rem; }

/* ---------- header ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .7rem 1rem; padding: 1rem 0;
  border-bottom: var(--rule) solid var(--ink);
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--yellow);
}
.brand { display: flex; align-items: baseline; gap: .7rem; }
.brand b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; }
.brand small { font-family: var(--font-num); font-size: .72rem; }
.navlinks { display: flex; gap: .8rem 1.1rem; align-items: center; flex-wrap: wrap; }
.navlinks a {
  color: var(--ink); text-decoration: none; font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  box-shadow: inset 0 -3px 0 transparent; transition: box-shadow var(--fast);
}
.navlinks a:hover { box-shadow: inset 0 -3px 0 var(--red); }
:focus-visible { outline: var(--rule) solid var(--red); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.2rem, 1rem + 5vw, 4rem) 0 1.6rem; }

/* The title is printed TWICE: one red plate that is off, one key plate that lands right.
   That is not a text shadow — it is misregistration, the exact same thing that makes the
   drawings read as print and not as vector. */
.big-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1rem + 8.6vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}
.big-title span { position: relative; z-index: 1; display: block; }
.big-title::before {
  content: attr(data-teks);
  position: absolute; inset: 0;
  color: var(--red);
  transform: translate(6px, 5px);
  z-index: 0;
  white-space: pre-line;
  animation: register 900ms var(--ease-out) both;
}
/* One movement on load: the plate lands. After that the page holds still. */
@keyframes register {
  0% { transform: translate(28px, 22px); opacity: 0; }
  100% { transform: translate(6px, 5px); opacity: 1; }
}

.hero p { font-size: clamp(1.02rem, .95rem + .4vw, 1.18rem); max-width: 58ch; margin: 0; font-weight: 500; }

/* The row of numbers is no longer "hero metrics" but a printed row of stamps. */
.stamp { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2.1rem; border: var(--rule) solid var(--ink); background: var(--paper); }
.stamp div { flex: 1 1 150px; padding: .8rem .95rem; border-right: var(--rule) solid var(--ink); }
.stamp div:last-child { border-right: 0; }
.stamp b { display: block; font-family: var(--font-num); font-size: 1.55rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stamp span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-top: .32rem; }
@media (max-width: 640px) {
  .stamp div { flex: 1 1 50%; border-bottom: var(--rule) solid var(--ink); }
  .stamp div:nth-child(2n) { border-right: 0; }
  .stamp div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- mode picker ---------- */
.mode { display: grid; grid-template-columns: 1fr; margin-top: 2.3rem; border: var(--rule) solid var(--ink); }
@media (min-width: 700px) { .mode { grid-template-columns: 1fr 1fr; } }
.mode button {
  appearance: none; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  background: var(--yellow); color: var(--ink);
  padding: 1.15rem 1.25rem; font-family: var(--font-text);
  transition: background var(--fast), color var(--fast);
}
.mode button { border-bottom: var(--rule) solid var(--ink); }
.mode button:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .mode button { border-bottom: 0; border-right: var(--rule) solid var(--ink); }
  .mode button:last-child { border-right: 0; }
}
.mode button strong { display: block; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.02em; text-transform: uppercase; }
.mode button span { display: block; font-size: .87rem; margin-top: .25rem; font-weight: 500; }
.mode button:hover { background: var(--yellow-deep); }
/* The selected one INVERTS fully to ink, rather than merely getting an underline. */
.mode button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* ---------- sheet ---------- */
/* Not a "panel". This is a sheet of paper on a board: thickly ruled, and its shadow is
   HARD with no blur, like paper that really is lifted a little off the surface. */
.sheet {
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 1.3rem 1.35rem;
}
.sheet h2 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: -0.01em; }

.grid { display: grid; gap: 1.7rem; }
@media (min-width: 940px) { .grid-2 { grid-template-columns: 1.06fr .94fr; } }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--paper-shade); }
.row:last-child { border-bottom: 0; }
.row span { font-size: .84rem; font-weight: 600; }
.row b { font-family: var(--font-num); font-size: .88rem; font-weight: 500; text-align: right; word-break: break-all; }
.leading { color: var(--red); }
.you { background: var(--ink); color: var(--yellow); padding: 0 .3rem; }

/* ---------- round clock ---------- */
/* The clock gets its own inverted field that bleeds past the edge of the sheet. In the
   last ten seconds that field turns red — the only moment the page raises its voice. */
/* Bleeds sideways ONLY. A negative top margin also pulled it up over the "Round"
   heading and its status badge, so both got buried under the black box and the top of
   the sheet looked like a broken render. */
.clock-box { background: var(--ink); color: var(--paper); margin: 0 -1.35rem 1.1rem; padding: 1.05rem 1.35rem; transition: background var(--fast); }
.clock-box.hot { background: var(--red); }
.clock { font-family: var(--font-num); font-weight: 700; font-size: clamp(3.2rem, 1rem + 8vw, 5rem); line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: rgba(242,239,228,.22); overflow: hidden; margin-top: .65rem; }
.bar i { display: block; height: 100%; background: var(--paper); transform-origin: left; transform: scaleX(0); }

/* ---------- depth gauge ---------- */
.gauge { margin: 0 0 1rem; }
.gauge-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .55rem; }
.gauge-top b { font-family: var(--font-num); font-size: 2.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-top span { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; text-align: right; }
.ladder { display: flex; height: 40px; border: var(--rule) solid var(--ink); }
.ladder i { flex: 1; background: var(--paper-shade); transition: background var(--mid) var(--ease-out); }
.ladder i + i { border-left: var(--rule) solid var(--ink); }
.ladder i.open { background: var(--ink); }
.ladder i.peak { background: var(--red); }
.ladder-names { display: flex; margin-top: .3rem; }
.ladder-names span { flex: 1; font-size: .58rem; text-transform: uppercase; letter-spacing: .03em; text-align: center; font-weight: 700; color: var(--ink-soft); }
.ladder-names span.open { color: var(--ink); }
@keyframes breach { 0% { transform: scaleY(1) } 40% { transform: scaleY(1.35) } 100% { transform: scaleY(1) } }
.ladder i.breach { animation: breach 420ms var(--ease-out); }

/* ---------- buttons ---------- */
button.act {
  font-family: var(--font-display); font-size: .88rem; text-transform: uppercase; letter-spacing: .01em;
  background: var(--red); color: var(--paper);
  border: var(--rule) solid var(--ink); border-radius: 0;
  padding: .68rem 1.15rem; cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background var(--fast);
}
button.act:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
/* Pressed = genuinely pressed down: its shadow is gone. */
button.act:active:not(:disabled) { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
button.act:disabled { background: var(--paper-shade); color: var(--ink-soft); box-shadow: 3px 3px 0 var(--ink-soft); cursor: not-allowed; }
button.ghost { background: var(--paper); color: var(--ink); }
button.ghost:hover:not(:disabled) { background: var(--yellow); }
.btn-row { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.1rem; }

pre.output {
  font-family: var(--font-num); font-size: .8rem; line-height: 1.55;
  background: var(--ink); color: var(--paper);
  border: var(--rule) solid var(--ink);
  padding: .9rem 1rem; margin: 1.7rem 0 0;
  white-space: pre-wrap; word-break: break-word;
  max-height: 210px; overflow-y: auto;
}

/* ---------- the 999 board: a DIFFERENT visual world ---------- */
/* This section flips to ink. The narrative is clear: above is the notice, here is the
   wall at night — and those coloured sheets glow on top of it.
   Consistency of VOICE matters more than consistency of treatment. */
.wall { background: var(--ink); color: var(--paper); margin: 3.4rem 0 0; padding: clamp(2.2rem, 1rem + 4vw, 3.4rem) 0 3rem; }
.wall .title { color: var(--paper); }
.wall .note { color: var(--paper-shade); }
.wall button.ghost { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 5px 5px 0 var(--red); }
.wall button.ghost:hover:not(:disabled) { background: var(--paper); color: var(--ink); }

.title { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2.2vw, 2.3rem); letter-spacing: -0.025em; margin: 0 0 .7rem; text-transform: uppercase; }
.note { font-size: .92rem; max-width: 66ch; font-weight: 500; }
.note a { color: var(--red); }

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.4rem; }
.notice { position: relative; background: transparent; border: 0; padding: 0; cursor: pointer; transition: transform var(--fast) var(--ease-out); }
.notice canvas { display: block; width: 100%; height: auto; border: var(--rule) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.wall .notice canvas { border-color: var(--paper); box-shadow: 6px 6px 0 var(--red); }
.notice:hover { transform: translate(-3px, -3px) rotate(-1deg); }
.notice[aria-pressed="true"] canvas { outline: var(--rule) solid var(--red); outline-offset: 3px; }
.notice figcaption { display: flex; justify-content: space-between; gap: .5rem; font-family: var(--font-num); font-size: .72rem; padding: .45rem .1rem 0; font-weight: 500; }
/* The captions flip on the wall too. Without this the number and the tier stay dark ink
   on black — practically unreadable, and that is precisely the information people use
   to pick the dog they are after. */
.wall .notice figcaption { color: var(--paper); }
.wall .notice .tier { color: var(--yellow); }
.notice.taken { opacity: .28; pointer-events: none; }
.notice.locked canvas { border-style: dashed; }

/* ---------- comparison of the two modes ---------- */
/* Not three icon-title-text cards. The information really does come in pairs, so the
   shape is built in pairs. */
.compare { width: 100%; border-collapse: collapse; margin-top: 1.3rem; background: var(--paper); border: var(--rule) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.compare th, .compare td { border: 1px solid var(--paper-shade); padding: .8rem .9rem; text-align: left; vertical-align: top; font-size: .9rem; }
.compare thead th { background: var(--ink); color: var(--paper); font-family: var(--font-display); text-transform: uppercase; font-size: .88rem; border-color: var(--ink); }
.compare tbody th { width: 24%; font-weight: 700; }
.compare td strong { font-family: var(--font-num); }
.compare tbody tr:nth-child(2n) td, .compare tbody tr:nth-child(2n) th { background: rgba(20,17,10,.04); }

section { margin: clamp(2.2rem, 1rem + 4vw, 3.4rem) 0; }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-num); font-size: .68rem; letter-spacing: .04em; font-weight: 700;
  border: 2px solid var(--ink); padding: .18rem .55rem; text-transform: uppercase;
}
.badge::before { content: ''; width: 8px; height: 8px; background: var(--ink-soft); }
.badge.live { background: var(--red); color: var(--paper); }
.badge.live::before { background: var(--paper); animation: pulse 1.6s steps(2, end) infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .15 } }

footer { border-top: var(--rule) solid var(--ink); padding: 1.5rem 0 3rem; font-size: .84rem; font-weight: 500; }
footer a { color: var(--ink); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .notice:hover { transform: none; }
  .big-title::before { transform: translate(6px, 5px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION
   ══════════════════════════════════════════════════════════════════════════
   All of it is picked from the language of PRINT, not from a list of web effects.
   The easiest and most wrong choice is "every section fades up as you scroll" —
   that is the most saturated AI default there is, and it makes every site move in
   exactly the same way. Here each movement imitates something that really does
   happen to printed matter: the press running, ink rolling on, a plate slipping,
   numbers flipping over, paper fluttering on a wall.

   All motion runs ONLY on transform/opacity/clip-path, and all of it is switched
   off entirely under prefers-reduced-motion. Not one piece of content has its
   EXISTENCE depend on an animation: everything is visible first, the animation
   only lands it. If JS dies or the tab is hidden, the page is still whole. */

/* ---------- 1. the press running: a creeping halftone field ---------- */
/* Ben-day dots, the native texture of this medium — not a decorative grid. It creeps
   very slowly, like a roll of paper running on behind the page. */
body::before {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at center, rgba(20,17,10,.14) 1.4px, transparent 1.5px);
  background-size: 11px 11px;
  animation: roll 24s linear infinite;
}
@keyframes roll { to { transform: translate3d(11px, 11px, 0); } }
.wrap, .wall, .topbar { position: relative; z-index: 1; }

/* ---------- 2. running ticker ---------- */
/* A piece of notice furniture that really does move: a running announcement board. */
.ticker {
  background: var(--ink); color: var(--yellow);
  border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink);
  overflow: hidden; white-space: nowrap; padding: .55rem 0;
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .02em;
  text-transform: uppercase;
}
.ticker div { display: inline-block; animation: crawl 26s linear infinite; will-change: transform; }
.ticker span { padding: 0 1.1rem; }
.ticker b { color: var(--red); }
@keyframes crawl { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.ticker:hover div { animation-play-state: paused; }

/* ---------- 3. buttons: ink rolling on ---------- */
/* A sweep of the ink roller from the left, not a colour that merely swaps over. */
button.act { position: relative; overflow: hidden; isolation: isolate; }
button.act::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
button.act:hover:not(:disabled)::before { transform: scaleX(1); }
button.act:hover:not(:disabled) { color: var(--yellow); }
button.ghost:hover:not(:disabled) { color: var(--yellow); }

/* ---------- 4. clock digits flipping over ---------- */
/* A mechanical counter. A second that changes quietly does not feel urgent; a digit that
   FLIPS OVER does. Only the digit that actually changes flips. */
.clock { display: flex; align-items: baseline; gap: 1px; }
.clock .d { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.clock .d b { display: block; font-weight: 700; }
.clock .d.roll b { animation: flip 260ms var(--ease-out); }
@keyframes flip { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.clock em { font-style: normal; font-size: .42em; margin-left: .18em; opacity: .7; }

/* ---------- 5. notices landing on the wall ---------- */
/* Not a fade-up. The sheet LANDS: slightly tilted, then straight, like paper that has
   just been pasted up. The base state is already fully visible — the .landed class only
   adds the landing, so if JS dies everything still shows. */
.notice { animation: none; }
.notice.landed { animation: land 520ms var(--ease-out) both; }
@keyframes land {
  0%   { transform: translate3d(0,18px,0) rotate(-2.5deg); opacity: .25; }
  100% { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
}

/* ---------- 6. scroll rule ---------- */
/* Paper feed: how far the sheet has already passed through the press. */
.ruler { position: fixed; top: 0; left: 0; height: 5px; width: 100%; z-index: 20; pointer-events: none; }
.ruler i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }

/* ---------- 7. the plate slips further off as you scroll ---------- */
/* The press register drifting further off down the length of the page. Driven by JS
   through a single custom property, so no layout gets recalculated. */
.big-title::before { transform: translate(calc(6px + var(--drift, 0px)), calc(5px + var(--drift, 0px) * .8)); }

/* ---------- 8. the wall: its heading sticks ---------- */
.wall .title { position: sticky; top: 74px; z-index: 2; background: var(--ink); padding: .4rem 0; }

@media (prefers-reduced-motion: reduce) {
  body::before, .ticker div { animation: none !important; }
  .notice.landed { animation: none !important; }
  .clock .d.roll b { animation: none !important; }
  button.act::before { transition: none !important; }
}

/* ---------- owner bar ---------- */
/* Solid red: this is the only control on the page that cannot be undone. */
.owner-bar {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--red); color: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 1rem 1.2rem; margin-top: 2rem;
}
.owner-bar strong { display: block; font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; }
.owner-bar span { display: block; font-size: .88rem; font-weight: 500; margin-top: .15rem; }
.owner-bar button { margin-left: auto; background: var(--paper); color: var(--ink); }
.owner-bar button:hover:not(:disabled) { color: var(--paper); }

/* the "not opened yet" state for ordinary visitors */
.not-open { opacity: .5; pointer-events: none; }

/* ---------- how to mine ---------- */
/* Numbers ARE used here because the content really is a sequence: step 3 makes no sense
   before step 2. Numbering sections that are not a sequence is just scaffolding;
   numbering a real sequence is information. */
.two-ways { display: grid; gap: 1.7rem; }
@media (min-width: 900px) { .two-ways { grid-template-columns: 1fr 1fr; } }
.way-col { background: var(--paper); border: var(--rule) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 1.3rem 1.35rem; }
.way-col h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 1.1rem; text-transform: uppercase; letter-spacing: -0.01em; }
.way-col h3 span { background: var(--ink); color: var(--paper); padding: 3px 9px; margin-right: 8px; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
/* Normal flow with an absolutely positioned number — NOT a grid.
   With a two-column grid, every text node inside the <li> becomes a cell of its own: the
   <b> takes the second column and the rest of the sentence is thrown onto the next row
   in a column 2.3rem wide, so the whole paragraph comes down one word per line. It looks
   like broken text, and the cause is not visible at all from the CSS. */
.steps li {
  counter-increment: step;
  position: relative; padding: .75rem 0 .75rem 2.7rem;
  border-top: 1px solid var(--paper-shade);
  font-size: .93rem; line-height: 1.5;
}
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: .75rem;
  font-family: var(--font-num); font-weight: 700; font-size: 1.45rem; line-height: 1;
  color: var(--red);
}
.steps li:first-child::before { top: 0; }
.steps b { font-weight: 700; }

/* ---------- live stat counters ---------- */
/* A short pulse the instant a figure settles on a new value. The number is already
   counting up in JS; this is what makes the END of that count register, so a change
   that happens while you are looking somewhere else still leaves a trace. */
@keyframes bump { 0% { transform: translateY(0) } 35% { transform: translateY(-5px) } 100% { transform: translateY(0) } }
.stamp b.bump, .row b.bump { animation: bump 380ms var(--ease-out); }
.stamp b { transition: color 200ms; }

@media (prefers-reduced-motion: reduce) {
  .stamp b.bump, .row b.bump { animation: none !important; }
}