/* Experiência only. Original logo files, colors, dimensions and grid stay intact. */
:is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li,
:is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li > img {
  opacity: 1;
  transform: none;
  animation: none;
}

/* A brief entrance on the cell; the logo itself never pulses in opacity. */
html.has-brand-motion :is(.stage .sc:nth-of-type(14).on .brands-grid, #experiencia .mobile-brands) > li.is-brand-revealing {
  animation: entre-brand-enter .6s cubic-bezier(.16, .8, .2, 1) var(--brand-enter-delay, 0s) both;
}

/* Visible, gentle drift with offset timing, only while the mark is visible. */
html.has-brand-motion :is(.stage .sc:nth-of-type(14).on .brands-grid, #experiencia .mobile-brands) > li.is-brand-motion-running > img {
  animation: entre-brand-float var(--brand-float-period, 7s) ease-in-out var(--brand-float-phase, 0s) infinite var(--brand-float-direction, normal);
}

/* Finish the original delayed grid reveal if playback is interrupted early. */
html.has-brand-motion .paused .sc:nth-of-type(14).on .brands-grid,
html.has-brand-motion .reduced .sc:nth-of-type(14).on .brands-grid,
html.has-brand-motion .stage.still .sc:nth-of-type(14).on .brands-grid {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Remove animations rather than pause them: desktop's global play() cannot restart them. */
html.brand-motion-suspended :is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li,
html.brand-motion-suspended :is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li > img,
:is(.paused, .reduced) :is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li,
:is(.paused, .reduced) :is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li > img,
.stage.still .sc:nth-of-type(14) .brands-grid > li,
.stage.still .sc:nth-of-type(14) .brands-grid > li > img {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@keyframes entre-brand-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes entre-brand-float {
  0%, 50%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1.5px, -4px, 0); }
  75% { transform: translate3d(-1.5px, 4px, 0); }
}

@media (prefers-reduced-motion: reduce), print {
  .stage .sc:nth-of-type(14).on .brands-grid {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  :is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li,
  :is(.stage .sc:nth-of-type(14) .brands-grid, #experiencia .mobile-brands) > li > img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}