/* One vocabulary for navigation, hover and editorial motion. */
:root {
  --motion-fast: 160ms;
  --motion-medium: 300ms;
  --motion-page: 560ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-travel: 36px;
  --motion-rise: 16px;
}
.view.motion-leaving { display: block; pointer-events: none; z-index: 1; }
.view.active { z-index: 2; }
/* Keep the persistent Home control reachable while project media is zoomed. */
.topbar { z-index: 130; }
.brandHome {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  line-height: 0;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.brandHome::after { content: ''; position: absolute; inset: -6px; }
.brandHome:focus-visible { outline: 1px solid var(--cream); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .brandHome:hover { opacity: .82; }
}
.view.active:has(.detailZoomOverlay.active) { z-index: 100; transform: none !important; }
.motion-shared-hidden { visibility: hidden !important; }
.motion-flight {
  position: fixed;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  transform-origin: 0 0;
  contain: layout paint;
}
.motion-flight > * { position: absolute; inset: 0; max-width: none; margin: 0; }
.galleryPanel {
  transform: scale(var(--focus-scale, 1));
  opacity: var(--focus-opacity, 1);
}
.panelImage { transition: transform var(--motion-medium) var(--motion-ease); }
.navNode { transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.navNode:hover { transform: translate(-50%, -50%) scale(1.02); }
.navHoverMoon { transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-medium) var(--motion-ease); }
.backLight, .backDark, .emailArrow, .tab, .miniCell, .navPreview {
  transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.emailArrow { display: inline-block; }
.scrollCue, .detailZoomOverlay { transition: opacity var(--motion-medium) var(--motion-ease); }
.detailZoomOverlay img, .detailZoomGlyph { transition: transform var(--motion-medium) var(--motion-ease); }
.mobileNavPage[data-mobile-nav-target] { transition: background var(--motion-fast) var(--motion-ease); }
.mobileNavOverlay.motion-closing { display: block; pointer-events: none; }
.scrollArrow { animation-iteration-count: 2; }
@media (hover: hover) and (pointer: fine) {
  .panelImage:hover { transform: scale(1.02); }
  .backLight:hover, .backDark:hover { transform: translateX(-4px); }
  .email:hover .emailArrow { transform: translate(3px, -3px); }
  .navPreview:hover { transform: scale(1.02); }
}
@media (max-width: 768px) {
  :root { --motion-page: 460ms; --motion-travel: 18px; --motion-rise: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 120ms; --motion-medium: 120ms; --motion-page: 120ms; --motion-travel: 0px; --motion-rise: 0px; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .ticker, .scrollArrow { animation: none !important; }
  .galleryPanel { transform: none; opacity: 1; }
  .panelImage:hover, .backLight:hover, .backDark:hover, .email:hover .emailArrow, .navPreview:hover { transform: none; }
  .navNode:hover { transform: translate(-50%, -50%); }
  .navHoverMoon, .detailZoomOverlay img, .detailZoomGlyph { transition: none; }
}