/* ==========================================================================
   "THERE ISN'T A FENCE WE CAN'T BUILD" banner — continuous slide marquee.

   The markup is two identical .animation-banner-component sets inside
   .animation-banner-marquee. The track is animated from 0 to -50%, which is
   exactly one set width, so the second set lands where the first started and
   the loop is seamless.

   Two invariants keep it gapless at any viewport:
     1. Both sets are always the same width.
     2. A set is never narrower than the viewport (min-width: 100vw), so the
        track (2 sets) always covers the screen mid-animation.

   Spacing is carried by each item's left/right padding rather than a flex
   gap, so the space across the set boundary equals the space between items.

   Users with prefers-reduced-motion get the original static banner: the
   marquee styles are scoped to (prefers-reduced-motion: no-preference) and
   the duplicated set is hidden by default.
   ========================================================================== */

.animation-banner-marquee {
  height: 100%;
}

/* Default (and reduced-motion): the clone is decorative, keep it out. */
.animation-banner-component[aria-hidden="true"] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .section-animation-banner {
    overflow: hidden;
  }

  .animation-banner-marquee {
    width: max-content;
    animation: 28s linear infinite animation-banner-slide;
    will-change: transform;
    display: flex;
  }

  .animation-banner-component,
  .animation-banner-component[aria-hidden="true"] {
    flex: none;
    justify-content: flex-start;
    align-items: center;
    min-width: 100vw;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
    column-gap: 0;
    display: flex;
  }

  /* Items share the set's free space equally, so gaps stay even at every
     viewport — including across the seam between the two sets. */
  .animation-banner-marquee .shield-animation-icon-block,
  .animation-banner-marquee .shield-animation-icon-block.hide {
    flex: 1 0 auto;
    justify-content: center;
    padding-left: 28px;
    padding-right: 28px;
    white-space: nowrap;
    display: flex;
  }

  .animation-banner-marquee .animation-text {
    white-space: nowrap;
  }

  @keyframes animation-banner-slide {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (max-width: 479px) {
  .animation-banner-marquee .shield-animation-icon-block,
  .animation-banner-marquee .shield-animation-icon-block.hide {
    padding-left: 20px;
    padding-right: 20px;
  }
}