/* Headlines arrive line by line, from under an edge.

   Each line is its own box with overflow hidden; the text inside starts pushed
   below that box and slides up. Nothing fades — the type is either behind the
   edge or past it, which is what makes it read as film rather than as a web
   page waking up.

   The padding/negative-margin pair on .line is not decoration: a box exactly
   one line-height tall clips the descenders of g, j, p and y, and Barlow
   Condensed has deep ones. The padding gives them room, the margin takes the
   space back out of the layout. */

.cinema-lines{display:block;}

.cinema-line{
  display:block;
  overflow:hidden;
  padding-bottom:0.16em;
  margin-bottom:-0.16em;
}

.cinema-line > span{
  display:block;
  transform:translateY(115%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--line, 0) * 95ms);
  will-change:transform;
}

.is-lit .cinema-line > span{transform:none;}

/* Once a headline has landed the hint is dead weight on every later repaint. */
.is-lit .cinema-line > span{will-change:auto;}

@media (prefers-reduced-motion: reduce){
  .cinema-line > span{
    transform:none;
    transition:none;
    will-change:auto;
  }
}