/* Frame the clean portrait independently from the background and live heading. */
@media (min-width: 701px) {
  #hero #hero-3d-character img {
    top: 0 !important;
    bottom: auto !important;
    left: 64% !important;
    height: 190svh !important;
  }
}

@media (max-width: 700px) {
  #hero #hero-3d-character img {
    top: 30svh !important;
    height: 112svh !important;
  }
}

@media (min-width: 701px) and (max-width: 1025px) {
  #hero #hero-3d-character img {
    top: 18svh !important;
    left: 55% !important;
    height: 165svh !important;
  }
}

/* The reference's award image follows each row and the next image pops over it. */
#awards .image-container > div,
#awards .mobile-certificates figure {
  border: 0 !important;
}

@media (min-width: 1026px) {
  #awards.reference-cert-motion .image-container {
    position: absolute !important;
    top: 0 !important;
    right: 4vw !important;
    margin-top: 0 !important;
    transform: translate3d(0, var(--cert-track-y, 0px), 0) !important;
    transition: none !important;
  }
}

#awards.reference-cert-motion .image-container > div {
  transition: none !important;
  overflow: hidden;
}

#awards.reference-cert-motion .certificate-slide,
#awards.reference-cert-motion .certificate-slide.is-active {
  opacity: 1 !important;
  transform: scale(var(--cert-pop-scale, 0)) !important;
  filter: none !important;
  transition: none !important;
  transform-origin: center center;
}

#awards.reference-cert-motion .certificate-row::after {
  transform: scaleX(var(--cert-divider-progress, 0));
  transform-origin: left center;
}

#awards.reference-cert-motion .mobile-certificates figure,
.motion-ready #awards.reference-cert-motion .mobile-certificates figure.in-view {
  opacity: var(--mobile-certificate-opacity, 1) !important;
  transform: translate3d(0, var(--mobile-certificate-y, 0px), 0) scale(var(--mobile-certificate-scale, 1)) !important;
  filter: blur(var(--mobile-certificate-blur, 0px)) !important;
  transition: none !important;
}

/* Cards rise in sequence; their bottom rules respond to pointer and keyboard focus. */
#work-with-me.reference-work-motion .work-card,
.motion-ready #work-with-me.reference-work-motion .work-card.in-view {
  opacity: var(--work-reveal-opacity, 1) !important;
  transform: translate3d(0, var(--work-reveal-y, 0px), 0) !important;
  transition: none !important;
}

#work-with-me.reference-work-motion .work-card .absolute.inset-0.h-px {
  transform: scaleX(var(--work-hover-line, 0)) !important;
  transition: none !important;
}

#clientblur.scroll-depth-motion > .sticky:first-child {
  perspective: 1200px;
}

#clientblur.scroll-depth-motion > .sticky:first-child h3,
.motion-ready #clientblur.scroll-depth-motion > .sticky:first-child h3.in-view {
  opacity: var(--headline-opacity, 1) !important;
  transform: translate3d(0, var(--headline-y, 0px), var(--headline-z, 0px)) scale(var(--headline-scale, 1)) !important;
  filter: blur(var(--headline-blur, 0px)) !important;
  transition: none !important;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #awards.reference-cert-motion .certificate-slide,
  #awards.reference-cert-motion .certificate-slide.is-active,
  #awards.reference-cert-motion .mobile-certificates figure,
  #work-with-me.reference-work-motion .work-card,
  #clientblur.scroll-depth-motion > .sticky:first-child h3 {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}