.mosaic {
  position: relative;
  height: 250vh;
  view-timeline-name: --pin;
  view-timeline-axis: block;
  background: var(--bg-light);
}

.mosaic__sticky {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: var(--bg-light);
}

.mosaic-head {position: absolute; left: 0; right: 0; z-index: 4; }

.tile {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--placeholder);
  img {width: 100%; height: 100%; object-fit: cover; display: block;}
}

.t1 {left: -2.646%; top: 51%; width: 11.905%; height: 35%; --drift: -140px; }
.t2 {left: 12.566%; top: 45%; width: 18.519%; height: 29%; --drift: -100px; }
.t3 {left: 12.566%; top: 76%; width: 18.519%; height: 14%; --drift: -100px }
.t4 {left: 68.915%; top: 45%; width: 18.519%; height: 29%; --drift: 140px }
.t5 {left: 68.915%; top: 76%; width: 18.519%; height: 14%; --drift: 140px }
.t6 {left: 90.741%; top: 51%; width: 11.905%; height: 35%; --drift: 120px }

.mosaic-hero {
  inset: 54% 31.878% 7% 33.73%;
  z-index: 2;
  img {transform: scale(1.16); }
}

.hero-veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to bottom,transparent 0%,rgba(11,11,13,.4) 30%,rgba(11,11,13,.95) 100%);
  pointer-events: none;
}


.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 5;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--subtle);
}

.mosaic-story {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 5vw 7vh;
  color: var(--white);
  opacity: 0;
  transform: translateY(30px);
  display: grid;
  gap:16px;
  h2 {font-size: clamp(var(--text-special), 5vw, 72px); line-height: 1.08; }
  .intro {max-width: 620px; line-height: 1.7; }
}

@keyframes grow {
  from {inset: 54% 31.878% 7% 33.73%; }
  to {inset: 0 }
}

@keyframes mosaicPar {
  from {transform: translateY(6%) scale(1.16); }
  to {transform: translateY(-6%) scale(1.16); }
}

@keyframes headAway {
  to {opacity: 0; transform: translateY(-40px); }
}

@keyframes part {
  to {opacity: 0; transform: translateX(var(--drift)); }
}

@keyframes veilIn {
  to {opacity: 1; }
}

@keyframes storyIn {
  to {opacity: 1; transform: none; }
}

@keyframes hintOut {
  to {opacity: 0; }
}

@supports(animation-timeline:view()) {
  @media(prefers-reduced-motion:no-preference) {

    .mosaic-hero {
      animation: grow ease-in-out both;
      animation-timeline: --pin;
      animation-range: contain 0% contain 100%
    }

    .mosaic-hero img {
      animation: mosaicPar linear both;
      animation-timeline: --pin;
      animation-range: contain 0% contain 100%
    }

    .mosaic-head {
      animation: headAway linear both;
      animation-timeline: --pin;
      animation-range: contain 0% contain 40%
    }

    .tile:not(.mosaic-hero) {
      animation: part linear both;
      animation-timeline: --pin;
      animation-range: contain 0% contain 60%
    }

    .hero-veil {
      animation: veilIn linear both;
      animation-timeline: --pin;
      animation-range: contain 55% contain 88%
    }

    .mosaic-story {
      animation: storyIn var(--ease,cubic-bezier(.16,1,.3,1)) both;
      animation-timeline: --pin;
      animation-range: contain 68% contain 94%
    }

    .scroll-hint {
      animation: hintOut linear both;
      animation-timeline: --pin;
      animation-range: contain 0% contain 15%
    }
  }
}