:root {
  --motion-fast: 140ms;
  --motion-base: 260ms;
  --motion-reveal: 560ms;
  --motion-hero: 720ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ui: cubic-bezier(.4, 0, .2, 1);
  --motion-copper: #b28b63;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 90;
  pointer-events: none;
  color: var(--motion-copper);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ui), transform 80ms linear;
  view-transition-name: none;
}
.cursor-ring::before {
  content: "";
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: scale(1);
  transition: transform var(--motion-base) var(--motion-ease), opacity var(--motion-fast) var(--motion-ui);
  opacity: .8;
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-on-dark { color: #fff; }
.cursor-ring.is-active::before { transform: scale(1.5556); opacity: .9; }
.cursor-ring.is-pressed::before { transform: scale(.8); }

.magnetic-part { display: inline-block; translate: 0 0; }
.has-pointer-motion [data-magnetic] > .magnetic-part {
  translate: var(--magnetic-x, 0px) var(--magnetic-y, 0px);
  transition: translate var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}
[data-image-motion] { overflow: hidden; }
[data-image-motion] img {
  transform-origin: 50% 45%;
  transition: transform 580ms var(--motion-ease);
}
.has-pointer-motion [data-image-motion].is-image-active img {
  transform: perspective(1100px) translate3d(var(--image-pan-x, 0px), var(--image-pan-y, 0px), 0) rotateX(var(--image-tilt-x, 0deg)) rotateY(var(--image-tilt-y, 0deg)) scale(1.035);
}

.motion-surface {
  position: relative;
  isolation: isolate;
  --surface-rgb: 178 139 99;
}
.section-dark.motion-surface,
.section-dark .motion-surface,
.dark-section.motion-surface,
.dark-section .motion-surface,
[data-cursor-tone="light"].motion-surface,
[data-cursor-tone="light"] .motion-surface { --surface-rgb: 223 186 144; }
.motion-surface::before,
.motion-surface::after { pointer-events: none; position: absolute; z-index: -1; }
.motion-surface[data-motion-surface="card"]::before {
  content: "";
  inset: 0;
  border: 1px solid rgb(var(--surface-rgb) / .7);
  border-radius: inherit;
  box-shadow: 0 12px 26px rgb(28 31 32 / .08);
  opacity: 0;
  transform: translateY(0);
  transition: opacity 220ms var(--motion-ui), transform 360ms var(--motion-ease);
}
.motion-surface::after {
  content: "";
  left: 0;
  top: 0;
  width: var(--surface-size, 240px);
  height: var(--surface-size, 240px);
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--surface-rgb) / .22), rgb(var(--surface-rgb) / .06) 44%, transparent 72%);
  transform: translate3d(calc(var(--surface-x, 120px) - 50%), calc(var(--surface-y, 120px) - 50%), 0);
  opacity: 0;
  transition: opacity 260ms var(--motion-ui), transform 180ms var(--motion-ease);
}
.has-pointer-motion .motion-surface.is-surface-active::after { opacity: 1; }
.has-pointer-motion .motion-surface[data-motion-surface="card"].is-surface-active::before,
.motion-surface[data-motion-surface="card"]:focus-within::before { opacity: 1; transform: translateY(-3px); }
.motion-surface[data-motion-surface="section"]::after {
  background: radial-gradient(circle, rgb(var(--surface-rgb) / .14), rgb(var(--surface-rgb) / .035) 46%, transparent 72%);
}
.motion-surface[data-motion-surface="timeline"]::before,
.motion-surface[data-motion-surface="timeline"]::after { content: none; display: none; }
.timeline.motion-timeline-ready::after {
  content: "";
  position: absolute;
  left: var(--timeline-axis, 8.5px);
  top: var(--timeline-track-top, 9px);
  bottom: var(--timeline-track-bottom, 40px);
  width: 1px;
  background: var(--motion-copper);
  transform: scaleY(var(--timeline-progress, 0));
  transform-origin: top;
  pointer-events: none;
  z-index: 0;
}
.timeline.motion-timeline-ready > .timeline-item { z-index: 1; }
.timeline.motion-timeline-ready .timeline-number {
  position: relative;
  z-index: 1;
  transition: color 220ms var(--motion-ui), border-color 220ms var(--motion-ui), opacity 260ms var(--motion-ui), scale 260ms var(--motion-ease);
}
.timeline.motion-timeline-ready .timeline-item:not(.is-timeline-reached) .timeline-number { opacity: .52; }
.timeline.motion-timeline-ready .timeline-item.is-timeline-reached .timeline-number { color: #946d48; border-color: currentColor; opacity: 1; }
.timeline.motion-timeline-ready .timeline-item.is-timeline-reached .timeline-number::after { background: currentColor; }
.has-pointer-motion .timeline.motion-timeline-ready .timeline-item.is-surface-active .timeline-number { scale: 1.22; opacity: 1; }
.home-exchange.motion-surface::after,
.research-statement.motion-surface::after {
  background: radial-gradient(circle, rgb(var(--surface-rgb) / .2), rgb(var(--surface-rgb) / .055) 45%, transparent 72%);
}

@keyframes motion-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motion-media {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motion-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes motion-timeline {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes motion-step {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motion-marker {
  from { opacity: .2; }
  to { opacity: 1; }
}
.hero-enter {
  animation-name: motion-reveal;
  animation-duration: var(--motion-hero);
  animation-timing-function: var(--motion-ease);
  animation-delay: calc(var(--order, 0) * 60ms);
}
.reveal.is-visible {
  animation: motion-reveal var(--motion-reveal) var(--motion-ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}
.reveal.is-reveal-pending { opacity: 0; }
.reveal[data-reveal-kind="media"].is-visible {
  animation-name: motion-media;
  animation-duration: 600ms;
}
.reveal[data-reveal-kind="timeline"].is-visible { animation-name: motion-timeline; animation-duration: 600ms; }
.reveal[data-reveal-kind="step"].is-visible { animation-name: motion-step; animation-duration: 600ms; }
.reveal[data-reveal-kind="card"].is-visible { animation-name: motion-step; animation-duration: 600ms; }
.reveal.is-visible .motion-step-mark { animation: motion-marker 600ms var(--motion-ease) both; animation-delay: calc(var(--reveal-delay, 0ms) + 100ms); }
body:not([data-page="home"]) .page-heading .page-title.is-visible { animation-duration: 720ms; animation-delay: 80ms; }
body:not([data-page="home"]) .page-heading .page-lead.is-visible { animation-duration: 640ms; animation-delay: 180ms; }
.motion-heading.reveal.is-visible { animation: none; }
.motion-heading.reveal.is-visible > .motion-heading-part {
  animation: motion-reveal 620ms var(--motion-ease) both;
  animation-delay: calc(var(--heading-stage, 0) * 90ms);
}
.reveal.reveal-by-focus,
.reveal.reveal-by-focus .motion-heading-part { animation: none !important; opacity: 1 !important; transform: none !important; }
.section-heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: 22px;
  background: var(--motion-copper);
  transform-origin: left;
}
.section-heading.reveal.is-visible::after {
  animation: motion-line var(--motion-reveal) var(--motion-ease) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 80ms);
}
.motion-heading::after { width: 72px; }
.motion-heading.reveal.is-visible::after { animation-duration: 680ms; animation-delay: 160ms; }
.reading-progress { background: var(--motion-copper); }
.nav-link::after { transition-duration: var(--motion-base); transition-timing-function: var(--motion-ease); }
.process-rail a { position: relative; }
.process-rail a::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 1px;
  background: var(--motion-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--motion-ease);
}
.process-rail a[aria-current="location"] { color: #805c3e; }
.process-rail a[aria-current="location"]::after,
.process-rail a:hover::after { transform: scaleX(1); }
.mobile-nav.is-open { animation-duration: var(--motion-base); animation-timing-function: var(--motion-ease); }
.research-detail[open] > :not(summary) { animation: motion-reveal var(--motion-base) var(--motion-ease) both; }
::view-transition-old(root) { animation-duration: 160ms; }
::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--motion-ease); }

.footer-principle {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink);
  margin-top: 22px;
}
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-back-top { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 12px; }
.footer-back-top .icon { width: 18px; height: 18px; transition: transform var(--motion-base) var(--motion-ease); }
.footer-back-top:hover .icon { transform: translate(2px, -2px); }
@media (max-width: 820px) {
  .footer-principle { font-size: 14px; margin-top: 18px; }
  .footer-bottom { gap: 16px; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
  .motion-surface::before, .motion-surface::after { display: none; }
}
@media print {
  .cursor-ring, .motion-surface::before, .motion-surface::after { display: none; }
  .reveal.is-reveal-pending { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cursor-ring, .reading-progress { display: none !important; }
  .motion-surface::before, .motion-surface::after { display: none !important; }
  .timeline.motion-timeline-ready::after { transform: scaleY(1) !important; }
  .timeline.motion-timeline-ready .timeline-number { opacity: 1 !important; scale: none !important; }
  [data-magnetic] > .magnetic-part { translate: none !important; }
  [data-image-motion] img { transform: none !important; }
  .reveal, .hero-enter { opacity: 1 !important; transform: none !important; }
  @view-transition { navigation: none; }
}
