/* Version 41 / Corrected individual project fragment reveal */

.project-page .project-hero__media--matrix {
  position: relative;
  width: min(100%, 690px);
  max-width: min(100%, calc(100svh - var(--header) - 40px));
  aspect-ratio: 1 / 1 !important;
  justify-self: end;
  overflow: hidden;
  isolation: isolate;
  background: #010202;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
}

.project-page .project-hero__media--matrix .project-hero-reveal__complete,
.project-page .project-hero__media--matrix .project-hero-reveal__matrix {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.project-page .project-hero__media--matrix .project-hero-reveal__complete {
  z-index: 1;
  inset: 10%;
  width: 80%;
  height: 80%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  background: #010202;
  transition: opacity .22s ease;
}

.project-page .project-hero__media--matrix .project-hero-reveal__matrix {
  z-index: 2;
  object-fit: contain;
  opacity: 1;
  background: transparent;
  transition: opacity .48s cubic-bezier(.2,.72,.2,1);
}

/*
  The official letter grid occupies the central 80% of the square.
  The fragment and hotspot grids use the same 10% inset, so every
  interactive-cell centre coincides with its corresponding letter centre.
*/
.project-hero-reveal__fragments,
.project-hero-reveal__hotspots {
  position: absolute;
  inset: 10%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.project-hero-reveal__fragments {
  z-index: 3;
  pointer-events: none;
  transition: opacity .42s ease;
}

.project-hero-reveal__fragment {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 600% 600%;
  background-position: var(--fragment-x) var(--fragment-y);
  transform: scale(.92);
  transform-origin: center;
  transition:
    opacity .2s ease,
    transform .34s cubic-bezier(.2,.72,.2,1);
}

.project-hero-reveal__fragment::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fragment-glyph-image, none);
  background-repeat: no-repeat;
  background-size: 600% 600%;
  background-position: var(--fragment-x) var(--fragment-y);
  opacity: .5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  pointer-events: none;
}

.project-hero-reveal__fragment.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* No veil, tint or greying is applied to the project fragment. */
.project-hero-reveal__fragment.is-revealed {
  filter: none;
}

.project-hero-reveal__hotspots {
  z-index: 5;
  touch-action: pan-y;
}

.project-hero-reveal__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  cursor: crosshair;
}

.project-hero-reveal__cell::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid transparent;
  background: transparent;
  transform: scale(1);
  transform-origin: center;
  transition:
    border-color .2s ease,
    background .2s ease,
    transform .28s cubic-bezier(.2,.72,.2,1);
}

.project-hero-reveal__cell:hover::before,
.project-hero-reveal__cell:focus-visible::before {
  border-color: rgba(255,255,255,.46);
  background: rgba(255,255,255,.035);
  transform: scale(.9);
}

.project-hero-reveal__cell.is-revealed::before {
  border-color: transparent;
  background: transparent;
}

.project-hero-reveal__cell > span {
  position: absolute;
  right: 7%;
  bottom: 6%;
  color: transparent;
  font-size: 7px;
  letter-spacing: .1em;
  transition: color .2s ease;
}

.project-hero-reveal__cell:hover > span,
.project-hero-reveal__cell:focus-visible > span {
  color: rgba(255,255,255,.5);
}

.project-hero-reveal__cell:focus-visible {
  outline: 1px solid rgba(255,255,255,.78);
  outline-offset: -3px;
}

.project-hero-reveal__interface {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 12px;
  left: 14px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
  transition:
    opacity .3s ease,
    transform .3s ease;
}

.project-hero-reveal__hint,
.project-hero-reveal__progress {
  margin: 0;
  padding: 7px 9px;
  color: rgba(255,255,255,.72);
  background: rgba(5,5,5,.34);
  backdrop-filter: blur(10px);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition:
    opacity .28s ease,
    transform .28s ease;
}

.project-hero__media--matrix.has-activity .project-hero-reveal__hint {
  opacity: 0;
  transform: translateY(4px);
}

.project-hero__media--matrix.is-complete .project-hero-reveal__matrix,
.project-hero__media--matrix.is-complete .project-hero-reveal__fragments,
.project-hero__media--matrix.is-complete .project-hero-reveal__hotspots {
  opacity: 0;
  pointer-events: none;
}

.project-hero__media--matrix.is-complete .project-hero-reveal__interface {
  opacity: 0;
  transform: translateY(4px);
}

