/* Authored editorial motion. Final, readable content is the no-JavaScript default. */
[data-motion-section] [data-motion-highlight] {
  position: relative;
  isolation: isolate;
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: .02em .09em .06em;
  margin-inline: -.02em;
  line-height: 1.14;
  color: var(--ink, #101924);
  /* Normal inline layout reserves the full highlight height between lines. */
  overflow: visible;
}

[data-motion-section] [data-motion-highlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 1px;
  background: var(--mint, #9ce8dc);
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}

/* Pending text stays readable; only the decorative sweep waits for entry. */
[data-motion-section] [data-motion-highlight][data-motion-state="pending"] {
  color: inherit;
}

[data-motion-section] [data-motion-highlight][data-motion-state="pending"]::before {
  transform: scaleX(0);
}

[data-motion-section] [data-motion-item].sm-entering {
  animation: section-copy-enter 660ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--section-motion-delay, 0ms);
}

[data-motion-section] [data-motion-highlight].sm-highlighting {
  animation: section-highlight-ink 1ms step-end both;
  animation-delay: calc(var(--section-motion-delay, 0ms) + var(--highlight-delay, 160ms) + 420ms);
}

[data-motion-section] [data-motion-highlight].sm-highlighting::before {
  animation: section-highlight-sweep 420ms cubic-bezier(.25, .7, .2, 1) both;
  animation-delay: calc(var(--section-motion-delay, 0ms) + var(--highlight-delay, 160ms));
}

/* The hidden final value owns the width. Only its overlaid visual twin changes. */
[data-motion-section] .motion-stat .motion-count,
[data-motion-section] .motion-stat .motion-count-reserve,
[data-motion-section] .motion-stat .motion-count-value {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  font-variant-numeric: tabular-nums lining-nums;
}

[data-motion-section] .motion-stat .motion-count {
  display: inline-grid;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: start;
}

[data-motion-section] .motion-count-reserve,
[data-motion-section] .motion-count-value {
  grid-area: 1 / 1;
}

[data-motion-section] .motion-count-reserve {
  visibility: hidden;
}

@keyframes section-copy-enter {
  from { opacity: .24; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes section-highlight-sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes section-highlight-ink {
  from { color: var(--paper, #f5f1e9); }
  to { color: var(--ink, #101924); }
}

/* CSS settles immediately even before the media-query change callback runs. */
@media (prefers-reduced-motion: reduce) {
  [data-motion-section] [data-motion-item],
  [data-motion-section] [data-motion-highlight],
  [data-motion-section] [data-motion-highlight]::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  [data-motion-section] [data-motion-highlight] { color: var(--ink, #101924) !important; }
  [data-motion-section] .motion-count-reserve { visibility: visible; }
  [data-motion-section] .motion-count-value { visibility: hidden; }
}

@media print {
  [data-motion-section] [data-motion-item],
  [data-motion-section] [data-motion-highlight],
  [data-motion-section] [data-motion-highlight]::before {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  [data-motion-section] [data-motion-highlight] { color: var(--ink, #101924) !important; }
  [data-motion-section] .motion-count-reserve { visibility: visible; }
  [data-motion-section] .motion-count-value { visibility: hidden; }
}

/* Three restrained treatments: rise, a short line entrance, and simple emphasis. */
[data-motion-section] [data-motion-item="line"].sm-entering {
  animation-name: section-line-enter;
  animation-duration: 560ms;
}
[data-motion-section] [data-motion-item="fade"].sm-entering {
  animation-name: section-copy-fade;
  animation-duration: 480ms;
}
[data-motion-section] [data-motion-highlight="underline"] {
  color: inherit;
  padding: 0 .025em .075em;
  margin-inline: 0;
  line-height: 1.12;
}
[data-motion-section] [data-motion-highlight="underline"]::before {
  inset: auto 0 .02em;
  height: .055em;
  border-radius: 0;
}
[data-motion-section] [data-motion-highlight="underline"].sm-highlighting {
  animation: none;
  color: inherit;
}
[data-motion-section] [data-motion-highlight="underline"].sm-highlighting::before {
  animation-duration: 420ms;
}
@keyframes section-line-enter {
  from { opacity: .4; transform: translateY(.16em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes section-copy-fade {
  from { opacity: .55; }
  to { opacity: 1; }
}
@media(prefers-reduced-motion:reduce) {
  [data-motion-section] [data-motion-highlight="underline"] { color: inherit!important; }
}
@media print {
  [data-motion-section] [data-motion-highlight="underline"] { color: inherit!important; }
}

/* The outer inline-block always exposes the same text baseline. Its block
   child supplies a permanent visual mask; no overflow mode changes at rest. */
[data-motion-section] .motion-word{display:inline-block;vertical-align:baseline;width:max-content;max-width:100%;box-sizing:content-box;overflow:visible;color:inherit}
[data-motion-section] .motion-word-mask{display:block;box-sizing:content-box;padding:.13em .04em .18em;margin:-.13em -.04em -.18em;overflow:hidden}
[data-motion-section] .motion-word-ink{display:block;max-width:none;overflow-wrap:anywhere;color:inherit}
[data-motion-section] [data-motion-item].sm-words.sm-entering{animation:none}
[data-motion-section] .sm-words.sm-entering .motion-word-ink{animation:section-word-enter 620ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--section-motion-delay,0ms) + var(--word-delay,0ms))}
@keyframes section-word-enter{from{transform:translateY(135%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){[data-motion-section] .motion-word-ink{animation:none!important;transform:none!important;opacity:1!important}}
@media print{[data-motion-section] .motion-word-ink{animation:none!important;transform:none!important;opacity:1!important}}