/* Small, responsive gestures within the existing exhibition design. */
:root {
  --motion-arrive: cubic-bezier(.16, 1, .3, 1);
  --motion-settle: cubic-bezier(.22, .68, .2, 1);
}

.home-view .world {
  transition: transform 850ms var(--motion-arrive);
}

.home-view .exhibit {
  transition: transform 560ms var(--motion-settle),
    left 850ms var(--motion-arrive), top 850ms var(--motion-arrive);
}
.home-view .wordmark, .home-view .wordmark span {
  transition: left 850ms var(--motion-arrive), top 850ms var(--motion-arrive),
    font-size 850ms var(--motion-arrive), letter-spacing 850ms var(--motion-arrive),
    margin-left 850ms var(--motion-arrive);
}
.home-view .exhibit-face {
  transition: box-shadow 560ms var(--motion-settle);
}
.home-view .exhibit-caption > span {
  transition: transform 420ms var(--motion-arrive);
}
.home-view:not(.workbench-open) .exhibit:is(:hover, :focus-visible):not(:disabled) {
  transform: translateZ(29px) translateY(-3px) rotateX(-20deg);
}
.home-view .exhibit:is(:hover, :focus-visible):not(:disabled) {
  transition-duration: 300ms, 850ms, 850ms;
  transition-timing-function: var(--motion-arrive);
}
.home-view .exhibit:is(:hover, :focus-visible):not(:disabled) .exhibit-face {
  box-shadow: 0 2px 2px #0001, 14px 28px 32px #0002, 32px 60px 70px #0001;
  transition-duration: 300ms;
}
.home-view .exhibit:is(:hover, :focus-visible):not(:disabled) .exhibit-caption > span {
  transform: translate(2px, -2px);
}
.home-view:not(.workbench-open) .exhibit:active:not(:disabled) {
  transform: translateZ(18px) translateY(-1px) rotateX(-20deg);
  transition-duration: 100ms, 850ms, 850ms;
}
.home-view.workbench-open .exhibit:is(:hover, :focus-visible):not(:disabled) {
  transform: translateY(-4px);
}
.home-view.workbench-open .exhibit:active:not(:disabled) {
  transform: translateY(-1px);
}

/* Keep navigation geometry continuous while its active label changes. */
.dock .dock-item {
  width: 43px;
  min-width: 43px;
  padding: 0;
  gap: 0;
  transition: width 380ms var(--motion-arrive), gap 380ms var(--motion-arrive),
    background 180ms ease-out, color 180ms ease-out,
    transform 360ms var(--motion-arrive), border-radius 280ms ease-out;
}
.dock .dock-item .dock-label {
  display: block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 380ms var(--motion-arrive), opacity 160ms ease-out;
}
.dock .dock-item.active { width: 90px; gap: 9px; }
.dock .dock-item.active .dock-label { max-width: 40px; opacity: 1; }
.dock .dock-item:is(:hover, :focus-visible) { transform: translateY(-2px); }
.dock .dock-item:active { transform: translateY(0) scale(.97); transition-duration: 100ms; }
.dock .tooltip { transition: opacity 140ms ease-out, transform 240ms var(--motion-arrive); }
.hero-cta > span { transition: transform 360ms var(--motion-arrive), background 180ms ease-out; }
.hero-cta:active > span { transform: translate(1px, -1px) scale(.96); }

/* The upper print sits close to the edge on short desktop viewports. */
@media (min-width: 951px) and (max-height: 780px) {
  .home-view:not(.workbench-open) .exhibit-art:hover:not(:disabled) {
    transform: translateZ(20px) rotateX(-20deg);
  }
  .home-view:not(.workbench-open) .exhibit-art:focus-visible:not(:disabled) {
    transform: translateZ(13px) rotateX(-20deg);
  }
}

@media (hover: none), (pointer: coarse) {
  .home-view:not(.workbench-open) .exhibit:hover:not(:focus-visible):not(:active) {
    transform: translateZ(13px) rotateX(-20deg);
  }
  .home-view.workbench-open .exhibit:hover:not(:focus-visible):not(:active) {
    transform: translateZ(13px);
  }
  .dock .dock-item:hover:not(:focus-visible):not(:active) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-view .world { translate: none !important; }
  .home-view .exhibit-caption > span { transform: none !important; }
}