/* Decorative motion only: no dimensions, spacing, content or interaction changes.
   ::before is reserved for the border. Quote selection keeps its own ::after.
   Large catalogs remain still until a card is hovered or contains keyboard focus. */

@property --usa-border-turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

:where(
  .materials > .material,
  .hero .zip-box,
  .exp-product,
  .seo-material,
  .flow-product-card,
  .service-city-list > .city-link,
  .state-card .city-link,
  .seo-market-grid > article,
  .seo-market-grid > a,
  .market-links > a
) {
  position: relative;
  isolation: isolate;
  --usa-card-lift: -3px;
  --usa-card-scale: 1.006;
  transition:
    translate 240ms cubic-bezier(.2, .7, .25, 1),
    scale 240ms cubic-bezier(.2, .7, .25, 1),
    box-shadow 240ms ease,
    border-color 240ms ease;
}

:where(.hero .zip-box) {
  --usa-card-lift: -2px;
  --usa-card-scale: 1.003;
}

/* The quote's scrollable selection grid has a deliberately tight top inset. */
:where(.flow-product-card) {
  --usa-card-lift: -1px;
  --usa-card-scale: 1;
}

:where(.service-city-list > .city-link, .state-card .city-link, .market-links > a) {
  --usa-card-lift: -2px;
  --usa-card-scale: 1.004;
}

/* A restrained elevation is also the fallback where border masking is absent.
   Individual transform properties preserve any existing transform declaration. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(
    .materials > .material,
    .hero .zip-box,
    .exp-product,
    .seo-material,
    .flow-product-card:not(:disabled),
    .service-city-list > .city-link,
    .state-card .city-link,
    .seo-market-grid > article,
    .seo-market-grid > a,
  .market-links > a
  ):is(:hover, :focus-within) {
    translate: 0 var(--usa-card-lift);
    scale: var(--usa-card-scale);
    box-shadow: 0 10px 28px rgb(9 43 82 / 9%), 0 2px 7px rgb(9 43 82 / 4%);
  }
}

@supports (background: conic-gradient(from 0deg, #fff, #123456, #fff)) {
  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    :where(
      .materials > .material,
      .hero .zip-box,
      .exp-product,
      .seo-material,
      .flow-product-card,
      .service-city-list > .city-link,
      .state-card .city-link,
      .seo-market-grid > article,
      .seo-market-grid > a,
  .market-links > a
    )::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      padding: 1.5px;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      background: conic-gradient(
        from var(--usa-border-turn),
        rgb(211 221 232 / 94%) 0deg,
        rgb(255 255 255 / 98%) 44deg,
        rgb(229 29 50 / 88%) 83deg,
        rgb(232 212 218 / 94%) 116deg,
        rgb(255 255 255 / 98%) 161deg,
        rgb(9 43 82 / 92%) 211deg,
        rgb(197 212 229 / 94%) 255deg,
        rgb(255 255 255 / 98%) 310deg,
        rgb(211 221 232 / 94%) 360deg
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      transition: opacity 220ms ease;
    }

    /* The selected state receives a still accent; it never runs an idle loop. */
    .flow-product-card[aria-pressed="true"]::before {
      opacity: .5;
    }

    :where(
      .materials > .material,
      .hero .zip-box,
      .exp-product,
      .seo-material,
      .flow-product-card:not(:disabled),
      .service-city-list > .city-link,
      .state-card .city-link,
      .seo-market-grid > article,
      .seo-market-grid > a,
  .market-links > a
    ):focus-within::before {
      opacity: .84;
    }

    @media (hover: hover) and (pointer: fine) {
      :where(
        .materials > .material,
        .hero .zip-box,
        .exp-product,
        .seo-material,
        .flow-product-card:not(:disabled),
        .service-city-list > .city-link,
        .state-card .city-link,
        .seo-market-grid > article,
        .seo-market-grid > a,
  .market-links > a
      ):hover::before {
        opacity: .84;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      :where(
        .materials > .material,
        .hero .zip-box,
        .exp-product,
        .seo-material,
        .flow-product-card:not(:disabled),
        .service-city-list > .city-link,
        .state-card .city-link,
        .seo-market-grid > article,
        .seo-market-grid > a,
  .market-links > a
      ):focus-within::before {
        animation: usa-border-flow 7.5s linear infinite;
      }

      @media (hover: hover) and (pointer: fine) {
        :where(
          .materials > .material,
          .hero .zip-box,
          .exp-product,
          .seo-material,
          .flow-product-card:not(:disabled),
          .service-city-list > .city-link,
          .state-card .city-link,
          .seo-market-grid > article,
          .seo-market-grid > a,
  .market-links > a
        ):hover::before {
          animation: usa-border-flow 7.5s linear infinite;
        }
      }

      /* Optional lifecycle hook for the one homepage quote card only. Set true
         only while it is visible and the browser tab is active; omit otherwise.
         Never apply an idle-loop hook to every catalog card. */
      .hero .zip-box[data-brand-motion-visible="true"]:not(:hover):not(:focus-within)::before {
        opacity: .46;
        animation: usa-border-flow 10s linear infinite;
      }
    }
  }
}

@keyframes usa-border-flow {
  from { --usa-border-turn: 36deg; }
  to { --usa-border-turn: 396deg; }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .materials > .material,
    .hero .zip-box,
    .exp-product,
    .seo-material,
    .flow-product-card,
    .service-city-list > .city-link,
    .state-card .city-link,
    .seo-market-grid > article,
    .seo-market-grid > a,
  .market-links > a
  ) {
    translate: none;
    scale: none;
    transition: none;
  }

  :where(
    .materials > .material,
    .hero .zip-box,
    .exp-product,
    .seo-material,
    .flow-product-card,
    .service-city-list > .city-link,
    .state-card .city-link,
    .seo-market-grid > article,
    .seo-market-grid > a,
  .market-links > a
  )::before {
    animation: none !important;
    transition: none;
  }
}

@media (forced-colors: active) {
  :where(
    .materials > .material,
    .hero .zip-box,
    .exp-product,
    .seo-material,
    .flow-product-card,
    .service-city-list > .city-link,
    .state-card .city-link,
    .seo-market-grid > article,
    .seo-market-grid > a,
  .market-links > a
  )::before {
    display: none;
  }
}