/* Keke orbit: move only the outer carrier and keep the source image untouched. */

/* The fallback may orbit with CSS, but it never fades, scales or filters the artwork. */
.orbit-project {
  visibility: visible !important;
  opacity: 1 !important;
  animation: project-orbit var(--orbit-duration) linear infinite !important;
}

/*
 * Keep the carrier transparent in every theme.
 * The light-theme base rule has higher specificity than the generic shell rule,
 * so it must be overridden explicitly here as well.
 */
.orbit-project .orbit-icon-shell,
html[data-theme="light"] .orbit-project .orbit-icon-shell {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: border-radius 160ms ease, box-shadow 160ms ease;
}

/* Interaction belongs to hover or keyboard focus, never to the resting icon. */
.orbit-project:focus-visible .orbit-icon-shell,
html[data-theme="light"] .orbit-project:focus-visible .orbit-icon-shell {
  border-radius: 26%;
  background: transparent;
  box-shadow: 0 0 0 1px var(--cosmos-line-strong);
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .orbit-project:hover .orbit-icon-shell,
  html[data-theme="light"] .orbit-project:hover .orbit-icon-shell {
    border-radius: 26%;
    background: transparent;
    box-shadow: 0 0 0 1px var(--cosmos-line-strong);
    transform: none;
  }
}

.orbit-project .orbit-icon-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: visible;
}

.orbit-project.is-pixel-orbit {
  left: 0;
  top: 0;
  display: block;
  offset-path: none;
  offset-distance: 0;
  offset-rotate: 0deg;
  transform: none;
  animation: none !important;
  will-change: transform;
}

@media (max-width: 560px) {
  body[data-page="home"] {
    /* Keep the complete 64px icon inside the clipped mobile hero at both extremes. */
    --orbit-width: min(480px, calc(100vw - 88px));
  }
}