/* The moving AI-logo carousel from the bottom of design10.
 *
 * Markup, styles and behaviour ported whole; only `.design10-page` is stripped
 * from the selectors, since design11 does not carry that page class. Behaviour
 * lives in qmock.js (design10.js's `startDesign10IconCarousel`). */

.design10-app-visual {
  aspect-ratio: 1.35;
  border-radius: 18px;
  display: block;
  max-width: 620px;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(-18%, 0, 0) scale(0.78);
  transform-origin: left center;
  transition: opacity 720ms ease, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  width: min(52%, 620px);
}
.design10-app-visual.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.design10-app-visual-surface {
  /* design10 ran this panel on a blue-grey slate, and a white veil was tried
     here. Against the space ground it read as a grey rectangle cut out of the
     starfield, so the panel is gone: the logo tiles now float on the universe
     with nothing behind them. */
  background: transparent;
  border: 0;
  border-radius: inherit;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.design10-app-visual-surface::before {
  /* was a sheen for the veil; with no veil there is nothing to catch light */
  content: "";
  display: none;
}
.design10-app-visual-surface::after {
  background: transparent;
  content: "";
  height: 26%;
  left: 0;
  position: absolute;
  top: 37%;
  width: 100%;
  z-index: -1;
}
.design10-app-icon-track {
  align-items: center;
  display: flex;
  gap: 42px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  will-change: transform;
  z-index: 2;
}
.design10-app-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(28, 25, 25, 0.14);
  display: flex;
  flex: 0 0 94px;
  height: 94px;
  justify-content: center;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  transform: scale(0.82);
  transform-origin: center;
  will-change: transform, opacity;
}
.design10-app-icon.is-focused {
  background: rgba(255, 255, 255, 0.94);
  border-color: #c9fe6e;
  box-shadow: 0 14px 30px rgba(28, 25, 25, 0.18);
}
.design10-app-icon img {
  display: block;
  height: 64px;
  object-fit: contain;
  width: 64px;
}
.design10-app-focus {
  display: none;
}
/* The source layout hides .app-sec around tablet width. Keep the section
 * available and stack it before the mobile breakpoint so there is no missing
 * product explanation between the showcase and footer. */
@media (min-width: 901px) and (max-width: 1100px) {
  {
    --design10-header-safe: 100px;
  }

  .h-texts {
    padding-top: var(--design10-header-safe);
  }

  .h-latest > .content {
    padding-top: calc(126px + var(--design10-header-safe));
  }

  #pricing {
    padding-top: calc(var(--design10-header-safe) + 16px);
  }

  #pricing .card {
    margin-top: 0;
  }

  .app-sec {
    align-items: flex-start;
    display: flex !important;
    flex-direction: column;
    margin: 0 auto 100px;
    padding: calc(114px + var(--design10-header-safe)) 30px 34px;
    width: calc(100% - 50px);
  }

  .app-sec .left {
    max-width: none;
    width: 100%;
  }

  .design10-app-visual {
    margin: 44px auto 0;
    max-width: 720px;
    transform-origin: center center;
    width: 100%;
  }
}