/* Only classified decorative icons opt in; branded artwork keeps its paints. */
.orbyte-icon-primary,
.orbyte-icon-mask {
  color: var(--c-primary-brand, var(--data-btn-primary-enabled-color, currentColor));
}

.orbyte-icon-mask {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: middle;
}

.orbyte-icon-mask > img {
  display: block;
  opacity: 0;
}

.orbyte-icon-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask: var(--orbyte-icon-image) center / contain no-repeat;
  mask: var(--orbyte-icon-image) center / contain no-repeat;
}

/* Nothing is hidden while waiting for JavaScript or IntersectionObserver. */
.orbyte-scroll-reveal-active {
  animation: orbyte-scroll-reveal var(--orbyte-reveal-duration, 650ms) ease-out;
}

@keyframes orbyte-scroll-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--orbyte-reveal-distance, 20px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbyte-scroll-reveal-active {
    animation: none !important;
  }
}