/* Motion for the whole site (motion.js). */

/* The thread at the top grows with the scroll. */
.scroll-thread { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.scroll-thread.on { opacity: 1; }
.scroll-thread i { display: block; height: 100%; width: calc(var(--k, 0) * 100%); background: var(--accent); border-radius: 0 3px 3px 0; }

/* Headings: words rise one after another, a thread is drawn under the line. */
.word { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .5s ease, transform .65s cubic-bezier(.2, .8, .3, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.shown .word, .written .word { opacity: 1; transform: none; }
.h-thread { display: block; width: min(100%, 16rem); height: .75rem; margin-top: .3rem; overflow: visible; }
.h-thread path { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1) .35s; }
.shown .h-thread path, .written .h-thread path { stroke-dashoffset: 0; }

/* Page changes. The header stays still while the page under it changes. */
.nav { view-transition-name: nav; }
.bar { view-transition-name: bar; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* A strip that drifts sideways while it is on screen. */
.drift { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.drift-track { display: flex; gap: .7rem; width: max-content; animation: drift 46s linear infinite; animation-play-state: paused; }
.drift.moving .drift-track { animation-play-state: running; }
.drift:hover .drift-track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-50% - .35rem)); } }

/* Pictures develop like a photo when they appear. */
.reveal img.dev, .reveal video.dev { filter: saturate(0) brightness(1.4) contrast(.7); opacity: .4; transition: filter 1.2s ease, opacity .8s ease; }
.reveal.shown img.dev, .reveal.shown video.dev { filter: none; opacity: 1; }

/* Small pressed feel on every button; arrows nudge on hover. */
.btn, .chip, .tabs-row button, .seg button { transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.more::after { display: inline-block; transition: transform .2s ease; }
.more:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .word { opacity: 1; transform: none; transition: none; }
  .h-thread path { stroke-dashoffset: 0; transition: none; }
  .drift-track { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}