/* Original homepage depth, extended to the site's work-card formats. */
html #spi-site :is(
  #spi-real-home-preview #sh-projects .sh-curated-grid > .sh-curated-case,
  [data-spi-project-depth="true"]
) {
  position: relative;
  transform-style: preserve-3d;
  overflow: visible;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

html #spi-site #spi-pilot-main .sp-project > :is(h3, p, .sp-project-kind) {
  box-sizing: border-box;
  padding-inline: 16px;
}
html #spi-site #spi-pilot-main .sp-project > .sp-link {
  display: inline-block;
  margin-left: 16px;
  margin-bottom: 18px;
}

@media (min-width: 741px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html #spi-site :is(
    #spi-real-home-preview #sh-projects .sh-curated-grid > .sh-curated-case,
    [data-spi-project-depth="true"]
  ) {
    transform: perspective(1100px) rotateX(var(--spi-depth-x, 0deg)) rotateY(var(--spi-depth-y, 0deg)) !important;
    box-shadow: 0 15px 25px -17px #17351b70;
  }

  html #spi-site [data-spi-project-depth="true"]:is(:hover, :focus-within) {
    z-index: 2;
  }

  html #spi-site [data-spi-project-depth="true"] > :is(a, figure),
  html #spi-site [data-spi-project-depth="true"] > div,
  html #spi-site [data-spi-project-depth="true"] > a > :is(picture, figure) {
    transform-style: preserve-3d;
    overflow: visible;
  }

  html #spi-site :is(
    #spi-real-home-preview #sh-projects .sh-curated-grid > .sh-curated-case,
    [data-spi-project-depth="true"]
  ) img {
    transform: translateZ(18px) !important;
    transform-origin: center;
    backface-visibility: hidden;
    box-shadow: 0 9px 16px -10px #0008;
  }

  html #spi-site :is(
    #spi-real-home-preview #sh-projects .sh-curated-grid > .sh-curated-case,
    [data-spi-project-depth="true"]
  ) :is(h2, h3, h4, p, figcaption:not(:has(h2, h3, h4, p)), .sh-link, .sp-link) {
    transform: translateZ(32px) !important;
    backface-visibility: hidden;
  }

  html #spi-site [data-spi-project-depth="true"]:is(.sp-project, .sh-curated-case, .sf-card) img {
    border-radius: 14px 14px 0 0;
  }

  html #spi-site #spi-real-home-preview:has(#sh-photo-mode[aria-pressed="true"]) #sh-projects :is(.sh-curated-case, .sh-award),
  html #spi-site #spi-real-home-preview:has(#sh-photo-mode[aria-pressed="true"]) #sh-projects :is(.sh-curated-case, .sh-award) :is(img, h2, h3, h4, p, figcaption, .sh-link) {
    transform: none !important;
  }
}

@media (max-width: 740px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  html #spi-site :is(
    #spi-real-home-preview #sh-projects .sh-curated-grid > .sh-curated-case,
    [data-spi-project-depth="true"]
  ),
  html #spi-site [data-spi-project-depth="true"] :is(img, h2, h3, h4, p, figcaption, .sh-link, .sp-link) {
    transform: none !important;
    transition: none !important;
  }
}