/* Restore the established photo and palette motion in the master/service chapters. */
.onegml-palette > div:focus-visible,
.v67-palette > .v67-swatch:focus-visible {
  outline: 2px solid var(--tone-ink);
  outline-offset: -9px !important;
}

@media (prefers-reduced-motion: no-preference) {
  .onegml-palette > div,
  .v67-palette > .v67-swatch {
    transition: flex-grow .45s cubic-bezier(.22,.68,0,1),
      transform .65s cubic-bezier(.22,.68,0,1), opacity .5s ease;
    transform-origin: bottom;
  }
  :is(.onegml-palette,.v67-palette).is-pending > div {
    opacity: 0;
    transform: translateY(36px);
  }
  :is(.onegml-palette,.v67-palette).is-entering > div {
    transition-delay: 0s, calc(var(--swatch-index) * 70ms), calc(var(--swatch-index) * 70ms);
  }
}

/* Animate each finished composition as one piece, including the accessories mockup. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(#master,#strategy,#people) .image-button > :is(img,.accessories-swap) {
    transition: transform .55s cubic-bezier(.22,.68,0,1);
    transform-origin: center;
  }
  :is(#master,#strategy,#people) .image-button:is(:hover,:focus-visible) > :is(img,.accessories-swap) {
    /* Deliberately supersede the earlier transform:none!important photo reset. */
    transform: scale(1.035) !important;
  }
}

/* Retain the existing two-column mobile palettes. */
@media (min-width: 701px) {
  .onegml-palette,
  .division-v67 .v67-palette {
    display: flex;
  }
  .onegml-palette > div,
  .v67-palette > .v67-swatch {
    flex: 1 1 0;
    min-width: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    :is(.onegml-palette,.v67-palette) > div:focus-visible { flex-grow: 1.4; }
    @media (hover: hover) and (pointer: fine) {
      :is(.onegml-palette,.v67-palette) > div:hover { flex-grow: 1.4; }
    }
  }
}