/* creators.autobricks.ai. The reference page, on the kit. */

/* The rolling word in the headline: images / video / audio, one line high. */
.gline { display: inline-block; white-space: nowrap; }
.roll { display: inline-block; height: 1.05em; line-height: 1.05; overflow: hidden; vertical-align: bottom; }
.roll__t { display: flex; flex-direction: column; animation: rollv 9s cubic-bezier(0.76, 0, 0.24, 1) infinite; }
.roll__t b { display: block; height: 1.05em; line-height: 1.05; font-weight: 800; color: #fff; }
@keyframes rollv {
  0%, 26% { transform: translateY(0); }
  33.3%, 59.3% { transform: translateY(-1.05em); }
  66.6%, 92.6% { transform: translateY(-2.1em); }
  100% { transform: translateY(-3.15em); }
}

/* Three crops of the one canvas screenshot, so the floating outputs differ. */
.crop-a img { object-position: 20% 40%; }
.crop-b img { object-position: 55% 55%; }
.crop-c img { object-position: 85% 70%; }

/* The canvas screenshot under the node-canvas cell's copy. */
.cell__shot--below { margin: 18px -24px -24px; border-top: 1px solid var(--line); border-bottom: 0; }
.cell__shot--below img { aspect-ratio: 16 / 7; object-position: top left; }

.day { display: block; margin-bottom: 8px; font-family: var(--font-h); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--blue-l); }