masks_with_hover.scss

@media (hover: hover) {
  .masked-container:hover {
    .mask {
      /* needs to be able to take clicks while it's beneath .masked, to gain focus */
      pointer-events: auto;
      /* once focused, clicks should fall through to .masked */
      &:focus {
        pointer-events: none;
        /* when focused, .mask and siblings not intended to be covered need to come above .masked */
        z-index: 1;
        & ~ *:not(.masked) { z-index: 1 }
      }
    }

    .masked {
      /* initial HOVER state is neutral z-index, which puts it above the mask */
      z-index: 0;
      /* visually fade in */
      opacity: 1;
      transition: opacity .4s ease .1s;
      /* allow the first click while hovered to focus on .masked an pin it open */
      pointer-events: auto;
      /* allow all children to be clicked in a hover state, even if .masked isn't focused */
      * { pointer-events: auto; }
      /* while focused, allow clicks on blank areas (children will still take clicks)
         to fall through and bring focus to the .mask */
      &:focus, &:focus-within { pointer-events: none; }
    }

    /* when hovered, .masked is always visible unless .mask is focused,
       so the margin text needs to be compatible with the light background */
    .mask:not(:focus) ~ * {
      color: initial;
      .timestamp { color: $purple-blue; }
    }
    /* while the mask is focused, header/footer/gutter text should be white,
       to go w the saturated background of the mask */
    .mask:focus ~ *:not(.masked) {
      color: white;
      .timestamp { color: white; }
    }
  }
}