/* Keyframes, entrance motion and the reduced-motion fallback. */
@keyframes copy-in {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes tr-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tr-stamp {
  from { opacity: 0; transform: scale(1.3); }
  to { opacity: 1; transform: none; }
}
@keyframes tr-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrim-in { from { opacity: 0; } }
@keyframes scrim-out { to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes wt-swap { from { opacity: 0; } }
@keyframes wt-progress { to { transform: scaleX(1); } }

/* The promise fades up once; nothing else on the page moves until it is scrolled to. */
.hero__copy { animation: copy-in .7s var(--ease-out) .1s both; }

/* The Trail writes itself, once and quietly: the route is traced, each checkpoint settles in as the
   route reaches it, then its tick and time stamp appear. */
.js .art-print .tr-route--draw, .js .art-print .tr-tick { stroke-dashoffset: 1; }
.js .art-print .tr-node__body, .js .art-print .tr-label, .js .art-print .tr-tag, .js .art-print .tr-route--dash { opacity: 0; }
.js .art-print.is-printing .tr-route--draw { animation: tr-trace var(--dur, 1.2s) linear var(--d, 0s) both; }
.js .art-print.is-printing .tr-route--dash { animation: tr-fade .9s var(--ease-std) var(--d, 0s) both; }
.js .art-print.is-printing .tr-node__body { animation: tr-stamp .4s var(--ease-out) var(--d, 0s) both; }
.js .art-print.is-printing .tr-tick { animation: tr-trace .32s var(--ease-out) calc(var(--d, 0s) + .3s) both; }
.js .art-print.is-printing .tr-label, .js .art-print.is-printing .tr-tag { animation: tr-rise .5s var(--ease-out) calc(var(--d, 0s) + .15s) both; }
/* A scene redrawn for a new box size after it has printed shows straight away, finished. */
.js .art-print.is-settled .tr-route--draw, .js .art-print.is-settled .tr-tick { animation: none; stroke-dashoffset: 0; }
.js .art-print.is-settled .tr-node__body, .js .art-print.is-settled .tr-label, .js .art-print.is-settled .tr-tag, .js .art-print.is-settled .tr-route--dash { animation: none; opacity: 1; }

/* Stats rise out of their clipping box when the band scrolls into view. */
.js .stats .stat__value { transform: translateY(105%); transition: transform 1s var(--ease-out); }
.js .stats.is-in .stat__value { transform: none; }
.js .stats.is-in .stat:nth-child(2) .stat__value { transition-delay: .08s; }
.js .stats.is-in .stat:nth-child(3) .stat__value { transition-delay: .16s; }
.js .stats.is-in .stat:nth-child(4) .stat__value { transition-delay: .24s; }

@media print {
  .js .art-print .tr-route--draw, .js .art-print .tr-tick { stroke-dashoffset: 0; }
  .js .art-print .tr-node__body, .js .art-print .tr-label, .js .art-print .tr-tag, .js .art-print .tr-route--dash { opacity: 1; }
  .js .stats .stat__value, .js [data-reveal] .vg { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .art-print .tr-route--draw, .js .art-print .tr-tick { stroke-dashoffset: 0; }
  .js .art-print .tr-node__body, .js .art-print .tr-label, .js .art-print .tr-tag, .js .art-print .tr-route--dash { opacity: 1; }
  .js .stats .stat__value, .js [data-reveal] .vg { transform: none; opacity: 1; }
  .js .stats .stat::before, .js [data-reveal].step::before { opacity: 1; transform: none; }
  .js .stats .stat::after, .js [data-reveal].step::after { clip-path: none; }
}