[data-shared-about-motion] .homepage-about-assemble--image {
  animation: homepage-about-image-assemble 1800ms var(--ease-out-expo) 80ms backwards;
}

[data-shared-about-motion] .homepage-about-assemble--content {
  animation: homepage-about-content-assemble 1800ms var(--ease-out-expo) 320ms backwards;
}

@media (hover: hover) and (pointer: fine) {
  [data-shared-about-motion] .about-image.homepage-card-pointer {
    background-position: calc(50% + var(--homepage-image-shift-x, 0px)) calc(50% + var(--homepage-image-shift-y, 0px));
    transition: background-position var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo);
  }

  [data-shared-about-motion] .about-image.homepage-card-pointer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), color-mix(in srgb, var(--color-warm-peach) 18%, transparent), transparent 72%);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out-quart);
    pointer-events: none;
  }

  [data-shared-about-motion] .about-image.homepage-card-pointer:hover::after {
    opacity: 0.58;
  }
}

@keyframes homepage-about-image-assemble {
  from {
    opacity: 0;
    transform: translateX(-88px) rotate(-3deg) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes homepage-about-content-assemble {
  from {
    opacity: 0;
    transform: translateX(72px) rotate(2deg);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-shared-about-motion] .homepage-about-assemble--image,
  [data-shared-about-motion] .homepage-about-assemble--content {
    animation: none;
  }
}