/* About: team mosaic ("The same company, at every size.", efellows_website_content §10.7).
   Phones, portrait tablets and short screens get two columns; landscape screens get one mosaic
   around the heading. Without JS, or with reduced motion, the photos are simply shown in place.
   js/team-mosaic.js adds .is-live: on landscape screens the stage pins for 80svh of scroll while
   the photos fly in from an exploded view and lock into their slots; in two columns each photo
   slides in from its side as it scrolls into view. */
.tm {
  position: relative;
  overflow: hidden;
}

.tm-stage {
  padding: 64px 16px 48px;
}

.tm-mosaic {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "h h"
    "a a"
    "e f"
    "d d"
    "g c"
    "l l"
    "b i"
    "j j"
    "k m";
  gap: 8px;
}

.tm .tm-heading {
  grid-area: h;
  margin: 0;
  padding: 0 0 24px;
  color: var(--_base-colors---light-gray);
  font-size: clamp(44px, 7vw, 72px);
  line-height: .88;
  text-align: center;
  transition: color .6s;
}

.tm.is-complete .tm-heading {
  color: var(--_base-colors---white);
}

/* Each slot shows corner marks, like a drawing waiting for its part. */
.tm-slot {
  --tm-mark: #c8d1d647;
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(var(--tm-mark) 0 0) 0 0 / 12px 1px,
    linear-gradient(var(--tm-mark) 0 0) 0 0 / 1px 12px,
    linear-gradient(var(--tm-mark) 0 0) 100% 0 / 12px 1px,
    linear-gradient(var(--tm-mark) 0 0) 100% 0 / 1px 12px,
    linear-gradient(var(--tm-mark) 0 0) 0 100% / 12px 1px,
    linear-gradient(var(--tm-mark) 0 0) 0 100% / 1px 12px,
    linear-gradient(var(--tm-mark) 0 0) 100% 100% / 12px 1px,
    linear-gradient(var(--tm-mark) 0 0) 100% 100% / 1px 12px;
  background-repeat: no-repeat;
}

.tm-a, .tm-d, .tm-j, .tm-l {
  aspect-ratio: 16 / 9;
}

.tm-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #1d2328;
}

.tm-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--_base-colors---mid-gray-10);
  pointer-events: none;
}

/* A photo that has just locked into its slot flashes blue. */
.tm-slot.is-flash .tm-tile::after {
  animation: tm-lock .8s cubic-bezier(.16, 1, .3, 1);
}

@keyframes tm-lock {
  from {
    background-color: #2c60f538;
    box-shadow: inset 0 0 0 2px var(--_base-colors---blue);
  }
  to {
    background-color: #2c60f500;
    box-shadow: inset 0 0 0 1px var(--_base-colors---mid-gray-10);
  }
}

.tm.is-live.is-near .tm-tile {
  will-change: transform, opacity;
}

.tm-a { grid-area: a; }
.tm-b { grid-area: b; }
.tm-c { grid-area: c; }
.tm-d { grid-area: d; }
.tm-e { grid-area: e; }
.tm-f { grid-area: f; }
.tm-g { grid-area: g; }
.tm-i { grid-area: i; }
.tm-j { grid-area: j; }
.tm-k { grid-area: k; }
.tm-l { grid-area: l; }
.tm-m { grid-area: m; }

/* Landscape screens: one mosaic around the heading, pinned while it assembles.
   Keep this media query in step with team-mosaic.js. */
@media screen and (min-width: 768px) and (min-height: 560px) and (min-aspect-ratio: 1/1) {
  .tm {
    overflow: visible;
  }

  .tm-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 24px 48px;
  }

  .tm-mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "a a a a b b b c c d d d"
      "e e e h h h h h h f f f"
      "g g g h h h h h h i i i"
      "j j j k k l l l l m m m";
    gap: 12px;
    aspect-ratio: 1392 / 770;
    /* The whole mosaic fits one screen under the nav: 144px is the stage's vertical padding. */
    width: min(100%, (100vh - 144px) * 1.808, 1720px);
  }

  @supports (height: 100svh) {
    .tm-mosaic {
      width: min(100%, (100svh - 144px) * 1.808, 1720px);
    }
  }

  .tm .tm-heading {
    align-self: center;
    justify-self: center;
    padding: 0 3cqw;
    font-size: clamp(34px, 5.6cqw, 104px);
  }

  .tm-slot, .tm-a, .tm-d, .tm-j, .tm-l {
    aspect-ratio: auto;
  }

  .tm.is-live {
    height: 180vh;
    height: 180svh;
  }

  .tm.is-live .tm-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    /* Soften the clip where scattered photos cross the top and bottom edges of the stage. */
    -webkit-mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 40px), transparent);
  }
}