/* Motion is progressively enabled. The avatar's transforms belong to its guide. */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 101;
  height: 3px;
  background: var(--copper);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .82;
}

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes motion-dialog {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes motion-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes motion-bars {
  from { transform: scaleY(.25); opacity: .4; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes motion-id-mark {
  from { transform: rotate(-65deg) scale(.86); }
  to { transform: rotate(-15deg) scale(1); }
}
@keyframes motion-backdrop {
  from { opacity: .35; transform: translate(14px, -10px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes motion-contact-mark {
  from { transform: rotate(-45deg) scale(.8); opacity: .35; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes motion-routing {
  from { opacity: .25; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes motion-menu {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .motion-enter {
    animation: motion-rise .6s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) backwards;
  }
  .motion-enabled .hero-name.motion-enter {
    animation-name: motion-fade;
    animation-duration: .9s;
  }
  .motion-enabled .reveal-ready {
    transition: opacity .62s ease, transform .62s cubic-bezier(.22, 1, .36, 1);
  }
  .motion-enabled .motion-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  }
  .motion-enabled .motion-reveal:not(.motion-in-view) {
    opacity: 0;
    transform: translateY(12px);
  }
  .motion-enabled .motion-reveal:focus-within {
    opacity: 1;
    transform: translateY(0);
  }
  .motion-enabled .section-label {
    position: relative;
  }
  .motion-enabled .section-label::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto;
    height: 1px;
    background: var(--copper);
    opacity: .28;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
  }
  .motion-enabled .section-label.motion-in-view::before {
    animation: motion-line .85s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .motion-enabled .motion-scene-ready > .motion-stagger-item {
    animation: motion-rise .5s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) backwards;
  }
  .motion-enabled .about-aside.is-visible .id-art i {
    animation: motion-id-mark .85s cubic-bezier(.22, 1, .36, 1) .12s backwards;
  }
  .motion-enabled .about-aside.is-visible .identity-card::after {
    animation: motion-backdrop 1.4s cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .motion-enabled .project.motion-scene-ready .chart-bars i {
    transform-origin: center bottom;
    animation: motion-bars .65s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) backwards;
  }
  .motion-enabled .project.motion-scene-ready .sound-wave i {
    transform-origin: center;
    animation: motion-bars .65s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) backwards;
  }
  .motion-enabled .project.motion-scene-ready .routing-targets span {
    animation: motion-routing .55s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) backwards;
  }
  .motion-enabled .contact-grid.is-visible .contact-star {
    animation: motion-contact-mark 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
  }
  .motion-enabled #detail-dialog[open] {
    animation: motion-dialog .24s cubic-bezier(.22, 1, .36, 1);
  }
  .motion-enabled #detail-dialog[open]::backdrop {
    animation: motion-fade .22s ease;
  }

  /* Move compact affordances, while keeping text and layout steady. */
  :is(.text-link, .resume-link, .header-hello, .button, .contact-action, .back-top) > span[aria-hidden] {
    display: inline-block;
    transition: transform .22s ease;
  }
  :is(.text-link, .resume-link, .header-hello, .button, .contact-action):is(:hover, :focus-visible) > span[aria-hidden] {
    transform: translate(2px, -2px);
  }
  .resume-link:is(:hover, :focus-visible) > span[aria-hidden] {
    transform: translateY(3px);
  }
  .contact-action {
    transition: color .2s ease;
  }
  .contact-action:hover {
    padding-left: 0;
  }
  .contact-action > span:first-child {
    transition: transform .22s ease;
  }
  .contact-action:is(:hover, :focus-visible) > span:first-child {
    transform: translateX(5px);
  }
  .site-header nav a::after {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s ease;
  }
  .site-header nav a:is(:hover, :focus-visible, [aria-current])::after {
    transform: scaleX(1);
  }
  .scroll-circle {
    transition: background .2s ease, transform .22s ease;
  }
  .scroll-circle:is(:hover, :focus-visible) {
    transform: translateY(3px);
  }
  .tool-symbol {
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  }
  .tool:is(:hover, :focus-visible) .tool-symbol {
    transform: translateY(-3px) rotate(-3deg);
  }
  .tool:is(:hover, :focus-visible) .tool-arrow {
    opacity: 1;
  }
  .filters button {
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .filters button:focus-visible {
    transform: translateY(-2px);
  }
  .role[open] .role-detail {
    animation: motion-rise .24s ease;
  }
  .role summary .role-main {
    transition: transform .2s ease;
  }
  .role summary:focus-visible .role-main {
    transform: translateX(3px);
  }
  .project-open:focus-visible .project-visual {
    transform: translateY(-4px);
  }
  .project-arrow {
    transition: background .2s ease, color .2s ease, transform .22s ease;
  }
  .project-open:is(:hover, :focus-visible) .project-arrow {
    background: var(--ink);
    color: var(--paper);
    transform: rotate(7deg);
  }
  .identity-card {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .dialog-close {
    transition: background .2s ease, transform .2s ease;
  }
  .dialog-close:is(:hover, :focus-visible) {
    transform: rotate(90deg);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .identity-card:hover {
    transform: rotate(1deg) translateY(-3px);
  }
  .filters button:hover {
    transform: translateY(-2px);
  }
  .role summary:hover .role-main {
    transform: translateX(3px);
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .motion-enabled #site-nav.is-open {
    animation: motion-menu .22s ease;
  }
  #menu-toggle > span {
    transition: transform .2s ease;
  }
  #menu-toggle[aria-expanded='true'] > span {
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
  .motion-reveal { opacity: 1; transform: none; }
}