/* ==========================================================================
   Sections. The composition, not the colour, is what separates things here:
   dark mode is type-led and borderless, so hierarchy has to come from scale,
   ground steps and rhythm. Light mode inherits all of it unchanged and only
   gains its hairlines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: var(--hair) solid transparent;
  transition: border-color var(--dur-normal) var(--ease-standard);
}

.site-header.is-stuck {
  border-block-end-color: var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-block-size: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  color: var(--on-bg);
  text-decoration: none;
  line-height: 1.4;
}

.wordmark__dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.wordmark:hover {
  color: var(--accent-ink);
}

.site-nav {
  display: none;
  margin-inline-start: auto;
  gap: clamp(1rem, 2vw, 2rem);
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
  padding-block: 0.4em;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out-expo);
}

[dir="rtl"] .site-nav a::after {
  transform-origin: right center;
}

.site-nav a:hover {
  color: var(--on-bg);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-inline-start: auto;
}

.site-nav + .header-actions {
  margin-inline-start: var(--space-md);
}

.header-actions .btn {
  display: none;
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
  }

  .header-actions .btn {
    display: inline-block;
  }
}

/* --------------------------------------------------------------------------
   Hero — type-led. No panel and no gradient card: the headline IS the graphic.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 940px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  }
}

.hero__title {
  margin-block: 0.3em 0;
  text-wrap: balance;
}

html[lang="ar"] .hero__title {
  /* Lalezar leaves a lot of air above Arabic glyphs; close the display lines
     up so the two-line headline reads as one block. */
  line-height: 0.94;
}

.hero__title .line {
  display: block;
}

.hero__title .line--shift {
  margin-inline-start: clamp(0px, 3vw, 2.6rem);
}

/* The one accented word, with a signage rule that draws itself under it. */
.marked {
  position: relative;
  color: var(--accent);
  white-space: nowrap;
}

.marked::after {
  content: "";
  position: absolute;
  inset-inline: -0.05em;
  inset-block-end: 0.14em;
  block-size: 0.08em;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left center;
  animation: draw-rule var(--dur-slow) var(--ease-out-expo) 480ms forwards;
}

[dir="rtl"] .marked::after {
  transform-origin: right center;
}

@keyframes draw-rule {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marked::after {
    transform: scaleX(1);
    animation: none;
  }
}

.hero__lead {
  margin-block-start: var(--space-md);
  max-inline-size: 46ch;
}

.hero__cta {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.hero__meta {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Two devices overlapped like a dealt pair. The overlap is a negative inline
   margin, not absolute positioning, so the hidden slice is always the FAR
   edge in both writing directions and neither phone ever covers the start of
   the other one's text. */
.phone-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 400px;
}

.phone-stack__back {
  --phone-w: clamp(122px, 15vw, 158px);
  align-self: flex-start;
  rotate: calc(6deg * var(--push));
}

.phone-stack__front {
  --phone-w: clamp(182px, 21vw, 232px);
  z-index: 2;
  margin-inline-start: clamp(-3.5rem, -3vw, -2.25rem);
  rotate: calc(-3deg * var(--push));
}

.js .phone-stack__front,
.js .phone-stack__back {
  animation: float-phone 7s var(--ease-standard) infinite;
}

.js .phone-stack__back {
  animation-delay: -3.5s;
}

@keyframes float-phone {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .phone-stack__front,
  .js .phone-stack__back {
    animation: none;
  }
}

/* Race list — the millisecond deltas that make the buzz race visible. */
.race {
  inline-size: 100%;
  max-inline-size: 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.race__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--surface);
  /* On bone paper, surface-on-elevated is nearly the same colour, so the
     rows get the hairline that light mode needs and dark mode ignores. */
  box-shadow: inset 0 0 0 var(--hair) var(--hairline);
  font-size: 0.62rem;
  color: var(--muted);
}

.race__row--lead {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.race__delta {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  direction: ltr;
}

/* Join-code slots. Digits track LTR so they never flip in Arabic. */
.code-slots {
  display: flex;
  gap: 4px;
  direction: ltr;
}

.code-slots span {
  inline-size: 15px;
  block-size: 21px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--on-bg);
}

