/* Motion follows the site's two subjects: places on a map, evidence in a line. */
.hero h1 .hero-line { display: block; color: var(--color-ink); }
.hero h1 .hero-line-accent { color: var(--color-accent); }
.site-nav { position: relative; }
.nav-indicator { position: absolute; pointer-events: none; left: 0; top: 0; height: 1px; width: 0; opacity: 0; background: var(--color-accent); transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity 180ms ease; }
.motion-enabled .site-nav a::after { opacity: 0; }
.header-contact { transition: color 180ms ease, background-color 180ms ease; }
.text-link > span, .read-link > span, .project-source > span, .button > span { transition: transform 300ms var(--ease-out); }
.text-link:hover > span, .read-link:hover > span, .project-source:hover > span, .button:hover > span { transform: translate(3px, -3px); }
.button-primary { transition: transform 300ms var(--ease-out), background-color 180ms ease; }
.button-primary:hover { transform: translateY(-2px); }
.scene { transform: translate3d(0, var(--parallax-y, 0px), 0); }
.hero-art { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 600ms var(--ease-out); }
.project-graphic { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--cover-scale, 1)); transition: transform 550ms var(--ease-out); }
.banner-image img { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.045); }
.motion-enabled .is-revealed .map-route { animation: studio-route 1350ms var(--ease-out) 180ms both; }
.motion-enabled .is-revealed .map-pin circle, .motion-enabled .is-revealed .map-pin-core circle { transform-box: fill-box; transform-origin: center; animation: studio-pin 550ms var(--ease-out) 450ms backwards; }
.motion-enabled .is-revealed .map-pin circle:nth-child(2), .motion-enabled .is-revealed .map-pin-core circle:nth-child(2) { animation-delay: 700ms; }
.motion-enabled .is-revealed .map-pin circle:nth-child(3), .motion-enabled .is-revealed .map-pin-core circle:nth-child(3) { animation-delay: 950ms; }
.motion-enabled .is-revealed .analysis-line { stroke-dasharray: var(--line-length); animation: studio-line 1400ms var(--ease-out) 180ms backwards; }
.motion-enabled .is-revealed .analysis-point, .motion-enabled .is-revealed .analysis-nodes circle { transform-box: fill-box; transform-origin: center; animation: studio-pin 500ms var(--ease-out) 650ms backwards; }
.motion-enabled .is-revealed .analysis-nodes circle:nth-child(2) { animation-delay: 850ms; }
.motion-enabled .is-revealed .analysis-nodes circle:nth-child(3) { animation-delay: 1050ms; }
.motion-enabled dialog[open]::backdrop { animation: studio-backdrop 240ms ease both; }
.motion-enabled dialog.dialog-exiting::backdrop { animation: studio-backdrop-out 180ms ease forwards; }
.lightbox-image { overflow: hidden; touch-action: pan-y; }
.photo-open img { transition: transform 600ms var(--ease-out); }
.photo-expand { transition: transform 350ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .project-row:hover .project-graphic { --cover-scale: 1.035; }
  .photo-open:hover img { transform: scale(1.055); }
  .photo-open:hover .photo-expand { transform: rotate(8deg); }
}
@keyframes studio-route { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes studio-pin { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes studio-line { from { stroke-dashoffset: var(--line-length); } to { stroke-dashoffset: 0; } }
@keyframes studio-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes studio-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 760px) {
  .site-nav { position: absolute; }
  .scene, .project-graphic { transform: none; }
  .hero-art { transform: none; }
  .banner-image img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .hero-art, .project-graphic, .banner-image img { transform: none !important; }
  .motion-enabled .is-revealed .map-route, .motion-enabled .is-revealed .map-pin circle,
  .motion-enabled .is-revealed .map-pin-core circle, .motion-enabled .is-revealed .analysis-line,
  .motion-enabled .is-revealed .analysis-point, .motion-enabled .is-revealed .analysis-nodes circle,
  .motion-enabled dialog[open]::backdrop { animation: none !important; }
  .nav-indicator, .photo-open img, .photo-expand, .hero-art { transition: none !important; }
  .photo-open:hover img, .photo-open:hover .photo-expand, .button-primary:hover,
  .text-link:hover > span, .read-link:hover > span, .project-source:hover > span, .button:hover > span { transform: none; }
}

/* The two views share one document; only the visible content is animated. */
body.view-switching, body.view-switching .site-header { transition: background-color 480ms ease, color 480ms ease, border-color 480ms ease; }
@media (prefers-reduced-motion: reduce) { body.view-switching, body.view-switching .site-header { transition: none; } }