.app-identity-visual {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(210, 163, 109, .13), transparent 54%),
    color-mix(in srgb, var(--surface) 90%, #070b09);
}

.app-identity-logo {
  display: block;
  width: min(112px, 62%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 24px;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .3));
  transition: transform .24s ease, filter .24s ease;
}

.project:hover .app-identity-logo {
  transform: translateY(-4px) rotate(-1deg);
  filter: drop-shadow(0 21px 34px rgba(0, 0, 0, .36));
}

.app-identity-orb {
  overflow: hidden;
}

.app-identity-orb img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(58%, 210px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 26px;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .28));
}

.app-launch-logo {
  grid-column: 1;
  grid-row: 2 / span 2;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-colour) 34%, transparent), 0 12px 24px rgba(0, 0, 0, .2);
}

.app-launch-logo img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 13px;
  transition: transform .24s ease;
}

.app-launch:hover .app-launch-logo img,
.app-launch:focus-visible .app-launch-logo img {
  transform: scale(1.06) rotate(-2deg);
}

.app-launch-lens {
  --app-colour: #f1d04e;
}

html[data-theme="light"] .app-identity-visual {
  background:
    radial-gradient(circle at 50% 44%, rgba(153, 100, 49, .12), transparent 54%),
    color-mix(in srgb, var(--surface) 84%, white 16%);
}

@media (prefers-reduced-motion: reduce) {
  .app-identity-logo,
  .app-launch-logo img {
    transition: none;
  }
}