/* ============================================================
   CricoSoft — Product Mockups
   Load order: 1 tokens > 2 base > 3 components > [4 mockups] > 5 sections

   The three product visuals, drawn entirely in CSS. No screenshots,
   no images, no canvas. That keeps them weightless, theme-aware, and
   — the real reason — they can never go stale when a product's UI
   changes.

     .cricosoft-mock-browser   BackTheme   — theme marketplace in a browser
     .cricosoft-mock-score     CricoScore  — live cricket scorecard on a phone
     .cricosoft-mock-ledger    BongoKhata  — accounting ledger + cashflow

   PER-INSTANCE PARAMETERS (not tokens — passed in from a style attribute)
     --h    bar height as a percentage
     --n    child index, used to stagger an animation
     --w    width as a percentage
     --fill progress fill as a percentage
   ============================================================ */

/* ============================================================
   SHARED FRAME
   ============================================================ */

.cricosoft-mock {
  position: relative;
  border-radius: var(--cricosoft-radius-lg);
  border: 1px solid var(--cricosoft-line);
  background: var(--cricosoft-surface-1);
  box-shadow: var(--cricosoft-shadow-lg);
  overflow: hidden;
  /* Decorative by definition — the surrounding copy carries the meaning,
     so every mockup is aria-hidden in the markup. */
  user-select: none;
}

/* ---------- Site bar ----------
   The browser mock has its own chrome; the score and ledger mocks are
   app-style, so they carry this instead. Same pill, same proportions —
   each product visual shows that product's own address. It is omitted
   in the hero, where the composition speaks for the company. */

.cricosoft-mock__site {
  display: flex;
  align-items: center;
  padding: var(--cricosoft-space-3) var(--cricosoft-space-4);
  border-bottom: 1px solid var(--cricosoft-line);
  background: var(--cricosoft-surface-2);
}

.cricosoft-mock__site span {
  flex: 1;
  height: 1.5rem;
  display: flex;
  align-items: center;
  padding-inline: var(--cricosoft-space-3);
  border-radius: var(--cricosoft-radius-full);
  background: var(--cricosoft-surface-1);
  border: 1px solid var(--cricosoft-line);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--cricosoft-fg-subtle);
  white-space: nowrap;
  overflow: hidden;
  /* A long address — cricosoft.com/product/bongokhata — outgrows this bar
     in a narrow card and was being cut mid-character. Ellipsis is what a
     real address bar does, so the mock keeps reading as one. */
  text-overflow: ellipsis;
}

/* The mocks set their own padding, so the bar has to sit outside it. */
.cricosoft-mock-score,
.cricosoft-mock-ledger { padding: 0; }

.cricosoft-mock-score__head,
.cricosoft-mock-ledger__head { margin-top: 0; }

.cricosoft-mock-score > :not(.cricosoft-mock__site),
.cricosoft-mock-ledger > :not(.cricosoft-mock__site) {
  margin-inline: var(--cricosoft-space-5);
}

.cricosoft-mock-score > :nth-child(2),
.cricosoft-mock-ledger > :nth-child(2) { margin-top: var(--cricosoft-space-5); }

.cricosoft-mock-score > :last-child,
.cricosoft-mock-ledger > :last-child { margin-bottom: var(--cricosoft-space-5); }

/* A soft brand glow behind a mockup, so it lifts off the section. */
.cricosoft-mock-glow {
  position: relative;
  isolation: isolate;
}

.cricosoft-mock-glow::before {
  content: "";
  position: absolute;
  inset: 8% 12%;
  z-index: -1;
  border-radius: 50%;
  background: var(--cricosoft-brand-500);
  opacity: light-dark(.16, .22);
  filter: blur(64px);
  pointer-events: none;
}

/* ============================================================
   1. BACKTHEME — browser frame with a theme grid
   ============================================================ */

.cricosoft-mock-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-3);
  padding: var(--cricosoft-space-3) var(--cricosoft-space-4);
  border-bottom: 1px solid var(--cricosoft-line);
  background: var(--cricosoft-surface-2);
}

.cricosoft-mock-browser__dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.cricosoft-mock-browser__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cricosoft-surface-4);
}

.cricosoft-mock-browser__url {
  flex: 1;
  height: 1.5rem;
  display: flex;
  align-items: center;
  padding-inline: var(--cricosoft-space-3);
  border-radius: var(--cricosoft-radius-full);
  background: var(--cricosoft-surface-1);
  border: 1px solid var(--cricosoft-line);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--cricosoft-fg-subtle);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cricosoft-mock-browser__body {
  padding: var(--cricosoft-space-4);
  background: var(--cricosoft-bg-subtle);
}

/* The little filter row above the grid. */
.cricosoft-mock-browser__chips {
  display: flex;
  gap: 6px;
  margin-bottom: var(--cricosoft-space-4);
}

.cricosoft-mock-browser__chip {
  height: 1.25rem;
  width: var(--w, 3rem);
  border-radius: var(--cricosoft-radius-full);
  background: var(--cricosoft-surface-3);
}

.cricosoft-mock-browser__chip {
  transition:
    background var(--cricosoft-dur) var(--cricosoft-ease),
    opacity var(--cricosoft-dur) var(--cricosoft-ease);
}

.cricosoft-mock-browser__chip.is-active {
  background: var(--cricosoft-brand-500);
  opacity: .85;
}

.cricosoft-mock-browser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cricosoft-space-3);
}

.cricosoft-mock-theme {
  border-radius: var(--cricosoft-radius-sm);
  border: 1px solid var(--cricosoft-line);
  background: var(--cricosoft-surface-1);
  overflow: hidden;
  /* Staggered entrance, driven by --n on each tile. */
  animation: cricosoft-tile-in 620ms var(--cricosoft-ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 70ms);
}

@keyframes cricosoft-tile-in {
  from { opacity: 0; translate: 0 10px; scale: .96; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}

/* The theme "screenshot" — a tinted band with a fake layout inside. */
.cricosoft-mock-theme__shot {
  aspect-ratio: 4 / 3;
  padding: 6px;
  display: grid;
  gap: 3px;
  grid-template-rows: 22% 1fr;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cricosoft-brand-500) 18%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2));
}

/* Tint is a class rather than :nth-child so the driver can recolour the
   whole grid on each cycle without touching the DOM order. */
.cricosoft-mock-theme.is-tint-1 .cricosoft-mock-theme__shot {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cricosoft-accent-500) 20%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2));
}

.cricosoft-mock-theme.is-tint-2 .cricosoft-mock-theme__shot {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cricosoft-brand-300) 26%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2));
}

.cricosoft-mock-theme.is-tint-3 .cricosoft-mock-theme__shot {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cricosoft-brand-800) 30%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2));
}

/* Replayed by the driver: the tile flips out and back with fresh content. */
.cricosoft-mock-theme.is-swapping {
  animation: cricosoft-tile-swap 620ms var(--cricosoft-ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 55ms);
}

@keyframes cricosoft-tile-swap {
  0%   { opacity: 1; transform: rotateX(0deg)   scale(1);   }
  45%  { opacity: 0; transform: rotateX(-34deg) scale(.94); }
  55%  { opacity: 0; transform: rotateX(34deg)  scale(.94); }
  100% { opacity: 1; transform: rotateX(0deg)   scale(1);   }
}

.cricosoft-mock-browser__grid { perspective: 700px; }

.cricosoft-mock-theme__nav {
  border-radius: 2px;
  background: light-dark(rgba(12, 12, 24, .16), rgba(255, 255, 255, .18));
}

.cricosoft-mock-theme__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.cricosoft-mock-theme__col {
  border-radius: 2px;
  background: light-dark(rgba(12, 12, 24, .09), rgba(255, 255, 255, .10));
}

.cricosoft-mock-theme__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px;
}

.cricosoft-mock-theme__line {
  height: 4px;
  width: var(--w, 60%);
  border-radius: 2px;
  background: var(--cricosoft-surface-4);
}

.cricosoft-mock-theme__price {
  font-size: 8px;
  font-weight: 700;
  color: var(--cricosoft-brand-ink);
}

/* ============================================================
   2. CRICOSCORE — live scorecard
   ============================================================ */

.cricosoft-mock-score {
  padding: var(--cricosoft-space-5);
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--cricosoft-brand-500) 10%, var(--cricosoft-surface-1)),
    var(--cricosoft-surface-1) 42%);
}

.cricosoft-mock-score__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cricosoft-space-3);
  padding-bottom: var(--cricosoft-space-4);
  border-bottom: 1px solid var(--cricosoft-line);
}

.cricosoft-mock-score__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--cricosoft-radius-full);
  background: color-mix(in srgb, #E5484D 16%, transparent);
  color: light-dark(#C22B2B, #FF8B8B);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cricosoft-mock-score__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: cricosoft-live 1.6s var(--cricosoft-ease) infinite;
}

@keyframes cricosoft-live {
  0%, 100% { opacity: 1;   scale: 1; }
  50%      { opacity: .35; scale: .8; }
}

.cricosoft-mock-score__format {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cricosoft-fg-subtle);
}

/* ---------- Teams ---------- */

.cricosoft-mock-score__teams {
  display: grid;
  gap: var(--cricosoft-space-3);
  padding-block: var(--cricosoft-space-4);
}

.cricosoft-mock-team {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-3);
}

.cricosoft-mock-team__flag {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--cricosoft-surface-3);
  border: 1px solid var(--cricosoft-line);
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-mock-team__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-mock-team--batting .cricosoft-mock-team__name { color: var(--cricosoft-fg); }

.cricosoft-mock-team__score {
  margin-left: auto;
  font-family: var(--cricosoft-font-display);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-mock-team--batting .cricosoft-mock-team__score {
  font-size: 19px;
  color: var(--cricosoft-fg);
}

.cricosoft-mock-team__overs {
  font-size: 9px;
  font-weight: 500;
  color: var(--cricosoft-fg-subtle);
  margin-left: 4px;
}

/* ---------- Required-runs strip ---------- */

.cricosoft-mock-score__chase {
  padding: var(--cricosoft-space-3);
  border-radius: var(--cricosoft-radius-sm);
  background: var(--cricosoft-brand-wash);
  border: 1px solid var(--cricosoft-line-brand);
  font-size: 10px;
  font-weight: 600;
  color: var(--cricosoft-brand-ink);
  text-align: center;
}

/* ---------- Ball-by-ball ticker ---------- */

.cricosoft-mock-score__over {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-block: var(--cricosoft-space-4);
}

.cricosoft-mock-score__balls {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 1.375rem;
}

.cricosoft-mock-score__over-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cricosoft-fg-subtle);
  margin-right: 3px;
}

.cricosoft-mock-ball {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--cricosoft-surface-3);
  color: var(--cricosoft-fg-muted);
  animation: cricosoft-ball-in 500ms var(--cricosoft-ease-spring) backwards;
  animation-delay: calc(var(--n, 0) * 110ms + 300ms);
}

@keyframes cricosoft-ball-in {
  from { opacity: 0; scale: .3; }
  to   { opacity: 1; scale: 1; }
}

/* A ball appended by the driver animates on its own, with no stagger. */
.cricosoft-mock-ball.is-new {
  animation: cricosoft-ball-in 420ms var(--cricosoft-ease-spring) backwards;
  animation-delay: 0ms;
}

/* The score flashes as it updates, so the eye catches the change. */
.cricosoft-mock-team__score.is-bumped,
.cricosoft-mock-ledger__balance.is-bumped {
  animation: cricosoft-bump 520ms var(--cricosoft-ease-spring);
}

@keyframes cricosoft-bump {
  0%   { scale: 1;    color: var(--cricosoft-fg); }
  35%  { scale: 1.07; color: var(--cricosoft-brand-ink); }
  100% { scale: 1;    color: var(--cricosoft-fg); }
}

/* Sparkline bars settle to a new height instead of snapping. */
.cricosoft-mock-score__bar { transition: height 420ms var(--cricosoft-ease-out); }
.cricosoft-mock-ledger__in,
.cricosoft-mock-ledger__out { transition: height 520ms var(--cricosoft-ease-out); }

.cricosoft-mock-ball--four {
  background: color-mix(in srgb, var(--cricosoft-brand-500) 88%, transparent);
  color: #FFFFFF;
}

.cricosoft-mock-ball--six {
  background: var(--cricosoft-accent-500);
  color: #1A1206;
}

.cricosoft-mock-ball--wicket {
  background: #E5484D;
  color: #FFFFFF;
}

/* ---------- Run-rate sparkline ----------
   Bars, not an SVG path: one element per point, height from --h.
   Cheap, responsive, and animatable without a library. */

.cricosoft-mock-score__spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 3rem;
  padding-top: var(--cricosoft-space-3);
  border-top: 1px solid var(--cricosoft-line);
}

.cricosoft-mock-score__bar {
  flex: 1;
  height: var(--h, 40%);
  min-height: 3px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--cricosoft-brand-500) 35%, transparent),
    var(--cricosoft-brand-500));
  transform-origin: 50% 100%;
  animation: cricosoft-bar-grow 700ms var(--cricosoft-ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 55ms + 200ms);
}

@keyframes cricosoft-bar-grow {
  from { scale: 1 0; opacity: 0; }
  to   { scale: 1 1; opacity: 1; }
}

.cricosoft-mock-score__bar:last-child {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--cricosoft-accent-500) 35%, transparent),
    var(--cricosoft-accent-500));
}

.cricosoft-mock-score__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--cricosoft-space-3);
  font-size: 9px;
  font-weight: 600;
  color: var(--cricosoft-fg-subtle);
}

/* ============================================================
   3. BONGOKHATA — ledger + cashflow
   ============================================================ */

.cricosoft-mock-ledger { padding: var(--cricosoft-space-5); }

.cricosoft-mock-ledger__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cricosoft-space-4);
  padding-bottom: var(--cricosoft-space-4);
}

.cricosoft-mock-ledger__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cricosoft-fg-subtle);
}

.cricosoft-mock-ledger__balance {
  margin-top: 2px;
  font-family: var(--cricosoft-font-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--cricosoft-fg);
}

.cricosoft-mock-ledger__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: var(--cricosoft-radius-full);
  background: color-mix(in srgb, #30A46C 16%, transparent);
  color: light-dark(#1B7A4B, #6FD8A2);
  font-size: 9px;
  font-weight: 700;
}

/* ---------- Cashflow bars ---------- */

.cricosoft-mock-ledger__chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 4.5rem;
  margin-bottom: var(--cricosoft-space-4);
}

.cricosoft-mock-ledger__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
}

/* Two stacked segments per month: money in, money out. */
.cricosoft-mock-ledger__in,
.cricosoft-mock-ledger__out {
  border-radius: 2px;
  transform-origin: 50% 100%;
  animation: cricosoft-bar-grow 650ms var(--cricosoft-ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 70ms + 150ms);
}

.cricosoft-mock-ledger__in {
  height: var(--h, 40%);
  background: var(--cricosoft-brand-500);
}

.cricosoft-mock-ledger__out {
  height: var(--h, 20%);
  background: color-mix(in srgb, var(--cricosoft-fg) 16%, transparent);
}

.cricosoft-mock-ledger__col:last-child .cricosoft-mock-ledger__in {
  background: var(--cricosoft-accent-500);
}

/* ---------- Ledger rows ---------- */

.cricosoft-mock-ledger__rows {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--cricosoft-line);
  padding-top: var(--cricosoft-space-3);
}

.cricosoft-mock-row {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-3);
  padding-block: var(--cricosoft-space-2);
}

.cricosoft-mock-row.is-posted {
  animation: cricosoft-row-post 560ms var(--cricosoft-ease-out);
}

@keyframes cricosoft-row-post {
  from { opacity: 0; translate: 0 -14px; }
  to   { opacity: 1; translate: 0 0; }
}

.cricosoft-mock-row__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: var(--cricosoft-radius-xs);
  background: var(--cricosoft-surface-3);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-mock-row__lines { flex: 1; display: grid; gap: 3px; }

.cricosoft-mock-row__line {
  height: 5px;
  width: var(--w, 70%);
  border-radius: 2px;
  background: var(--cricosoft-surface-3);
}

.cricosoft-mock-row__line--sub {
  height: 4px;
  width: calc(var(--w, 70%) * .55);
  background: var(--cricosoft-surface-4);
  opacity: .7;
}

