/* Version 75 / Restore the approved V73 project-page matrix
   V74 editorial imagery and draft pages remain untouched. */

/* Shared exact geometry: desaturated image, tonal logo, fragments and hotspots. */
.project-page .project-hero__media.project-hero__media--matrix
  > img.project-hero-reveal__complete,
.project-page .project-hero__media.project-hero__media--matrix
  > img.project-hero-reveal__matrix,
.project-page .project-hero__media.project-hero__media--matrix
  > .project-hero-reveal__fragments,
.project-page .project-hero__media.project-hero__media--matrix
  > .project-hero-reveal__hotspots {
  position: absolute !important;
  inset: 10% !important;
  width: 80% !important;
  height: 80% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: translateZ(0) !important;
}

/* V73 base state: the complete image is visible immediately at 85% desaturation. */
.project-page .project-hero__media.project-hero__media--matrix
  > img.project-hero-reveal__complete {
  z-index: 1 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  background: #010202 !important;
  opacity: 1 !important;
  filter:
    grayscale(.85)
    brightness(.88)
    contrast(1.04) !important;
  backface-visibility: hidden;
  will-change: inset, width, height, opacity, filter;
  transition:
    opacity .22s ease,
    inset 1.58s cubic-bezier(.2,.72,.2,1),
    width 1.58s cubic-bezier(.2,.72,.2,1),
    height 1.58s cubic-bezier(.2,.72,.2,1),
    filter .48s cubic-bezier(.2,.72,.2,1) !important;
}

/* Same cropped tonal SVG used by both the static and per-cell logo states. */
.project-page .project-hero__media.project-hero__media--matrix
  > img.project-hero-reveal__matrix {
  z-index: 2 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.42)) !important;
  transition: opacity .42s cubic-bezier(.2,.72,.2,1) !important;
}

.project-page .project-hero__media.project-hero__media--matrix
  > .project-hero-reveal__fragments,
.project-page .project-hero__media.project-hero__media--matrix
  > .project-hero-reveal__hotspots {
  display: grid !important;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  grid-template-rows: repeat(6,minmax(0,1fr)) !important;
  gap: 0 !important;
}

.project-page .project-hero__media.project-hero__media--matrix
  > .project-hero-reveal__fragments {
  z-index: 3 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  will-change: inset, width, height, opacity;
  transition:
    inset 1.58s cubic-bezier(.2,.72,.2,1),
    width 1.58s cubic-bezier(.2,.72,.2,1),
    height 1.58s cubic-bezier(.2,.72,.2,1),
    opacity .24s ease !important;
}

.project-page .project-hero__media.project-hero__media--matrix
  > .project-hero-reveal__hotspots {
  z-index: 5 !important;
}

/* A visited cell restores its exact image fragment to full colour. */
.project-page .project-hero-reveal__fragment.is-revealed {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter:
    grayscale(0)
    saturate(1)
    brightness(1)
    contrast(1) !important;
}

/* White and black letters are the identical SVG pixels and tonal opacities. */
.project-page .project-hero__media.project-hero__media--matrix
  .project-hero-reveal__fragment::after {
  opacity: 1 !important;
  background-size: 600% 600% !important;
  background-position: var(--fragment-x) var(--fragment-y) !important;
  transform: none !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.46)) !important;
  transition-property: opacity,filter !important;
  transition-duration: .42s,.32s !important;
  transition-timing-function:
    cubic-bezier(.2,.72,.2,1),
    cubic-bezier(.2,.72,.2,1) !important;
  transition-delay: 0s,0s !important;
}

.project-page .project-hero__media.project-hero__media--matrix
  .project-hero-reveal__fragment.is-revealed::after {
  opacity: 1 !important;
  filter: brightness(0) saturate(0) !important;
}

/* V73 completion: image and coloured mosaic enlarge together. */
.project-page .project-hero__media.project-hero__media--matrix.is-complete
  > img.project-hero-reveal__complete,
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  > img.project-hero-reveal__complete,
.project-page .project-hero__media.project-hero__media--matrix.is-complete
  > .project-hero-reveal__fragments,
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  > .project-hero-reveal__fragments {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.project-page .project-hero__media.project-hero__media--matrix.is-complete
  > img.project-hero-reveal__complete,
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  > img.project-hero-reveal__complete {
  object-fit: cover !important;
  object-position: 50% 50% !important;
  opacity: 1 !important;
  filter: none !important;
  transition-delay: 0s !important;
}

.project-page .project-hero__media.project-hero__media--matrix.is-complete
  > .project-hero-reveal__fragments {
  opacity: 1 !important;
}

.project-page .project-hero__media.project-hero__media--matrix.is-complete
  .project-hero-reveal__fragment {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: none !important;
}

/* Exact verified bottom-right-to-top-left letter fade. */
.project-page .project-hero__media.project-hero__media--matrix.is-complete
  .project-hero-reveal__fragment::after,
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  .project-hero-reveal__fragment::after {
  opacity: 0 !important;
  transform: none !important;
  filter: brightness(0) saturate(0) !important;
  transition-delay:
    calc(var(--letter-fade-order,0) * 34ms),
    0s !important;
}

/* Static overlay and controls leave; fragment letters carry the ending. */
.project-page .project-hero__media.project-hero__media--matrix.is-complete
  > img.project-hero-reveal__matrix,
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  > img.project-hero-reveal__matrix,
.project-page .project-hero__media.project-hero__media--matrix.is-complete
  > .project-hero-reveal__hotspots,
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  > .project-hero-reveal__hotspots,
.project-page .project-hero__media.project-hero__media--matrix.is-complete
  > .project-hero-reveal__interface,
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  > .project-hero-reveal__interface {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Final state: one continuous image, no fragment seams. */
.project-page .project-hero__media.project-hero__media--matrix.is-settled
  > .project-hero-reveal__fragments {
  opacity: 0 !important;
  transition: opacity .28s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .project-page .project-hero__media.project-hero__media--matrix
    > img.project-hero-reveal__complete,
  .project-page .project-hero__media.project-hero__media--matrix
    > img.project-hero-reveal__matrix,
  .project-page .project-hero__media.project-hero__media--matrix
    > .project-hero-reveal__fragments,
  .project-page .project-hero__media.project-hero__media--matrix
    .project-hero-reveal__fragment::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}