/* Home hero activity — a lightweight extension of the digital price receipt. */
.hero--live .hero-layout {
  position: relative;
  z-index: 2;
}

.hero-live-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 53px, rgba(23, 46, 91, .035) 54px, transparent 55px),
    linear-gradient(to left, rgba(229, 50, 79, .025), transparent 48%);
  -webkit-mask-image: linear-gradient(to left, #000 0, rgba(0, 0, 0, .78) 47%, transparent 88%);
  mask-image: linear-gradient(to left, #000 0, rgba(0, 0, 0, .78) 47%, transparent 88%);
}

.hero-live-field > span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -24%;
  width: 22%;
  opacity: 0;
  background: linear-gradient(to left, transparent, rgba(229, 50, 79, .08), rgba(255, 255, 255, .76), transparent);
  transform: translate3d(0, 0, 0) skewX(-9deg);
  animation: hero-live-scan 8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.hero-kicker--live i {
  position: relative;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mint-strong);
  box-shadow: 0 0 0 5px rgba(20, 122, 88, .1);
}

.hero-kicker--live i::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(20, 122, 88, .35);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.55);
  animation: hero-live-pulse 2.4s ease-out infinite;
}

.hero--live .hero-live-mark {
  isolation: isolate;
}

.hero--live .hero-live-mark::after {
  transform: scaleX(.2);
  transform-origin: right center;
  animation: hero-live-highlight 5.2s cubic-bezier(.22, .72, .2, 1) infinite;
}

.hero--live .hero-live-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -4px 0;
  inset-inline: 0;
  opacity: 0;
  background: linear-gradient(100deg, transparent 36%, rgba(255, 255, 255, .88) 50%, transparent 64%);
  transform: translate3d(105%, 0, 0);
  animation: hero-live-title-scan 5.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

.price-receipt--live .live-dot {
  animation: hero-live-status 2.4s ease-in-out infinite;
}

.receipt-live-meter {
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: 3px;
  margin-block: -2px 2px;
  border-radius: 999px;
  background: #edf1f6;
  direction: ltr;
}

.receipt-live-meter > span {
  display: block;
  width: 28%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--mint-strong) 45%, var(--pomegranate));
  transform: translate3d(-120%, 0, 0);
  animation: receipt-live-progress 3.6s cubic-bezier(.45, 0, .25, 1) infinite;
}

.hero-trust--stats { align-items: stretch; gap: 10px 26px; }
.hero-trust--stats .hero-stat { position: static; display: grid; gap: 2px; padding-inline: 14px 0; border-inline-start: 1px solid var(--line); }
.hero-trust--stats .hero-stat::before { display: none; }
.hero-trust--stats .hero-stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.hero-trust--stats .hero-stat-value { font-family: var(--data); font-size: 22px; font-weight: 900; line-height: 1; color: var(--pomegranate); font-variant-numeric: tabular-nums; }
.hero-trust--stats .hero-stat--static b { font-size: 13px; color: var(--mint-strong); }
.hero-trust--stats .hero-stat small { margin-block-start: 1px; color: var(--ink-soft); font-size: 10.5px; font-weight: 700; }
.hero-trust--stats .hero-stat-value.is-counted { animation: hero-stat-settle .55s cubic-bezier(.22, .9, .32, 1); }

@keyframes hero-stat-settle {
  0% { transform: scale(1); text-shadow: none; }
  40% { transform: scale(1.14); text-shadow: 0 0 16px rgba(229, 50, 79, .5); }
  100% { transform: scale(1); text-shadow: none; }
}

.hero--live.is-live-paused .hero-live-field > span,
.hero--live.is-live-paused .hero-kicker--live i::after,
.hero--live.is-live-paused .hero-live-mark::before,
.hero--live.is-live-paused .hero-live-mark::after,
.hero--live.is-live-paused .price-receipt--live .live-dot,
.hero--live.is-live-paused .receipt-live-meter > span {
  animation-play-state: paused;
}

@keyframes hero-live-scan {
  0%, 16% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-9deg); }
  23% { opacity: .72; }
  68% { opacity: .34; }
  76%, 100% { opacity: 0; transform: translate3d(570%, 0, 0) skewX(-9deg); }
}

@keyframes hero-live-pulse {
  0%, 38% { opacity: 0; transform: scale(.55); }
  48% { opacity: .75; }
  82%, 100% { opacity: 0; transform: scale(1.55); }
}

@keyframes hero-live-status {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .68; transform: scale(.82); }
}

@keyframes hero-live-highlight {
  0%, 12% { opacity: .58; transform: scaleX(.2); }
  25%, 76% { opacity: 1; transform: scaleX(1); }
  92%, 100% { opacity: .58; transform: scaleX(.2); }
}

@keyframes hero-live-title-scan {
  0%, 27% { opacity: 0; transform: translate3d(105%, 0, 0); }
  34% { opacity: .68; }
  51% { opacity: .25; }
  58%, 100% { opacity: 0; transform: translate3d(-105%, 0, 0); }
}

@keyframes receipt-live-progress {
  0%, 12% { opacity: 0; transform: translate3d(-120%, 0, 0); }
  20% { opacity: 1; }
  72% { opacity: 1; }
  82%, 100% { opacity: 0; transform: translate3d(460%, 0, 0); }
}

@media (max-width: 1024px) {
  .hero-live-field {
    opacity: .55;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 84%);
    mask-image: linear-gradient(to bottom, #000, transparent 84%);
  }
}

@media (max-width: 768px) {
  .hero-live-field > span { width: 32%; }
}

@media (max-width: 390px) {
  .hero-live-field { opacity: .42; }
  .receipt-live-meter { margin-inline: 1px; }
}

@media (max-width: 640px) {
  .hero-trust--stats { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 4px; text-align: center; }
  .hero-trust--stats .hero-stat { padding-inline-start: 0; border-inline-start: 0; }
}

@media (min-width: 1200px) {
  .hero--live h1 { font-size: clamp(58px, 4.3vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-live-field > span,
  .hero-kicker--live i::after,
  .hero-live-mark::before,
  .receipt-live-meter > span {
    display: none;
  }

  .hero--live .hero-live-mark::after,
  .price-receipt--live .live-dot {
    animation: none;
    transform: none;
  }

  .hero-stat-value.is-counted {
    animation: none;
  }
}