/* Reveal: only when JS has opted in (.js-motion), so content is never hidden without it. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
  transition:
    opacity .7s var(--ease),
    transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Section headlines: each line is its own block; js/behaviors/slide.js slides them in from alternating sides. */
.s__title .ln { display: block; will-change: transform; }

/* Hero headline: characters rise in one after another (--c is the character index). */
/* The characters stay plain inline text (moved with `top`, not transform) so normal Chinese
   line breaking applies: punctuation never starts a line and words like "Mac" never split. */
.hero__title .ch { position: relative; }
.js-motion .hero__title[data-reveal] { opacity: 1; transform: none; }
.js-motion .hero__title .ch {
  opacity: 0;
  top: 0.45em;
  transition:
    opacity .5s var(--ease),
    top .9s var(--ease);
  transition-delay: calc(var(--c, 0) * 45ms + 120ms);
}
.js-motion .hero__title.is-in .ch { opacity: 1; top: 0; }

/* Markers wait for their reveal before drawing. */
.js-motion [data-reveal]:not(.is-in) mark.hl { --hl-progress: 0; }

[data-drift] { will-change: transform; }

/* The yellow flip: the only full-screen use of the accent. */
body { transition: background-color .6s var(--ease); }
body.is-flipped,
body.is-flipped .site-nav { background-color: var(--hl); }
body.is-flipped { --muted: var(--muted-on-hl); }
/* Yellow marker on yellow would vanish: switch to a heavy ink underline while flipped. */
body.is-flipped mark.hl {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: calc(var(--hl-progress, 1) * 100%) 0.1em;
  background-position: 0 96%;
}

@media print {
  .js-motion [data-reveal], .js-motion [data-reveal] > .rise { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-drift] { transform: none !important; will-change: auto; }
  mark.hl { --hl-progress: 1 !important; }
}