/* ==========================================================
   ANIMATIONS: keyframes and scroll-reveal styles
   ========================================================== */

/* ---------- Keyframes ---------- */
@keyframes kenburns {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}

@keyframes progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes lineUp {
  to { transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Headline line-by-line reveal ---------- */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em; /* keeps letters like "g" and "y" from being clipped */
  margin-bottom: -0.12em;
}
.line-mask > span {
  display: block;
  transform: translateY(110%);
  animation: lineUp 1.2s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

/* ---------- Scroll reveal ----------
   Elements with data-reveal start hidden and fade up when scrolled into view.
   The "js" class is added by a tiny script in <head>, so if JavaScript ever
   fails, content is still visible. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}