.cricosoft-mock-row__amt {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-mock-row__amt--in  { color: light-dark(#1B7A4B, #6FD8A2); }
.cricosoft-mock-row__amt--out { color: var(--cricosoft-fg-subtle); }

/* ============================================================
   HERO CONSTELLATION
   The three product cards in a shallow 3D stack. Pointer parallax is
   applied by JS on pointer-capable screens 1024px and up; everywhere
   else this resolves to a clean static composition.
   ============================================================ */

.cricosoft-constellation {
  position: relative;
  display: grid;
  gap: var(--cricosoft-space-4);
}

@media (min-width: 1024px) {
  .cricosoft-constellation {
    display: block;
    height: 34rem;
    perspective: 1400px;
    perspective-origin: 50% 40%;
  }
}

.cricosoft-constellation__item {
  position: relative;
  transition: translate var(--cricosoft-dur-slow) var(--cricosoft-ease-out);
}

@media (min-width: 1024px) {
  .cricosoft-constellation__item {
    position: absolute;
    transform-style: preserve-3d;
    /* --dx/--dy are written by the parallax handler in JS. */
    translate:
      calc(var(--dx, 0px) * var(--depth, 1))
      calc(var(--dy, 0px) * var(--depth, 1));
    transition: translate 220ms var(--cricosoft-ease-out);
  }

  /* BackTheme — the widest card, sitting furthest back. It starts just
     inside the grid gutter so the composition reaches back toward the
     copy instead of floating away from it. The hero clips overflow, so
     the negative offset cannot widen the page. */
  .cricosoft-constellation__item--browser {
    top: 0;
    left: -7%;
    width: 88%;
    --depth: .55;
    rotate: y -6deg;
    z-index: 1;
  }

  /* CricoScore — narrow, front and centre-right. */
  .cricosoft-constellation__item--score {
    top: 24%;
    right: -3%;
    width: 45%;
    --depth: 1.25;
    rotate: y 5deg;
    z-index: 3;
  }

  /* BongoKhata — mid depth, bottom left. */
  .cricosoft-constellation__item--ledger {
    bottom: 0;
    left: 4%;
    width: 56%;
    --depth: .9;
    rotate: y -3deg;
    z-index: 2;
  }

  /* In the hero the browser shows a single row of themes. With two rows
     the ledger card sliced the second one in half, which reads as a
     clipping bug rather than as depth. The full six-tile grid still
     appears on the products page, where nothing overlaps it. */
  .cricosoft-constellation .cricosoft-mock-theme:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cricosoft-constellation__item { transition: none; }
}

/* A faint connecting mesh behind the stack. Purely atmospheric. */
.cricosoft-constellation__mesh {
  display: none;
}

@media (min-width: 1024px) {
  .cricosoft-constellation__mesh {
    display: block;
    position: absolute;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(38rem circle at 30% 25%, var(--cricosoft-brand-wash-2), transparent 60%),
      radial-gradient(28rem circle at 78% 72%, var(--cricosoft-accent-wash), transparent 62%);
    filter: blur(6px);
  }
}


/* ============================================================
   AMBIENT FLOAT
   A slow vertical drift with a different period per product, so the
   three visuals never fall into step with one another. Applied to the
   mock itself, not the constellation item, because the parallax handler
   owns that element's translate.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .cricosoft-constellation__item .cricosoft-mock,
  .cricosoft-mock-glow > .cricosoft-mock {
    animation: cricosoft-float 7s var(--cricosoft-ease) infinite;
  }

  .cricosoft-constellation__item--score .cricosoft-mock,
  .cricosoft-mock-score.cricosoft-mock { animation-duration: 5.5s; animation-delay: -1.8s; }

  .cricosoft-constellation__item--ledger .cricosoft-mock,
  .cricosoft-mock-ledger.cricosoft-mock { animation-duration: 8.5s; animation-delay: -3.4s; }
}

@keyframes cricosoft-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* ============================================================
   MOTION OPT-OUT
   Every looping animation in this sheet stops. The driver in
   cricosoft.js checks the same preference and never starts.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cricosoft-mock-theme,
  .cricosoft-mock-theme.is-swapping,
  .cricosoft-mock-ball,
  .cricosoft-mock-ball.is-new,
  .cricosoft-mock-score__bar,
  .cricosoft-mock-ledger__in,
  .cricosoft-mock-ledger__out,
  .cricosoft-mock-row.is-posted,
  .cricosoft-mock-score__tag::before,
  .cricosoft-constellation__item .cricosoft-mock,
  .cricosoft-mock-glow > .cricosoft-mock {
    animation: none;
  }

  .cricosoft-mock-score__bar,
  .cricosoft-mock-ledger__in,
  .cricosoft-mock-ledger__out { transition: none; }
}