.code-slots span:empty::before {
  content: "·";
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Promise band — ticket stubs on the stepped-up ground
   -------------------------------------------------------------------------- */
.promise {
  padding-block: var(--space-xl);
}

.promise__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  justify-content: center;
}

.band .stub {
  background: var(--elevated);
}

.band .stub::before,
.band .stub::after {
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   Modes — the app's own home composition: one featured mode on the accent,
   then deliberately uneven column weights so the page reads as a layout and
   not as six copies of one card. Hue does NOT differentiate them; size,
   rhythm and the little stage each one plays on do.
   -------------------------------------------------------------------------- */
.modes__grid {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .modes__grid {
    grid-template-columns: repeat(12, 1fr);
  }

  /* Uneven, alternating spans in the spirit of the app's home grid
     (1:1, 1.34:0.66, 0.72:1.28) — never two equal columns in a row. */
  .mode--buzz { grid-column: span 12; }
  .mode--spy { grid-column: span 7; }
  .mode--pot { grid-column: span 5; }
  .mode--imp { grid-column: span 5; }
  .mode--spr { grid-column: span 7; }
  .mode--pts { grid-column: span 12; }
}

@media (min-width: 1040px) {
  /* The featured mode holds two rows on the reading edge and everything
     else falls in beside it. */
  .mode--buzz { grid-column: span 5; grid-row: span 2; }
  .mode--spy { grid-column: span 7; }
  .mode--pot { grid-column: span 7; }
  .mode--imp { grid-column: span 7; }
  .mode--spr { grid-column: span 5; }
  .mode--pts { grid-column: span 12; }
}

.mode {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The featured mode is the only one wearing the accent — the same call the
   app's home screen makes. */
.mode--featured {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
}

/* No opacity anywhere on the accent card: onAccent has only 4.6:1 of
   headroom on the light accent, and dimming it drops small copy under AA.
   Hierarchy inside this card comes from size and weight instead. */
.mode--featured .mode__index,
.mode--featured .mode__tag,
.mode--featured p {
  color: var(--on-accent);
}

.mode--featured .chip {
  border-color: color-mix(in srgb, var(--on-accent) 55%, transparent);
  color: var(--on-accent);
}

.mode__head {
  padding: var(--space-md) clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem) var(--space-sm);
}

.mode__index {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: 0.12em;
}

.mode__name {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  margin-block-start: 0.1em;
}

.mode__tag {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  margin-block-start: 0.3em;
  max-inline-size: none;
}

/* The little stage each mode's mechanic is demonstrated on. */
.mode__stage {
  display: grid;
  place-items: center;
  justify-items: center;
  gap: var(--space-sm);
  min-block-size: 172px;
  inline-size: auto;
  padding: var(--space-md);
  margin-inline: clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem);
  border-radius: var(--radius);
  background: var(--elevated);
}

.mode--featured .mode__stage {
  background: var(--elevated);
  color: var(--on-bg);
  min-block-size: 210px;
}

.mode__body {
  padding: var(--space-md) clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem)
    clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.mode__body p {
  font-size: var(--text-sm);
  line-height: 1.7;
}

.mode__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

@media (min-width: 1040px) {
  .mode--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head stage"
      "body stage";
    align-items: start;
  }

  .mode--wide .mode__head { grid-area: head; }
  .mode--wide .mode__body { grid-area: body; }

  .mode--wide .mode__stage {
    grid-area: stage;
    align-self: stretch;
    margin: clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem);
    margin-inline-start: 0;
  }
}

.stage-caption {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--muted);
}

/* The stage is a plate of ordinary surface even inside the accent card, so
   its caption stays on the ordinary muted role. */
.mode--featured .mode__stage .stage-caption {
  color: var(--muted);
  opacity: 1;
}

/* ---- Stage: Spymaster board.
   The two team colours are the app's fixed teamColors — a team's colour is
   its identity and deliberately lives outside the palette. */