@media (max-width: 980px) {
  .project-page .project-hero__media--matrix {
    width: min(100%, 720px);
    max-width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 620px) {
  .project-hero-reveal__cell {
    cursor: pointer;
  }

  .project-hero-reveal__hint {
    font-size: 0;
  }

  .project-hero-reveal__hint::after {
    content: "Tap cells to reveal nearby fragments";
    font-size: 8px;
  }

  .project-hero-reveal__interface {
    right: 10px;
    bottom: 9px;
    left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-hero-reveal__fragment,
  .project-hero-reveal__matrix,
  .project-hero-reveal__interface {
    transition-duration: .01ms !important;
  }
}


/* Version 43 / Keep the project image inside the official logo field */
.project-page .project-hero__media--matrix {
  background: #010202;
}

/*
  The image never enters the 10% protection zone.
  The visible project field is exactly 6 × 6, not an implied 7 × 7 crop.
*/
.project-page .project-hero__media--matrix .project-hero-reveal__complete {
  inset: 10%;
  width: 80%;
  height: 80%;
}

.project-hero-reveal__fragment,
.project-hero-reveal__fragment::after {
  background-size: 600% 600%;
}

/* The black protection zone remains visible after all cells are completed. */
.project-hero__media--matrix.is-complete {
  background: #010202;
}






/* Version 45 / Permanent logo protection zone */

/*
  The project image uses one geometry throughout the interaction:
  central 80% image field with a permanent 10% black protection zone.
  Completion removes the logo system but does not resize the image.
*/
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__complete {
  inset: 10%;
  width: 80%;
  height: 80%;
  transition: none;
}

.project-page .project-hero__media--matrix.is-complete {
  background: #010202;
}

/* Only interaction layers disappear at 36 / 36. */
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__matrix,
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__fragments,
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__hotspots,
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__interface {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .project-page .project-hero__media--matrix .project-hero-reveal__complete {
    transition: none !important;
  }
}


/* Version 46 / Reverse intro letter fade */

/*
  At completion, keep the 36 image fragments visible. Only the white
  glyph layer fades, one letter at a time, in the reverse order of the
  intro's top-left-to-outer expansion.
*/
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__fragments {
  opacity: 1;
  pointer-events: none;
}

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

.project-page .project-hero__media--matrix .project-hero-reveal__fragment::after {
  transition:
    opacity .42s cubic-bezier(.2,.72,.2,1);
  transition-delay: 0s;
}

.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__fragment::after {
  opacity: 0;
  transition-delay:
    calc(var(--letter-fade-order, 0) * 34ms);
}

/*
  Once the final top-left letter has disappeared, the fragment grid
  quietly gives way to the identical complete image underneath. Because
  both use the same square crop and protection zone, this creates no jump.
*/
.project-page .project-hero__media--matrix.is-settled .project-hero-reveal__fragments {
  opacity: 0;
  transition:
    opacity .28s ease;
}

/* The interaction chrome leaves immediately; the letters carry the ending. */
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__matrix,
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__hotspots,
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__interface {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .project-page .project-hero__media--matrix.is-complete .project-hero-reveal__fragment::after {
    transition-delay: 0s !important;
    transition-duration: .01ms !important;
  }

  .project-page .project-hero__media--matrix.is-settled .project-hero-reveal__fragments {
    transition-duration: .01ms !important;
  }
}


/* Version 47 / Prevent project-image flash on page entry */

/*
  The ordinary full image is not part of the initial state. The 36 fragment
  backgrounds provide every visible project pixel during interaction.
*/
.project-page .project-hero__media--matrix .project-hero-reveal__complete {
  opacity: 0;
}

/*
  At completion, reveal the identical full image underneath the fragment
  mosaic. The fragments remain visible during the reverse letter fade, then
  settle away with no visual gap.
*/
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__complete {
  opacity: 1;
}

/* The matrix is the only visible first-frame asset over the black field. */
.project-page .project-hero__media--matrix:not(.is-complete) .project-hero-reveal__matrix {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project-page .project-hero__media--matrix .project-hero-reveal__complete {
    transition-duration: .01ms !important;
  }
}


/* Version 48 / Synchronised completion */

/*
  Completion is one continuous movement:
  - white letters contract in reverse intro order;
  - the project image expands from the central 80% field to the full square;
  - both finish at approximately the same moment.
*/
.project-page .project-hero__media--matrix .project-hero-reveal__complete {
  inset: 10%;
  width: 80%;
  height: 80%;
  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);
}

.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__complete {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition-delay: 0s;
}

/*
  The fragment mosaic remains above the expanding image while the letters
  disappear. It settles away only after both movements have completed.
*/
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__fragments {
  opacity: 1;
}

.project-page .project-hero__media--matrix.is-settled .project-hero-reveal__fragments {
  opacity: 0;
  transition: opacity .24s ease;
}

/* The black safety zone is absorbed gradually by the growing project image. */
.project-page .project-hero__media--matrix {
  background: #010202;
}

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


/* Version 49 / Expand the actual 36-fragment mosaic */

/*
  The separate complete-image layer is retained only as a preloaded fallback.
  It never becomes visible during or after completion.
*/
.project-page .project-hero__media--matrix .project-hero-reveal__complete,
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__complete,
.project-page .project-hero__media--matrix.is-settled .project-hero-reveal__complete {
  inset: 10%;
  width: 80%;
  height: 80%;
  opacity: 0 !important;
  transition: none !important;
}

/*
  The same grid that revealed the 36 image cells enlarges continuously from
  the official 80% logo field to the full square. No second image is added.
*/
.project-page .project-hero-reveal__fragments {
  inset: 10%;
  opacity: 1;
  transition:
    inset 1.58s cubic-bezier(.2,.72,.2,1),
    opacity .01ms linear;
}

.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__fragments,
.project-page .project-hero__media--matrix.is-settled .project-hero-reveal__fragments {
  inset: 0;
  opacity: 1;
}

/*
  All 36 cells remain visible after completion and together become the final
  full-square project image. The fragment layer is no longer removed.
*/
.project-page .project-hero__media--matrix.is-settled .project-hero-reveal__fragment {
  opacity: 1;
  transform: scale(1);
}

.project-page .project-hero__media--matrix.is-settled .project-hero-reveal__fragments {
  transition:
    inset 1.58s cubic-bezier(.2,.72,.2,1);
}

/*
  White glyphs still fade individually in reverse intro order while their
  parent image cells grow into the former safety zone.
*/
.project-page .project-hero__media--matrix.is-complete .project-hero-reveal__fragment::after,
.project-page .project-hero__media--matrix.is-settled .project-hero-reveal__fragment::after {
  opacity: 0;
}

/* Keep the outer square stable while the mosaic expands inside it. */
.project-page .project-hero__media--matrix,
.project-page .project-hero__media--matrix.is-complete,
.project-page .project-hero__media--matrix.is-settled {
  background: #010202;
}

@media (prefers-reduced-motion: reduce) {
  .project-page .project-hero-reveal__fragments {
    transition-duration: .01ms !important;
  }
}