@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-away .14s ease both; }
::view-transition-new(root) { animation: page-arrive .18s ease both; }
@keyframes page-away { to { opacity: 0; } }
@keyframes page-arrive { from { opacity: 0; } }
.site-header, .blog-header { position: sticky; top: 0; z-index: 100; }
.header-inner > .brand, .blog-brand { transition: transform .25s ease; }
.is-condensed .brand, .is-condensed .blog-brand { transform: scale(.84); }
.is-condensed #main-nav, .is-condensed .blog-header nav { transform: translateY(-1px); }
.js-ready .reveal { transform: translateY(22px); transition: opacity .55s ease, transform .7s var(--easing); }
.js-ready .from-left { transform: translateX(-25px); }
.js-ready .from-right { transform: translateX(25px); }
.js-ready .is-visible { opacity: 1; transform: none; }
.snapshot { transition: transform .25s var(--easing); }
.snapshot:hover { box-shadow: 0 1px 5px #0002; }
.selected-project { transition: transform .25s var(--easing); }
.selected-project h3 > span { display: inline-block; transition: transform .25s var(--easing); color: var(--muted); }
.selected-project:is(:hover, :focus-visible) { transform: translateY(-4px); }
.selected-project:is(:hover, :focus-visible) h3 > span { transform: translate(4px, -4px); }
.selected-image { border-color: var(--surface); }
.work-window { transform: translateY(var(--preview-drift, 0px)); }
.work-phone { transform: translateY(calc(var(--preview-drift, 0px) * -.5)); }
.process-grid { position: relative; align-items: start; padding-top: 0; }
.process-grid::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 1px; background: var(--line); transform-origin: left; }
.js-ready .process-grid::before { transform: scaleX(0); transition: transform 1.1s var(--easing); }
.js-ready .process-grid.is-visible::before { transform: scaleX(1); }
.process-bar, .turquoise, .pink, .yellow { width: 56px; height: 56px; margin: 0 0 28px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); overflow: visible; }
.process-bar::after { display: none; }
.process-bar span { font: 19px/1 var(--font-reference); font-weight: 600; letter-spacing: -.06em; color: var(--muted); }
.js-ready .process-step .process-bar { transform: none; transition: none; }
.process-step.is-visible .process-bar { border-color: var(--accent); }
.process-step.is-visible .process-bar span { color: var(--accent); }
.process-note { color: var(--muted); }
.form-field input, .form-field textarea { transition: none; }
.form-field :is(input, textarea):focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-status[data-state="success"] { animation: confirmation-in .25s ease both; }
.form-status[data-state="success"]::before { content: "✓ "; }
@keyframes confirmation-in { from { opacity: .3; transform: translateY(5px); } }
@media (max-width: 620px) {
  .process-grid::before { width: 1px; height: auto; left: 26px; right: auto; top: 25px; bottom: 25px; transform-origin: top; }
  .js-ready .process-grid::before { transform: scaleY(0); }
  .js-ready .process-grid.is-visible::before { transform: scaleY(1); }
  .process-bar { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .js-ready .reveal, .js-ready .from-left, .js-ready .from-right, .js-ready .process-grid::before { opacity: 1; transform: none; }
  .work-window, .work-phone, .selected-project:is(:hover, :focus-visible) { transform: none; }
}