/* Motion: few, deliberate reveals. Headlines rise line by line out of a mask; only a section's main blocks fade.
   Everything here sits under .js (set in <head> before paint), so the page is complete if scripts fail.
   Delays come from motion.js: --rd is the group stagger, --li the line index. */

.reveal-lines .line, [data-reveal="lines"] .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }   /* room for descenders (y, g, p) */
.reveal-lines .line > span, [data-reveal="lines"] .line > span { display: inline-block; }
/* the hidden start states key off the data-reveal attributes too, so they hold from the very first paint: the classes
   only arrive once fonts are ready, and a phone painted the finished page first, then hid it and played the reveal (a blink) */
.js [data-reveal="lines"]:not(.reveal-lines):not(:has(> .line)) { opacity: 0; }
.js .reveal-lines .line > span, .js [data-reveal="lines"] .line > span {
  transform: translate3d(0, 112%, 0);
  transition: transform var(--dur-hero) var(--ease-out) calc(var(--rd, 0s) + var(--li, 0) * var(--line-step));
  will-change: transform;
}
.js .reveal-lines.is-in .line > span { transform: none; }
.js .reveal-lines.is-done .line > span { will-change: auto; }

.js .fade, .js [data-reveal="fade"] {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur-reveal) var(--ease-out) var(--rd, 0s), transform var(--dur-reveal) var(--ease-out) var(--rd, 0s);
}
.js .fade.is-in { opacity: 1; transform: none; }

/* a hairline that draws in from the left */
.js .draw, .js [data-reveal="draw"] { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease-out) var(--rd, 0s); }
.js .draw.is-in { transform: none; }

/* reduced motion: the finished page, at once. Still designed, never broken */
@media (prefers-reduced-motion: reduce) {
  .js .reveal-lines .line > span, .js .fade, .js .draw, .js [data-reveal] .line > span, .js [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
/* QA final state (revealAll): finished, with no transition still running */
.motion-final .reveal-lines .line > span, .motion-final .fade, .motion-final .draw, .motion-final [data-reveal] .line > span, .motion-final [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }
/* safety net: if the motion script never ran (failed to load, threw), show everything */
.no-motion .reveal-lines .line > span, .no-motion .fade, .no-motion .draw, .no-motion [data-reveal] .line > span, .no-motion [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }