/* v3.1: motion is optional; layout and content remain complete without it. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.motion-bar, .waterfall rect { transform-box: fill-box; transform-origin: center bottom; }
.motion-pop { transform-box: fill-box; transform-origin: center; }
.intro-wordmark > span { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.wordmark-line { display: block; }
.timeline-track { position: absolute; top: 8px; bottom: 0; left: 4px; width: 1px; background: var(--line); }
.timeline-track i { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleY(var(--timeline-progress, 1)); transform-origin: top; }
.timeline { position: relative; padding-left: 28px; }
.timeline article { position: relative; }
.timeline article::before { content: ''; position: absolute; top: 31px; left: -28px; width: 9px; height: 9px; border: 1px solid #8193a5; background: var(--paper); border-radius: 50%; }
.timeline article:first-of-type::before { top: 8px; }
.timeline article.is-current::before { background: var(--blue); border-color: var(--blue); }
.menu-icon { position: relative; display: inline-block; width: 18px; height: 16px; }
.menu-icon i { position: absolute; left: 0; width: 18px; height: 1px; background: currentColor; top: 5px; transition: transform .22s, top .22s; }
.menu-icon i:last-child { top: 11px; }
[aria-expanded=true] .menu-icon i { top: 8px; transform: rotate(45deg); }
[aria-expanded=true] .menu-icon i:last-child { transform: rotate(-45deg); }

@keyframes wordmark-reveal { from { transform: translateY(105%); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@keyframes menu-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  [style*="--case-title:"] { view-transition-name: var(--case-title); }
  [style*="--case-number:"] { view-transition-name: var(--case-number); }
  [style*="--case-visual:"] { view-transition-name: var(--case-visual); }
  ::view-transition-group(*) { animation-duration: .32s; animation-timing-function: var(--motion-ease); }
  ::view-transition-old(root) { animation: page-out .18s ease-out both; }
  ::view-transition-new(root) { animation: page-in .26s ease-out both; }
  .wordmark-line { animation: wordmark-reveal .85s var(--motion-ease) both; }
  .intro-wordmark > span:last-child .wordmark-line { animation-delay: .1s; }
  .case-card, .button { transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
  .case-card:active { transform: scale(.993); }
  .button:active { transform: scale(.98); }
  .contact-link span, .home-post-arrow { transition: transform .25s var(--motion-ease); }
  .contact-link:hover span, .home-post:hover .home-post-arrow { transform: translate(3px, -3px); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .site-navigation.open { animation: menu-reveal .22s ease-out; }
  .site-navigation.open a { animation: menu-reveal .26s ease-out backwards; }
  .site-navigation.open a:nth-child(2) { animation-delay: .035s; }
  .site-navigation.open a:nth-child(3) { animation-delay: .07s; }
  .site-navigation.open a:nth-child(4) { animation-delay: .105s; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .timeline-track i { transform: none; }
}