/* The same artwork layers compose both the project cards and their heroes. */
.project-theme--sap,
.case-hero--sap { --hero-background: url("case-heroes/sap-bg.jpg"); }
.project-theme--rbc,
.case-hero--rbc { --hero-background: url("case-heroes/rbc-bg.jpg"); }
.project-theme--compliance,
.case-hero--compliance { --hero-background: url("case-heroes/compliance-bg.jpg"); }
.project-theme--checkout,
.case-checkout-hero { --hero-background: url("crypto-checkout/hero-data-waves.png"); }

.project-artwork > .project-background {
  position: absolute;
  inset: 0;
  /* The parent clips the card; transition corners are animated separately. */
  border-radius: 0;
  background: var(--hero-background) center / cover no-repeat;
}

.project-devices {
  position: absolute;
  inset: 15% 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  justify-items: center;
}

.project-devices > img {
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}

/* Keep both cutout exports cropped at the card's lower edge. */
.project-theme--checkout .project-devices {
  display: block;
  inset: 0;
}

.project-theme--checkout .project-device--main {
  position: absolute;
  top: 9.8%;
  left: 6.4%;
  width: 100%;
  max-width: none;
  max-height: none;
}

.project-theme--checkout .project-device--mobile {
  position: absolute;
  top: 27.6%;
  right: 2.7%;
  width: 29%;
  max-width: none;
  max-height: none;
}

/* Card-only compositions; expanded hero geometry stays independent. */
.project-theme--sap .project-devices {
  display: block;
  inset: 9.5% auto auto 25.5%;
  width: 100%;
}

.project-theme--sap .project-device--main {
  width: 100%;
  max-width: none;
  max-height: none;
}

.project-sap-logo {
  position: absolute;
  z-index: 1;
  top: 41.5%;
  left: 5.7%;
  width: 23.1%;
  aspect-ratio: 425 / 214;
  /* Reuse the original logo artwork as a clipped image sprite. */
  background: url("cdn.prod.website-files.com/6616fae0823d91ec448e44ef_PF-thumbnail-S.jpg") 7.91% 50% / 433.176% 588.785% no-repeat;
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
}

.project-theme--rbc .project-devices {
  display: block;
  inset: 11.5% 1.5% auto;
}

.project-theme--rbc .project-device--main {
  width: 100%;
  max-height: none;
}

.project-theme--compliance .project-devices {
  display: block;
  inset: 10% auto auto -6.25%;
  width: 125%;
}

.project-theme--compliance .project-device--main {
  width: 100%;
  max-width: none;
  max-height: none;
}

/* Restore history positions instantly while snapshots are captured. Anchor links
   keep the normal smooth scrolling outside a page navigation. */
html[data-project-navigation] {
  scroll-behavior: auto !important;
  overflow-anchor: none;
}

/* Native navigation keeps link behavior, URLs, focus, and browser history. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-group(*) {
    animation-duration: 680ms;
    animation-timing-function: cubic-bezier(.22, .8, .2, 1);
  }

  ::view-transition-group(root) {
    z-index: 0;
    animation: none;
    transform: none;
  }
  ::view-transition-group(project-surface) { z-index: 1; }
  ::view-transition-group(project-brand) { z-index: 2; }
  ::view-transition-group(project-main) { z-index: 2; }
  ::view-transition-group(project-mobile) { z-index: 3; }
  ::view-transition-group(project-copy) { z-index: 4; }
  ::view-transition-group(project-navigation) { z-index: 5; }

  /* Keep the outgoing page opaque beneath the incoming page: no white gap. */
  ::view-transition-old(root) { animation: none; opacity: 1; }
  ::view-transition-new(root) { animation: project-fade-in 680ms ease both; }

  ::view-transition-old(project-navigation) { animation: none; opacity: 0; }
  ::view-transition-new(project-navigation) { animation: none; }

  /* The outgoing artwork is already painted. Keep it beneath the incoming
     snapshot so a late image decode can never expose a white rectangle. */
  ::view-transition-old(project-surface),
  ::view-transition-new(project-surface) {
    animation: none;
    mix-blend-mode: normal;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  ::view-transition-old(project-surface) { opacity: 1; }
  ::view-transition-new(project-surface) {
    animation: project-fade-in 240ms 300ms ease both;
  }

  ::view-transition-image-pair(project-main) {
    animation: project-main-crop 680ms linear both;
  }
  ::view-transition-image-pair(project-mobile) {
    animation: project-mobile-crop 680ms linear both;
  }

  ::view-transition-old(project-main),
  ::view-transition-old(project-mobile) { animation: none; opacity: 1; mix-blend-mode: normal; }
  ::view-transition-new(project-main),
  ::view-transition-new(project-mobile) {
    animation: project-fade-in 240ms 300ms ease both;
    mix-blend-mode: normal;
  }

  ::view-transition-old(project-brand) { animation: project-fade-out 65ms ease both; }
  ::view-transition-new(project-brand) { animation: project-fade-in 180ms 350ms ease both; }

  ::view-transition-new(project-copy) { animation: project-fade-in 300ms 260ms ease both; }
  ::view-transition-old(project-copy) { animation: project-fade-out 140ms ease both; }

  ::view-transition-image-pair(project-surface) {
    overflow: clip;
    animation: project-unround 680ms cubic-bezier(.22, .8, .2, 1) both;
  }

  html[data-project-return]::view-transition-image-pair(project-surface) {
    animation-direction: reverse;
  }
}

@keyframes project-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes project-fade-out { to { opacity: 0; } }
@keyframes project-unround { from { border-radius: 16px; } to { border-radius: 0; } }