/* Hero 01: icon motion confined to each side */
.hero-01-marquee { pointer-events: none; }
.hero-01-marquee.js-marquee .hero-01-track { animation: none !important; }

/* Windows split the width so tracks never cross center */
.hero-01-window { position: absolute; bottom: 0; overflow: hidden; }
.hero-01-window-left { left: 0; right: 55%; }
.hero-01-window-right { left: 55%; right: 0; }

/* Tracks hold the actual SVG rows */
.hero-01-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  /* CSS-only marquee */
  --hero-duration: 20s;
  column-gap: var(--hero-gap, 32px);
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  animation: hero-marquee var(--hero-duration) linear infinite;
}

/* Normalize item widths to remove jitter from mixed sizes */
.hero-01-window-left { --hero-item-width: 72px; --hero-gap: 32px; }
.hero-01-window-right { --hero-item-width: 210px; --hero-gap: 40px; }
.hero-01-track > svg { flex: 0 0 var(--hero-item-width, auto); width: var(--hero-item-width, auto); height: auto; }

/* Base speed hints (pixels per second). */
.hero-01-left  { --hero-duration: 16s; --marquee-pps: 100; }
.hero-01-right { --hero-duration: 20s; --marquee-pps: 80; }

/* Seamless 50% shift: requires two copies of the sequence in each track */
@keyframes hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-01-left,
  .hero-01-right { animation: none; }
}
.hero-01-lottie {
  justify-content: center;
}
.hero-01-lottie__player {
  display: block;
  width: 100%;
  max-width: 740px;
  height: 420px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .hero-01-lottie__player {
    max-width: 100%;
  }
}

/* Safari-only fix: force Tailwind's lg:max-w-full equivalent because Safari ignores nested range media queries */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 64rem) {
    .hero-01 .max-w-106 {
      max-width: 100% !important;
      width: auto !important;
    }
  }
}