/* Motion: slow, soft, nothing bouncy. Everything is visible without JS and with reduced motion. */

/* ---- cover, on load (pure CSS) ---- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes arch-open { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

.cover__meta, .cover__left, .cover__right { animation: rise 1.4s var(--ease) .1s backwards; }
.mast__a { animation: rise 1.6s var(--ease) .15s backwards; }
.mast__b { animation: rise 1.6s var(--ease) .35s backwards; }
.cover__arch { animation: arch-open 2.4s var(--ease) .2s backwards; translate: 0 calc(var(--py, 0) * 1px); }
.cut-hero { animation: rise 1.8s var(--ease) .9s backwards; }
.cover__left { animation-delay: .7s; }
.cover__right { animation-delay: .9s; }

/* ---- reveal on scroll ---- */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
  transition-delay: calc(var(--d, 0) * 130ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* hairlines drawing in */
.js .draw::after, .js .runfolio::before {
  transition: transform 1.9s var(--ease); transition-delay: calc(var(--d, 0) * 130ms + 250ms);
}
.js .draw:not(.is-in)::after, .js .runfolio:not(.is-in)::before { transform: scaleX(0); }

/* thin-line infographics grow in with their figure */
.meter::after, .ruler::before { transition: transform 2.2s var(--ease) .6s; }
.dots::after { transition: clip-path 2.2s var(--ease) .6s; }
.meter::before, .ruler::after, .trail::after { transition: opacity 1s var(--ease) 1.8s; }
.js .stat:not(.is-in) .meter::after, .js .stat:not(.is-in) .ruler::before { transform: scaleX(0); }
.js .stat:not(.is-in) .dots::after { clip-path: inset(0 100% 0 0); }
.js .stat:not(.is-in) .meter::before, .js .stat:not(.is-in) .ruler::after, .js .stat:not(.is-in) .trail::after { opacity: 0; }

/* signature draws itself */
.sign__svg path { transition: stroke-dashoffset 3.2s var(--ease) .4s; }
.js .sign:not(.is-in) .sign__svg path { stroke-dashoffset: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .draw:not(.is-in)::after, .js .runfolio:not(.is-in)::before { transform: none; }
  .js .stat:not(.is-in) .meter::after, .js .stat:not(.is-in) .ruler::before { transform: none; }
  .js .stat:not(.is-in) .dots::after { clip-path: inset(0 calc(100% - var(--v) * 100%) 0 0); }
  .js .stat:not(.is-in) .meter::before, .js .stat:not(.is-in) .ruler::after, .js .stat:not(.is-in) .trail::after { opacity: 1; }
  .js .sign:not(.is-in) .sign__svg path { stroke-dashoffset: 0; }
  .cover__arch { translate: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}