.mini-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  inline-size: min(100%, 208px);
}

.mini-board i {
  display: block;
  aspect-ratio: 5 / 3;
  border-radius: 3px;
  background: var(--hairline);
}

.mini-board i[data-team="a"] {
  background: var(--team-blue);
}

.mini-board i[data-team="b"] {
  background: var(--team-red);
}

/* The killer word is black in the app for the same reason a red card is red:
   it is a game signal, not a brand colour, and it must not flip with the
   theme. Same rationale as the team colours above. */
.mini-board i[data-team="k"] {
  background: #000;
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.is-in .mini-board i {
  animation: cell-flip 520ms var(--ease-spring) both;
}

.mini-board i:nth-child(3n) {
  animation-delay: 90ms;
}

.mini-board i:nth-child(4n) {
  animation-delay: 180ms;
}

.mini-board i:nth-child(5n) {
  animation-delay: 260ms;
}

@keyframes cell-flip {
  from {
    transform: rotateX(80deg) scale(0.9);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ---- Stage: Hot Potato bomb + fuse. The heat scale is the app's fixed
   hpCool/hpWarm/hpHot — it means "fuse speed" and nothing else. */
/* A drawn object keeps its own ink: the bomb is an illustration, not a
   surface, so it is the one shape here that does not take a palette role. */
.bomb {
  position: relative;
  inline-size: 70px;
  block-size: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #55595c 0 16%, #101214 76%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--heat-hot) 45%, transparent);
}

.is-in .bomb {
  animation: bomb-tick 900ms var(--ease-standard) infinite;
}

@keyframes bomb-tick {
  0%,
  100% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.06);
  }
  16% {
    transform: scale(1);
  }
}

.fuse {
  position: relative;
  inline-size: 128px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  overflow: hidden;
}

.fuse__burn {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, var(--heat-hot), var(--heat-warm), var(--heat-cool));
  transform-origin: left center;
}

[dir="rtl"] .fuse__burn {
  transform-origin: right center;
}

.is-in .fuse__burn {
  animation: fuse-burn 4.2s linear infinite;
}

@keyframes fuse-burn {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ---- Stage: Imposter cards ---- */
.deal {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.deal__card {
  inline-size: 60px;
  block-size: 84px;
  display: grid;
  place-items: center;
  padding: 4px;
  text-align: center;
  border-radius: 5px;
  background: var(--surface);
  color: var(--on-bg);
  font-family: var(--font-display);
  font-size: 0.74rem;
  line-height: 1.25;
}

.deal__card:nth-child(1) {
  rotate: -7deg;
}

.deal__card:nth-child(2) {
  translate: 0 -8px;
}

.deal__card:nth-child(3) {
  rotate: 7deg;
}

.deal__card--odd {
  background: var(--accent);
  color: var(--on-accent);
}

.is-in .deal__card {
  animation: deal-in 620ms var(--ease-spring) both;
}

.is-in .deal__card:nth-child(2) {
  animation-delay: 110ms;
}

.is-in .deal__card:nth-child(3) {
  animation-delay: 220ms;
}

@keyframes deal-in {
  from {
    opacity: 0;
    transform: translateY(34px) rotate(-16deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Stage: Sprint clock ---- */
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  inline-size: min(100%, 230px);
}

.clock__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--on-bg);
  font-variant-numeric: tabular-nums;
}

.clock__rail {
  inline-size: 100%;
  block-size: 10px;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  overflow: hidden;
}

.clock__fill {
  block-size: 100%;
  background: var(--accent);
  transform-origin: left center;
}

[dir="rtl"] .clock__fill {
  transform-origin: right center;
}

.is-in .clock__fill {
  animation: drain 6s linear infinite;
}

@keyframes drain {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0.04);
  }
}

/* ---- Stage: Points stakes ---- */
.stakes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-inline-size: 258px;
  direction: ltr;
}

.stakes b {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--surface);
  color: var(--on-bg);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
}

.stakes b[data-used] {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 var(--hair) var(--hairline);
  text-decoration: line-through;
}

.stakes b[data-live] {
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(-4px);
}

.is-in .stakes b[data-live] {
  animation: stake-bob 1.8s var(--ease-standard) infinite;
}

@keyframes stake-bob {
  0%,
  100% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.beats {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .beats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.beat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.beat__phone {
  --phone-w: clamp(146px, 16vw, 172px);
}

.beat__num {
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  line-height: 0.9;
  color: var(--accent);
}

.beat h3 {
  margin-block-start: 0.1em;
}

.beat p {
  color: var(--muted);
  font-size: var(--text-sm);
  max-inline-size: 34ch;
}

.beat:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 2.6rem;
  inset-inline-start: calc(100% + 0.4rem);
  inline-size: clamp(1rem, 4vw, 3rem);
  border-block-start: 2px dashed var(--hairline);
  display: none;
}

@media (min-width: 820px) {
  .beat:not(:last-child)::after {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Play styles
   -------------------------------------------------------------------------- */
.styles {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .styles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.style-card__art {
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--space-md);
  margin: clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem)
    clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem) 0;
  border-radius: var(--radius);
  background: var(--elevated);
}

.style-card__art svg {
  inline-size: min(100%, 250px);
  block-size: auto;
}

.style-card .card__body {
  padding-block-start: var(--space-md);
}

.orbit-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.is-in .orbit-dot {
  animation: pop-dot 520ms var(--ease-spring) both;
}

.is-in .orbit-dot:nth-of-type(2) { animation-delay: 70ms; }
.is-in .orbit-dot:nth-of-type(3) { animation-delay: 140ms; }
.is-in .orbit-dot:nth-of-type(4) { animation-delay: 210ms; }
.is-in .orbit-dot:nth-of-type(5) { animation-delay: 280ms; }
.is-in .orbit-dot:nth-of-type(6) { animation-delay: 350ms; }

@keyframes pop-dot {
  from {
    opacity: 0;
    scale: 0.3;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.pass-arrow {
  stroke-dasharray: 7 7;
}

.is-in .pass-arrow {
  animation: march 1.6s linear infinite;
}

@keyframes march {
  to {
    stroke-dashoffset: -28;
  }
}

/* --------------------------------------------------------------------------
   Origin
   -------------------------------------------------------------------------- */
.origin__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .origin__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.origin__statement {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.16;
  max-inline-size: 18ch;
}

.origin__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.origin__point {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding-block-start: var(--space-md);
  border-block-start: var(--hair) solid var(--hairline);
}

.origin__point:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.origin__point svg {
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  margin-block-start: 0.4em;
  color: var(--accent-ink);
}

.origin__point h3 {
  font-size: 1.15rem;
}

.origin__point p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Beta
   -------------------------------------------------------------------------- */
.beta__card {
  max-inline-size: 640px;
  margin-inline: auto;
}

.beta__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.beta__form .btn {
  flex: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-block-start: var(--hair) solid var(--hairline);
  padding-block: var(--space-xl) var(--space-lg);
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer a {
  color: var(--on-bg);
}

.site-footer a:hover {
  color: var(--accent-ink);
}

.site-footer__legal {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--hair) solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--text-micro);
}

/* --------------------------------------------------------------------------
   Reduced motion — every looping decoration stops at a sensible RESTING
   state rather than at its animation end frame (a burnt-out fuse and an
   empty clock would read as broken, not as "static").
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .checker-strip__track,
  .stub--live .stub__dot,
  .is-in .bomb,
  .is-in .fuse__burn,
  .is-in .clock__fill,
  .is-in .stakes b[data-live],
  .is-in .mini-board i,
  .is-in .deal__card,
  .is-in .orbit-dot,
  .is-in .pass-arrow {
    animation: none !important;
  }

  .fuse__burn {
    transform: scaleX(0.62);
  }

  .clock__fill {
    transform: scaleX(0.45);
  }

  .site-header,
  .site-nav a::after,
  .pill-btn {
    transition: none;
  }
}