*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--mat);
  background: var(--marmol);
  color: var(--grafite);
  font-family: var(--sans);
  font-size: var(--text);
  line-height: var(--text-leading);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The band runs flush with the top of the footer. The sides and the bottom clear the
   mat by another 16, so nothing is drawn right against the frame.

   No safe-area inset here: in Safari it is 0 while the toolbar shows and the height of
   the home indicator once it hides, so the foot of the page grew and shrank as you
   scrolled. The 32 plus the mat already clear it. */
.footer {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--band-gap);
  padding: 0 var(--mat) calc(var(--mat) * 2);
}

/* The band: the seven letters of the logotype in the middle, blocks of the iso on
   either side, cropped by the page. At rest each cell is a white block; on hover the
   block fades out and its shape fades in. */

.band {
  height: var(--block);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--block-gap);
  overflow: hidden;
}

.cell {
  position: relative;
  flex: none;
  width: var(--block);
}

/* The block is a layer of its own rather than the cell's background: a colour has to be
   painted every frame it changes, where an opacity is handed to the compositor and the
   cell is never redrawn. Seventeen cells and the whole logotype inside each one make
   that the difference between the band gliding and the band stepping. */
.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--white);
  transition: opacity var(--cell-fade) ease var(--cell-hold);
}

.cell--c { width: calc(var(--block) * 162 / 198); }
.cell--r { width: calc(var(--block) * 96 / 198); }

.cell__shape {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--ember);
  opacity: 0;
  transition: opacity var(--cell-fade) ease var(--cell-hold);
}

/* Leaving is where the band gets its hand. A letter holds its colour for a moment after
   the pointer is gone and only then goes out, so a hand crossing the word leaves most of
   it lit and the letters drop away one after another, in the order they were left.
   Arriving waits for nothing. */
@media (hover: hover) {
  .cell:hover::before { opacity: 0; }
  .cell:hover .cell__shape { opacity: 1; }

  .cell:hover::before,
  .cell:hover .cell__shape {
    transition-duration: var(--cell-in);
    transition-delay: 0s;
  }
}

/* A shade apart from one another, so no two letters go out on the same beat. */
.band .cell:nth-child(5n + 1) { --cell-fade: 820ms; }
.band .cell:nth-child(5n + 2) { --cell-fade: 640ms; }
.band .cell:nth-child(5n + 3) { --cell-fade: 760ms; }
.band .cell:nth-child(5n + 4) { --cell-fade: 580ms; }

/* Without a pointer there is nothing to reveal, so the band shows the logotype itself
   and the blocks step aside. */
@media (hover: none) {
  .cell--block { display: none; }
  .cell::before { display: none; }
  .cell__shape { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cell::before, .cell__shape {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
}