/* v53 homepage layer. Loaded after home-v51.css on the homepage only; <body> carries .home-v53.

   The "Unignorable." reveal is sequenced by events, not by a precomputed delay.
   Why: the letters used a 1ms steps() animation and the period a cubic-bezier one. WebKit runs
   cubic-bezier opacity and transform animations on the compositor but cannot run steps() there,
   so on a busy phone the letters stalled on the main thread while the period kept compositor time
   and landed before the word had finished ("Unigno", the period, then "rable").
   Now (1) each letter switches on with a two-frame linear keyframe the compositor can run, and
   (2) the period's animation exists only once the last letter's animationend has fired (class
   hero-dot-go on <html>, set by the entrance script in index.html), so it cannot start early
   whatever the main thread is doing. The eight-bounce fall itself is unchanged (dot-bounce in
   styles.css). */
@media (prefers-reduced-motion: no-preference) {
  .hero-reveal .home-v53 .u .l i { animation: u-strike-v53 34ms linear both; animation-delay: calc(140ms + var(--i) * 170ms); }
  @keyframes u-strike-v53 { 0%, 99.9% { opacity: 0; } 100% { opacity: 1; } }

  /* Hidden and unanimated until the word is complete, so nothing can run ahead of the letters. */
  .hero-reveal:not(.hero-dot-go):not(.hero-settled) .home-v53 .hero h1 .dot { animation: none; opacity: 0; }
  /* Released by the event, then the same 170ms beat the letters keep before it appears and falls. */
  .hero-dot-go .home-v53 .hero h1 .dot { animation: dot-bounce 2112ms both; animation-delay: 170ms; }

  /* The settled floors win over the layer above them. */
  .hero-settled .home-v53 .hero h1 .dot { animation: none; opacity: 1; transform: none; will-change: auto; }
  .hero-settled .home-v53 .u .l i, .hero-done .home-v53 .u .l i { animation: none; opacity: 1; transform: none; }
}

/* Visually hidden, read by assistive technology: the whole word the split letters spell. */
.home-v53 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }