/* Opening mosaic: a living edit of the room, table, craft, and Amman light. */
.hero-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  background: #080705;
  perspective: 1200px;
}

.hero-mosaic__tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #171510;
  opacity: 0;
  transform: translateY(16px) scale(.965) rotateX(5deg);
  transform-origin: center;
  animation: mosaic-draw .62s calc(.045s * var(--tile-index) + .08s) cubic-bezier(.22,1,.36,1) forwards;
}

.hero-mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.66) brightness(.76) contrast(1.06);
  transform: scale(1.035) rotateY(0);
  transition: opacity .22s ease, transform .44s cubic-bezier(.77,0,.18,1), filter .35s ease;
  backface-visibility: hidden;
}

.hero-mosaic__tile.is-flipping img {
  opacity: .14;
  filter: saturate(.35) brightness(.42);
  transform: scale(1.075) rotateY(88deg);
}

.hero-mosaic__tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.hero-mosaic__tile--2 { grid-column: 3 / 5; grid-row: 1 / 2; }
.hero-mosaic__tile--3 { grid-column: 5 / 7; grid-row: 1 / 3; }
.hero-mosaic__tile--4 { grid-column: 3 / 4; grid-row: 2 / 4; }
.hero-mosaic__tile--5 { grid-column: 4 / 5; grid-row: 2 / 3; }
.hero-mosaic__tile--6 { grid-column: 4 / 6; grid-row: 3 / 5; }
.hero-mosaic__tile--7 { grid-column: 1 / 2; grid-row: 3 / 5; }
.hero-mosaic__tile--8 { grid-column: 2 / 3; grid-row: 3 / 4; }
.hero-mosaic__tile--9 { grid-column: 2 / 4; grid-row: 4 / 5; }
.hero-mosaic__tile--10 { grid-column: 5 / 7; grid-row: 3 / 4; }
.hero-mosaic__tile--11 { grid-column: 5 / 6; grid-row: 4 / 5; }
.hero-mosaic__tile--12 { grid-column: 6 / 7; grid-row: 4 / 5; }

.panel-hero__shade {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 48%, rgba(8,7,5,.08) 0 18%, rgba(8,7,5,.32) 56%, rgba(8,7,5,.52) 100%),
    linear-gradient(0deg,rgba(8,7,5,.82),transparent 46%,rgba(8,7,5,.36));
}

.panel-hero__center {
  z-index: 3;
}

.panel-hero__center img {
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.58));
}

.panel-hero__bottom,
.panel-hero .panel-index {
  z-index: 4;
}

@keyframes mosaic-draw {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 620px) {
  .hero-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 2px;
  }

  .hero-mosaic__tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .hero-mosaic__tile--2 { grid-column: 3 / 4; grid-row: 1 / 2; }
  .hero-mosaic__tile--3 { grid-column: 3 / 4; grid-row: 2 / 4; }
  .hero-mosaic__tile--4 { grid-column: 1 / 2; grid-row: 3 / 5; }
  .hero-mosaic__tile--5 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .hero-mosaic__tile--6 { grid-column: 2 / 3; grid-row: 4 / 6; }
  .hero-mosaic__tile--7 { grid-column: 3 / 4; grid-row: 4 / 5; }
  .hero-mosaic__tile--8 { grid-column: 1 / 2; grid-row: 5 / 6; }
  .hero-mosaic__tile--9 { grid-column: 3 / 4; grid-row: 5 / 6; }
  .hero-mosaic__tile--10,
  .hero-mosaic__tile--11,
  .hero-mosaic__tile--12 { display: none; }

  .hero-mosaic__tile img {
    filter: saturate(.68) brightness(.7) contrast(1.06);
  }

  .panel-hero__shade {
    background:
      radial-gradient(circle at 50% 46%, rgba(8,7,5,.12), rgba(8,7,5,.4) 62%, rgba(8,7,5,.63)),
      linear-gradient(0deg,rgba(8,7,5,.84),transparent 48%,rgba(8,7,5,.32));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mosaic__tile {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-mosaic__tile img {
    transition: none;
  }
}